Echarts地图展示及属性分析

Echarts，一个效果非常棒的可视化库，可以生产各种图表，动态展示，附上官方网址：http://www.echartsjs.com/index.html

之前带本科实习时有同学用过，狗哥的博客也用这个展示他的旅游足迹，所以在这次山西项目里我也拿来试了一下。类似于echarts这种库，最好的学习方法就是按照官网的demo来做，所以我先找了一个符合我要求的demo将其实现，然后再分别掌握其中的重要属性，最后按照自己的需求进行改动。

一、地图展示

我看的主要是以下两种：都在series里，位置在侧栏标出来了

二、属性设置

属性是以键值对的形式调用的，大部分都很简单，和样式有关，一看就知道是干什么的，需要重点关注的是以下几个：

tooltip：浮动提示框组件

legend：图例

series：系列列表，每个系列通过type决定自己的图表类型

其中，series里的label和tooltrip中都含有formatter属性，这两个是调整地图所展示的点信息的关键，一定要理清楚formatter属性中的参数含义 ，具体参见官方文档的详细介绍。注意分清 系列名 / 数据名 / 数据值 这三者对应的内容

这是我调整之后的效果：左边是label，右边是tooltip，其他的内容写在代码的注释里了，可以往下看

有不会的一定记得查阅官方文档，里面有不同属性非常详细的介绍

内容我已经上传到github了，欢迎大家查看和下载，觉得不错的话可以关注我~

地址：https://github.com/santana2000/sxWebGIS/tree/master/poi

三、代码实现

varmyChart = echarts.init(document.getElementById(‘sxmap’));// 注意引入版本// 注意不同版本使用差别vardata = [//元素为对象的数组{name: ‘长治’, value: 41},

{name: '大同', value: 58},

{name: '临汾', value: 47},

{name: '太原', value: 39},

{name: '阳泉', value: 31},

{name: '晋城', value: 70},

{name: '平遥', value: 20},

{name: '吕梁', value: 10},

];vargeoCoordMap = {//对象'阳泉':[113.57,37.85],

'大同':[113.3,40.12],

'长治':[113.08,36.18],

'临汾':[111.5,36.08],

'太原':[112.53,37.87],

'晋城':[112.43,36.87],

'平遥':[112.03,37.37],

'吕梁':[112.53,37.37],

}varconvertData =function (data) {

varres = [];

for(vari = 0; i < data.length; i++) {

    vargeoCoord = geoCoordMap[data[i].name];

    if (geoCoord) {

        res.push({

            name: data[i].name,

            value: geoCoord.concat(data[i].value)  //新值= 坐标+旧值；            });

    }

}

returnres;// [113.57, 37.85, 31]};

option = {

backgroundColor: '#404a59',

title: {

    text: '矿山灾害点危险性展示',

    left: 'center',

    textStyle: {

        color: '#fff',

        fontSize:25        }

},

tooltip: {          //提示框组件trigger: 'item',

    formatter:'{b} 

',//{c@[2]}show:false },

legend: {            //图例orient: 'vertical',

    y: 'bottom',

    x: 'right',

    data: ['危害性'],

    textStyle: {

        color: '#fff'        }

},

geo: {

    map: "china",

    label: {

        emphasis: {

            show: false            }

    },

    roam: true,

    center:[112.38,37.67],

    zoom:7,

    itemStyle: {

        normal: {

            areaColor: "#323c48",

            borderColor: "#000000"            },

        emphasis: {

            areaColor: "#2a333d"            }

    }

},

series: [{

    name: '危险指数：',

    type: 'effectScatter',

    coordinateSystem: 'geo',

    data: convertData(data.sort(function (a, b) {

        returnb.value - a.value;

    }).slice(0, 8)),//选取从 start 到数组结尾的所有元素，该方法并不会修改数组，而是返回一个子数组symbolSize:function (val) {

        returnval[2] / 2;//res数组中的第三个元素        },

    showEffectOn: 'render',

    rippleEffect: {

        brushType: 'stroke'        },

    hoverAnimation: true,

    label: {

        normal: {

            formatter: '{b}:{@2}',

            position: 'right',

            show: false            },

        emphasis: {

            show: true            }

    },

    itemStyle: {

        normal: {

            color: '#f4e925',

            shadowBlur: 10,

            shadowColor: '#333'            }

    },

    zlevel: 1    }

]

};

myChart.setOption(option);/*a(); 执行一次绘制地图

$(window).resize(function() { 窗口缩放一次

map.resize();              地图画布缩放一次

a()                        地图再绘制一次

*/

最后说两个要注意的点：

1. 看清楚当前的版本，现在更新到了4.x，有一些属性在之前的版本上做了改动

2. 引用时注意版本，可以看到bootcdn里可选的很多，自己测试时建议选完整版的