echarts中的地图实战记录（一）

    最近公司需要一个展示广西省的各地节点的危险事件分布图，作为大屏幕投影的首页展示。按照公司惯例使用echarts来实现,不多说直接上代码：

<!-- 为ECharts准备一个具备大小（宽高）的Dom  广西地图-->           <div id="main1" style="min-height:460px; width:100%"></div>

然后就是echarts的js调用方法：

// 基于准备好的dom，初始化echarts图表   var myChart = echarts.init(document.getElementById('main1'));          var geoCoordMap;function convertData(data) {   var res = [];   for (var i = 0; i < data.length; i++) {       var geoCoord = geoCoordMap[data[i].name];       if (geoCoord) {           res.push({               name: data[i].name,               value: geoCoord.concat(data[i].value)           });       }   }   return res;}function randomValue() {    return Math.round(Math.random()*1000);}      $.get('js/build/dist/guangxi.json', function (geoJson) {     echarts.registerMap('guangxi', geoJson); $.ajax({           type: "post",        url:'/xxx.do?parm=parm',         data:{},        dataType: "json",        cache: false,        beforeSend: function () {            },        success:function(result) {                       var data1 = result.series[0].mydata1;vardata2 = result.series[0].mydata2;vardata3 = result.series[0].mydata3;geoCoordMap = {   '中调':[108.45,22.98],'柳州':[108.45,23.98]   };    myChart.setOption(option11 = {        title: {        text : '广西省地图展示分布情况', textStyle : {            color: '#fff'        }    },            tooltip: {              trigger: 'item',              formatter: function(params) {                  var res = params.name+'<br/>';                  var myseries = option11.series;                  for (var i = 0; i < myseries.length; i++) {                      for(var j=0;j<myseries[i].data.length;j++){                                            if(myseries[i].data[j].name==params.name){                          if(myseries[i].type == 'scatter'){                        res+=myseries[i].name +' : '+myseries[i].data[j].value[2]+'</br>';                        }else{                            res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';                              }                        }                      }                  }                  return res;              }          },        toolbox: {            show: true,            orient: 'vertical',            left: 'right',            top: 'center',            feature: {                dataView: {readOnly: false},                restore: {},                saveAsImage: {}            }        },        dataRange: {        min: 0,        max: 20000,        color:['orange','grey'],        text:['高','低'],           // 文本，默认为数值文本textStyle : {            color: '#fff'        },        calculable : true    },        geo: {            map: 'guangxi',            roam: true,            label: {                normal: {                    show: true,                    textStyle: {                        color: 'rgba(0,0,0,0.4)'                    }                }            },            itemStyle: {                normal:{                    borderColor: 'rgba(0, 0, 0, 0.2)'                },                emphasis:{                    areaColor: null,                    shadowOffsetX: 0,                    shadowOffsetY: 0,                    shadowBlur: 20,                    borderWidth: 0,                    shadowColor: 'rgba(0, 0, 0, 0.5)'                }            }        },        series: [            {            name: '高 ',                type: 'scatter',           coordinateSystem: 'geo',           data: convertData(data1),           symbolSize: 20,           symbol: 'pin',           symbolRotate: 35,           label: {               normal: {                   formatter: '{b}',                   position: 'right',                   show: false               },               emphasis: {                   show: true               }           },           itemStyle: {               normal: {                     areaStyle:{color:'green'} ,  //设置地图背景色的颜色设置                           color:'rgba(0, 0, 0, 0.2)'               }           }            },            {            name: '中 ',                type: 'scatter',           coordinateSystem: 'geo',           data: convertData(data2),           symbolSize: 20,           symbol: 'pin',           symbolRotate: 35,           label: {               normal: {                   formatter: '{b}',                   position: 'right',                   show: false               },               emphasis: {                   show: true               }           },           itemStyle: {               normal: {                     areaStyle:{color:'green'}   //设置地图背景色的颜色设置                                             ,color:'rgba(255,0,255,0.8)'               }           }            },            {            name: '低 ',                type: 'scatter',           coordinateSystem: 'geo',           data: convertData(data3),           symbolSize: 20,           symbol: 'pin',           symbolRotate: 35,           label: {               normal: {                   formatter: '{b}',                   position: 'right',                   show: false               },               emphasis: {                   show: true               }           },           itemStyle: {               normal: {                     areaStyle:{color:'green'}   //设置地图背景色的颜色设置                                             ,color:'rgba(255,0,255,0.8)'               }           }            },            {            name: '高',            type: 'map',            geoIndex: 0,            // tooltip: {show: false},            label: {               normal: {                   formatter: '{b}',                   position: 'right',                   show: false               },               emphasis: {                   show: true               }           },           itemStyle: {               normal: {                    color: '#F06C00'               }           },            data:result.series[0].mydata4        },{            name: '中',            type: 'map',            geoIndex: 0,            // tooltip: {show: false},            label: {               normal: {                   formatter: '{b}',                   position: 'right',                   show: false               },               emphasis: {                   show: true               }           },           itemStyle: {               normal: {                    color: '#F06C00'               }           },            data:result.series[0].mydata5        },{            name: '低',            type: 'map',            geoIndex: 0,            // tooltip: {show: false},            label: {               normal: {                   formatter: '{b}',                   position: 'right',                   show: false               },               emphasis: {                   show: true               }           },           itemStyle: {               normal: {                    color: '#F06C00'               }           },            data:result.series[0].mydata6        }        ]    });        },           error: function (msg) {                //alert(" 数据加载失败！" + msg);            } });});            

