溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Qt怎么編寫地圖echart動態交互”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Qt怎么編寫地圖echart動態交互”吧！
之前用echart組件做過各種效果，隨著各種現場應用現場項目的增多，各種需求也都慢慢增加起來，為了滿足各種不同類型的需求，近期又抽空重新整理和封裝了echart類，主要就是增加了不少的js函數處理，增加了各種屬性和交互，比如單擊對應的閃爍點可以響應單擊事件，然后Qt這邊接收到事件以后進行對應的處理，還比如每個閃爍點都可以設置不一樣的顏色和大小，這樣區分顯示一目了然，當然這些的前提都是echart要支持才行，從官網的手冊來看，用法還是介紹的非常詳細的，模型框架都是統一的，各種屬性和函數的命名基本上都保持了一致性，也許組件A中沒有找到對應的處理，你可以在組件B中看到對應的demo，然后你將此方法直接用到組件A中，會驚喜的發現也是一樣的。
echarts是一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。echarts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
同時支持閃爍點圖、遷徙圖、區域地圖、世界地圖、儀表盤等。
可以設置標題、提示信息、背景顏色、文字顏色、線條顏色、區域顏色等各種顏色。
可設置城市的名稱、值、經緯度 集合。
可設置地圖的放大倍數、是否允許鼠標滾輪縮放。
內置世界地圖、全國地圖、省份地圖、地區地圖，可以精確到縣，所有地圖全部離線使用。
內置了各省市json數據文件轉js文件功能，如有數據更新自行轉換即可，支持單個文件轉換和一鍵轉換所有文件。
內置了從json文件或者js文件獲取該區域的所有名稱和經緯度信息集合的功能，可以通過該方法獲取到信息用來顯示。
依賴瀏覽器組件顯示地圖，提供的demo支持webkit/webengine/miniblink/ie 多種方式加載網頁。
采用miniblink瀏覽器內核打通了Qt5.6及后續版本+mingw編譯器缺少瀏覽器模塊的遺憾，使得整個項目支持所有Qt版本，親測4.7到5.15等任意版本。
閃爍點遷徙圖等設置的點支持單獨設置顏色。
提供接口直接獲取點擊的點相關信息，方便程序聯動處理。
拓展性極強，可以依葫蘆畫瓢自行增加各種精美的echarts組件，做出牛逼的效果。
內置的儀表盤組件提供交互功能，demo演示中包含了對應的代碼。
函數接口友好和統一，使用簡單方便，就一個類。
支持任意Qt版本、任意系統、任意編譯器。
QString Echarts::newChartPoint()
{
if (!checkCount()) {
return "";
}
QStringList body;
body << QString(" var data = [%1]").arg(getValues());
body << QString(" var geoCoordMap = {%1};").arg(getPoints());
//轉換數據
QStringList datas;
datas << QString("var convertData = function (data) {");
datas << QString(" var res = [];");
datas << QString(" for (var i = 0; i < data.length; i++) {");
datas << QString(" var geoCoord = geoCoordMap[data[i].name];");
datas << QString(" if (geoCoord) {");
datas << QString(" res.push({");
datas << QString(" name: data[i].name,");
datas << QString(" value: geoCoord.concat(data[i].value)");
datas << QString(" });");
datas << QString(" }");
datas << QString(" }");
datas << QString(" return res;");
datas << QString("};");
datas << QString("var convertedData = [");
datas << QString(" convertData(data.sort(function(a, b) {");
datas << QString(" return b.value - a.value;");
datas << QString(" }).slice(0, %1))").arg(cityName.count());
datas << QString("];");
datas << getOptionColor();
body << " " + datas.join("\r\n ");
body << "";
QStringList optionBase = getOptionBase();
QStringList optionGeo = getOptionGeo();
QStringList optionSeries;
optionSeries << QString(" name: '%1',").arg(tipTitle);
optionSeries << QString(" type: 'effectScatter',");
optionSeries << QString(" coordinateSystem: 'geo',");
optionSeries << QString(" data: convertedData[0],");
optionSeries << QString(" symbolSize: function (val) {");
optionSeries << QString(" return val[2] / 10;");
optionSeries << QString(" },");
optionSeries << QString(" showEffectOn: 'render',");
optionSeries << QString(" rippleEffect: {");
optionSeries << QString(" brushType: 'stroke'");
optionSeries << QString(" },");
optionSeries << QString(" hoverAnimation: true,");
optionSeries << QString(" label: {");
optionSeries << QString(" normal: {");
optionSeries << QString(" formatter: '{b}',");
//文本的位置,可填 left right top bottom
optionSeries << QString(" position: 'right',");
optionSeries << QString(" show: true");
optionSeries << QString(" }");
optionSeries << QString(" },");
optionSeries << QString(" itemStyle: {");
optionSeries << QString(" normal: {");
optionSeries << QString(" color: color,");
optionSeries << QString(" shadowBlur: 10,");
optionSeries << QString(" shadowColor: '#333'");
optionSeries << QString(" }");
optionSeries << QString(" },");
optionSeries << QString(" zlevel: 1");
QStringList option;
option << optionBase.join("\r\n");
option << optionGeo.join("\r\n");
option << " series: [{";
option << optionSeries.join("\r\n");
option << " }";
option << " ]";
body << " option = {";
body << option.join("\r\n");
body << " };";
return newChart(body.join("\r\n"));
}
QString Echarts::newChartMove(const QString ¢erCity)
{
if (!checkCount()) {
return "";
}
QStringList body;
body << QString(" var data = [%1]").arg(getValues());
body << QString(" var geoCoordMap = {%1};").arg(getPoints());
//找到中心城市的經緯度,默認值北京
QString toCity = "北京";
QString toPoint = "116.46,39.92";
int index = cityName.indexOf(centerCity);
if (index >= 0) {
toCity = centerCity;
toPoint = cityPoint.at(index);
}
//轉換數據
QStringList datas;
datas << QString("var convertData = function(data) {");
datas << QString(" var res = [];");
datas << QString(" for (var i = 0; i < data.length; i++) {");
datas << QString(" var dataItem = data[i];");
datas << QString(" var fromCoord = geoCoordMap[dataItem.name];");
datas << QString(" var toCoord = [%1];").arg(toPoint);
datas << QString(" if (fromCoord && toCoord) {");
datas << QString(" res.push([{");
datas << QString(" coord: fromCoord,");
datas << QString(" value: dataItem.value");
datas << QString(" }, {");
datas << QString(" coord: toCoord,");
datas << QString(" }]);");
datas << QString(" }");
datas << QString(" }");
datas << QString(" return res;");
datas << QString("};");
datas << getOptionColor();
body << " " + datas.join("\r\n ");
body << "";
QStringList optionSeries;
optionSeries << QString(" var series = [];");
optionSeries << QString(" [['%1', data]].forEach(function(item, i) {").arg(toCity);
optionSeries << QString(" series.push({");
optionSeries << QString(" type: 'lines', zlevel: 2,");
optionSeries << QString(" effect: {show: true, period: 4, trailLength: 0.02, symbol: 'arrow', symbolSize: 5,},");
optionSeries << QString(" lineStyle: {normal: {width: 1, opacity: 1, curveness: .3, color: '%1'}},").arg(lineColor.name());
optionSeries << QString(" data: convertData(item[1])}, {");
optionSeries << QString(" name: '%1',").arg(tipTitle);
optionSeries << QString(" type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2,");
optionSeries << QString(" rippleEffect: {period: 4, brushType: 'stroke', scale: 4},");
optionSeries << QString(" label: {");
optionSeries << QString(" normal: {");
optionSeries << QString(" show: true, position: 'right', offset: [5, 0], fontSize: 15,");
optionSeries << QString(" formatter: function(params) {return params.data.name;}");
optionSeries << QString(" },");
optionSeries << QString(" emphasis: {show: true}");
optionSeries << QString(" },");
optionSeries << QString(" symbol: 'circle',");
optionSeries << QString(" symbolSize: function(val) {");
optionSeries << QString(" return 6 + val[2] * 5;");
optionSeries << QString(" },");
optionSeries << QString(" itemStyle: {normal: {show: true, color: color}},");
optionSeries << QString(" data: item[1].map(function(dataItem) {");
optionSeries << QString(" return {name: dataItem.name, value: geoCoordMap[dataItem.name].concat([dataItem.value])};");
optionSeries << QString(" }),");
optionSeries << QString(" },");
//被攻擊點,可自行調整對應的值改變大小速度等
optionSeries << QString(" {");
optionSeries << QString(" type: 'scatter', coordinateSystem: 'geo', zlevel: 2,");
optionSeries << QString(" rippleEffect: {period: 4, brushType: 'stroke', scale: 4},");
optionSeries << QString(" label: {");
optionSeries << QString(" normal: {");
optionSeries << QString(" show: true, position: 'right',");
optionSeries << QString(" color: '#0f0', formatter: '{b}',");
optionSeries << QString(" textStyle: {color: '#0f0'}");
optionSeries << QString(" },");
optionSeries << QString(" emphasis: {show: true, color: '#f60'}");
optionSeries << QString(" },");
optionSeries << QString(" }");
optionSeries << QString(" );");
optionSeries << QString(" }");
optionSeries << QString(" );");
body << optionSeries.join("\r\n") << "";
QStringList optionBase = getOptionBase();
QStringList optionGeo = getOptionGeo();
QString option = QString("%1\r\n%2\r\n series: series").arg(optionBase.join("\r\n")).arg(optionGeo.join("\r\n"));
body << " option = {";
body << option;
body << " };";
return newChart(body.join("\r\n"));
}感謝各位的閱讀，以上就是“Qt怎么編寫地圖echart動態交互”的內容了，經過本文的學習后，相信大家對Qt怎么編寫地圖echart動態交互這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
