echarts之基于geojson的自定义地图

来源：互联网发布：关于白蛇传的网络歌曲编辑：程序博客网时间：2024/05/19 18:16

应用场景：需要在平面图或者特殊地理区域上展示数据，比如

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文件里定义的testJsonecharts.registerMap('mymap', testJson);var chart = echarts.init(document.getElementById('main'));chart.setOption(option);</script>   </body></html>

效果：

0 0