然后是实现的结果：

其中的小气泡部分是有数据信息的，如图

属于南宁市的数据，南宁市也会有数据提示：

以上就是最终的实现效果了。

这么看肯定不清楚具体细节是如何，各位客官可以先根据效果看是不是自己想要的展现形式，再参考展现的细节设计。js部分大概分一下几步：

1.下载echarts的广西省地图；

2.加载广西地图，由于是实战，异步从后台获取数据，并且给市级塞入“高”、“中”、“低”分类数据；

3.增加广西市内的“中调”节点，并且塞入中调的“高”、“中”、“低”分类数据；

4.展示鼠标滑动时，想要的各地分类数据效果。

详细代码分解：

1.下载广西地图。

这个直接从echarts的官网下载就好，我下载的是json格式的地图。调用上这样写：

先初始化留给echarts的div。var myChart = echarts.init(document.getElementById('main1'));

$.get('js/build/dist/guangxi.json', function (geoJson) {     echarts.registerMap('guangxi', geoJson);

这一步就是加载自己所需的地图json数据。

2.加载广西地图。

第一步广西地图加载上之后，由于是实战，所以往往需要从后台数据库读取一些组装好的数据到地图，所以我们用到了ajax调用的方式

$.ajax({           type: "post",        url:'/xxx.do?parm=parm',         data:{},        dataType: "json",        cache: false,        beforeSend: function () {            },        success:function(result) {        //        //此处编写echars给option赋值的代码。                       myChart.setOption(option11 = {                            title: {                    text : '广西省地图展示高危事件分布情况',    textStyle : {                         color: '#fff'                    }                   }                       });               },               error: function (msg) {                //alert(" 数据加载失败！" + msg);                   }   });

        option里面的series的值就参考文章开始部分的代码，细心的观众会发现，series里关于“高”、“中”、“低”的类型有2个，重复了一次。其实这个不是重复，一组高中低是用于给地图的市所属的数据展示、另一组高中低是给市内的节点的高中低展示。

3.增加市内的子节点。

geoCoordMap = {   '中调':[108.45,22.98],'柳州':[108.45,23.98]   };

需要在option之前定义好市内的子节点的gps位置，数值可以自行修改，然后再在series里的高中低部分增加子节点的数据，这样echarts地图就可以自己加载上子节点的数据

{            name: '高 ',                type: 'scatter',           coordinateSystem: 'geo',           data: convertData(data1),           symbolSize: 20,           symbol: 'pin',           symbolRotate: 35,           label: {               normal: {                   formatter: '{b}',                   position: 'right',                   show: false               },               emphasis: {                   show: true               }           },           itemStyle: {               normal: {                     areaStyle:{color:'green'} ,  //设置地图背景色的颜色设置                           color:'rgba(0, 0, 0, 0.2)'               }           }            },

其中

 type: 'scatter',

 symbol: 'pin',

这两个很重要，一个告诉echarts这是个地图内点的标注，一个告诉echarts展示时，这个点的效果是冒泡的形式，这个属性还有很多种类型，比如star，还可以自定义展现图案，此处就不详细介绍了。

4.展示鼠标滑动的效果。

到此，市的数据和市内节点的数据都有了，鼠标滑动到此的时候如何展示呢，我们想要实现效果图3的那种效果，所以就要编辑下formatter这个属性：

位于option的tooltip属性内，编写方式如下：

formatter: function(params) {                  var res = params.name+'<br/>';                  var myseries = option11.series;                  for (var i = 0; i < myseries.length; i++) {                      for(var j=0;j<myseries[i].data.length;j++){                                            if(myseries[i].data[j].name==params.name){                          if(myseries[i].type == 'scatter'){                        res+=myseries[i].name +' : '+myseries[i].data[j].value[2]+'</br>';                        }else{                            res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';                              }                        }                      }                  }                  return res;              }

这个方法是等option的数据加载之后，重新获取option的series的值，进而取到各自高中低的数据，然后利用js编写逻辑取到想要的数据，此方法是网上的一个方法修改而来，有个小插曲，echarts默认的市内节点的值会拼接成一个数组['1','2','3'],这样，1、2代表gps位置，3代表具体高中低的数值，我们给高中低各自初始化了数值，但echarts展示value的时候就是直接把数组全部展示，无法单独获取3的值，只好写一个逻辑再从数组里取值。

到此基本可以满足项目的需要，具体细节还有很多，echarts官网的实例里没有一个这样组合好的实例，所以就发一个文章，以此记录下echarts此类地图的使用方法。