首頁>技術>

Qt編寫地圖綜合應用25-echart動態互動

## 一、前言

之前用echart元件做過各種效果，隨著各種現場應用現場專案的增多，各種需求也都慢慢增加起來，為了滿足各種不同型別的需求，近期又抽空重新整理和封裝了echart類，主要就是增加了不少的js函式處理，增加了各種屬性和互動，比如單擊對應的閃爍點可以響應單擊事件，然後Qt這邊接收到事件以後進行對應的處理，還比如每個閃爍點都可以設定不一樣的顏色和大小，這樣區分顯示一目瞭然，當然這些的前提都是echart要支援才行，從官網的手冊來看，用法還是介紹的非常詳細的，模型框架都是統一的，各種屬性和函式的命名基本上都保持了一致性，也許元件A中沒有找到對應的處理，你可以在元件B中看到對應的demo，然後你將此方法直接用到元件A中，會驚喜的發現也是一樣的。

echarts是一個使用 JavaScript 實現的開源視覺化庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的向量圖形庫 ZRender，提供直觀，互動豐富，可高度個性化定製的資料視覺化圖表。echarts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理資料視覺化的地圖、熱力圖、線圖，用於關係資料視覺化的關係圖、旭日圖，多維資料視覺化的平行座標，還有用於 BI 的漏斗圖，儀表盤，並且支援圖與圖之間的混搭。

## 二、功能特點

1. 同時支援閃爍點圖、遷徙圖、區域地圖、世界地圖、儀表盤等。

2. 可以設定標題、提示資訊、背景顏色、文字顏色、線條顏色、區域顏色等各種顏色。

3. 可設定城市的名稱、值、經緯度 集合。

4. 可設定地圖的放大倍數、是否允許滑鼠滾輪縮放。

5. 內建世界地圖、全國地圖、省份地圖、地區地圖，可以精確到縣，所有地圖全部離線使用。

6. 內建了各省市json資料檔案轉js檔案功能，如有資料更新自行轉換即可，支援單個檔案轉換和一鍵轉換所有檔案。

7. 內建了從json檔案或者js檔案獲取該區域的所有名稱和經緯度資訊集合的功能，可以透過該方法獲取到資訊用來顯示。

8. 依賴瀏覽器元件顯示地圖，提供的demo支援webkit/webengine/miniblink/ie 多種方式載入網頁。

9. 採用miniblink瀏覽器核心打通了Qt5.6及後續版本+mingw編譯器缺少瀏覽器模組的遺憾，使得整個專案支援所有Qt版本，親測4.7到5.15等任意版本。

10. 閃爍點遷徙圖等設定的點支援單獨設定顏色。

12. 拓展性極強，可以依葫蘆畫瓢自行增加各種精美的echarts元件，做出牛逼的效果。

13. 內建的儀表盤元件提供互動功能，demo演示中包含了對應的程式碼。

14. 函式介面友好和統一，使用簡單方便，就一個類。

15. 支援任意Qt版本、任意系統、任意編譯器。

## 三、體驗地址

1. 體驗地址：[https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A](https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A) 提取碼：o05q 檔名：bin_map.zip

2. 國內站點：[https://gitee.com/feiyangqingyun](https://gitee.com/feiyangqingyun)

3. 國際站點：[https://github.com/feiyangqingyun](https://github.com/feiyangqingyun)

4. 個人主頁：[https://blog.csdn.net/feiyangqingyun](https://blog.csdn.net/feiyangqingyun)

5. 知乎主頁：[https://www.zhihu.com/people/feiyangqingyun/](https://www.zhihu.com/people/feiyangqingyun/)

## 四、效果圖## 五、相關程式碼
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"));}

20
最新評論
  • ∧ BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • ∨ Springboot整合工作流引擎Activiti(二)