echarts之基於geojson的自定義地圖
阿新 • • 發佈：2019-01-01
應用場景：需要在平面圖或者特殊地理區域上展示資料，比如
geojson作為echarts的地圖資料來源，能實現簡單平面圖（如果是立體圖就需要研究svg）上的資料互動。優點：技術低，學習起來沒難度；缺點：耗時耗力，複雜的平面圖有難度。
實現步驟： 1、在 http://geojson.io/ 上畫自己需要的平面圖並匯出為geojson
勾畫區域時新增name屬性
定義一個js檔案
，變數內容為上面製作的topojson檔案
完整簡單demo程式碼如下：
效果：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>巡檢異常讀數地圖</title> </head> <body> <!--<div id="main" style="height: 714px;weight:662px"></div>--> <div id="main" style="height:714px"></div> <script type="text/JavaScript" src="echarts.min.js"></script> <script type="text/javascript" src="test2map.js"></script> <script type="text/javascript"> var testData = [ { name:'區域1',value:'480' }, { name:'區域2',value:'900' }, { name:'區域3',value:'1939' } ]; //獲取最大最小值 以便做資料篩選器 var maxData = 0; var minData = 0; for(var i = 0;i<testData.length;i++){ var value = parseInt(testData[i].value); if(value > maxData){ maxData = value; } if(value<minData){ minData = value; } } var option = { tooltip : { trigger : 'item', formatter : '{b}<br/>{c} (人次)' }, toolbox : { show : true, orient : 'vertical', x : 'right', y : 'center', feature : { mark : { show : true }, saveAsImage : { show : true } } }, dataRange : { min : minData*0.8, max : maxData*1.2, text : [ '生意好', '生意不好' ], realtime : false, calculable : true, x: 'right', y: 'top', orient: 'horizontal' }, series : [ { name : '日客戶流量', type : 'map', mapType : 'mymap', // 自定義擴充套件圖表型別 itemStyle : { normal : { label : { show : true } }, emphasis : { label : { show : true } } }, data : testData, // 文字位置修正 textFixed : { 'Yau Tsim Mong' : [ -10, 0 ] }, // 文字直接經緯度定位 geoCoord : { 'Islands' : [ 113.95, 22.26 ] } } ] }; //series裡定義的mymap,地圖js檔案裡定義的testJson echarts.registerMap('mymap', testJson); var chart = echarts.init(document.getElementById('main')); chart.setOption(option); </script> </body> </html>
