Echarts3地图可视化教程

概述

ECharts是百度开源的Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

http://echarts.baidu.com/feature.html

本文介绍如何使用ECharts3来制作地图可视化展示。

 

地图+散点图+动画散点图

这个示例介绍如何制作一个在地图上标注数据点，并且能够动态显示Top数据点

示例是一个全国主要城市空气质量显示，标点出了全国主要城市的PM25值，并且针对Top5城市动画显示标点

http://echarts.baidu.com/demo.html#effectScatter-map

 

散点图

ECharts 2.x 中在地图上通过 markPoint 标记大量数据点方式在 ECharts 3 中建议通过地理坐标系上的 散点图scatter 实现。

散点图scatter的代码如下：

series : [  {      name: 'pm2.5',      type: 'scatter',      coordinateSystem: 'geo',      data: convertData(data),      symbolSize: function (val) {          return val[2] / 10;      },      label: {          normal: {              formatter: '{b}',              position: 'right',              show: false          },          emphasis: {              show: true          }      },      itemStyle: {          normal: {              color: '#ddb926'          }      }  } ]

• series[i]-scatter.name: 名称。
• series[i]-scatter.type: 类型，声明是散点图scatter。
• series[i]-scatter.coordinateSystem：使用的坐标系，geo表示使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
• series[i]-scatter.data[i]：数据内容
• series[i]-scatter.symbolSize：标记的大小，这里使用回调函数，根据数据点的数据来设置图形大小
• series[i]-scatter.label：图形上的文本标签
• series[i]-scatter.itemStyle ：图形样式

scatter属性详情参考：http://echarts.baidu.com/option.html#series-scatter

地图

散点图scatter使用geo坐标系，geo的代码如下：

geo: {        map: 'china',        label: {            emphasis: {                show: false            }        },        roam: true,        itemStyle: {            normal: {                areaColor: '#323c48',                borderColor: '#111'            },            emphasis: {                areaColor: '#2a333d'            }        }    }

• geo.map:地图类型, china:中国地图,world:世界地图
• geo.roam:是否开启鼠标缩放和平移漫游

geo属性详情参考http://echarts.baidu.com/option.html#geo

 

GeoJSON参考http://blog.csdn.net/yaoxiaochuang/article/details/53117379

动画散点图

动画散点图是利用动画特效可以将某些想要突出的数据进行视觉突出，即带有涟漪特效动画的散点图

示例中是突出显示TOP5城市，代码：

series : [        {            name: 'Top 5',            type: 'effectScatter',            coordinateSystem: 'geo',            data: convertData(data.sort(function (a, b) {                return b.value - a.value;            }).slice(0, 6)),            symbolSize: function (val) {                return val[2] / 10;            },            showEffectOn: 'render',            rippleEffect: {                brushType: 'stroke'            },            hoverAnimation: true,            label: {                normal: {                    formatter: '{b}',                    position: 'right',                    show: true                }            },            itemStyle: {                normal: {                    color: '#f4e925',                    shadowBlur: 10,                    shadowColor: '#333'                }            },            zlevel: 1        }    ]

• series[i]-effectScatter.showEffectOn:何时显示特效,'render' 绘制完成后显示特效。

• series[i]-effectScatter.rippleEffect:涟漪特效相关配置

effectScatter属性详情参考http://echarts.baidu.com/option.html#series-effectScatter

 

百度地图

Echarts和百度地图原生集成，示例http://echarts.baidu.com/demo.html#map-polygon

 

百度地图bmap代码：

bmap: {        center: [104.114129, 37.550339],        zoom: 5,        roam: true,        mapStyle: {            styleJson: [                    {                        "featureType": "water",                        "elementType": "all",                        "stylers": {                            "color": "#044161"                        }                    },                    {                        "featureType": "land",                        "elementType": "all",                        "stylers": {                            "color": "#004981"                        }                    },                    {                        "featureType": "boundary",                        "elementType": "geometry",                        "stylers": {                            "color": "#064f85"                        }                    },                    {                        "featureType": "railway",                        "elementType": "all",                        "stylers": {                            "visibility": "off"                        }                    },                    {                        "featureType": "highway",                        "elementType": "geometry",                        "stylers": {                            "color": "#004981"                        }                    },                    {                        "featureType": "highway",                        "elementType": "geometry.fill",                        "stylers": {                            "color": "#005b96",                            "lightness": 1                        }                    },                    {                        "featureType": "highway",                        "elementType": "labels",                        "stylers": {                            "visibility": "off"                        }                    },                    {                        "featureType": "arterial",                        "elementType": "geometry",                        "stylers": {                            "color": "#004981"                        }                    },                    {                        "featureType": "arterial",                        "elementType": "geometry.fill",                        "stylers": {                            "color": "#00508b"                        }                    },                    {                        "featureType": "poi",                        "elementType": "all",                        "stylers": {                            "visibility": "off"                        }                    },                    {                        "featureType": "green",                        "elementType": "all",                        "stylers": {                            "color": "#056197",                            "visibility": "off"                        }                    },                    {                        "featureType": "subway",                        "elementType": "all",                        "stylers": {                            "visibility": "off"                        }                    },                    {                        "featureType": "manmade",                        "elementType": "all",                        "stylers": {                            "visibility": "off"                        }                    },                    {                        "featureType": "local",                        "elementType": "all",                        "stylers": {                            "visibility": "off"                        }                    },                    {                        "featureType": "arterial",                        "elementType": "labels",                        "stylers": {                            "visibility": "off"                        }                    },                    {                        "featureType": "boundary",                        "elementType": "geometry.fill",                        "stylers": {                            "color": "#029fd4"                        }                    },                    {                        "featureType": "building",                        "elementType": "all",                        "stylers": {                            "color": "#1a5787"                        }                    },                    {                        "featureType": "label",                        "elementType": "all",                        "stylers": {                            "visibility": "off"                        }                    }            ]        }    }

• bmap.center:当前视角的中心点
• bmap.zoom:当前视角的缩放比例
• bmap.mapStyle: 百度地图样式，styleJson 与百度地图内置的样式配置一致，具体参考百度地图API开发指南中 定制个性地图章节的介绍。

百度地图设置都可以通过 百度地图提供的API 实现

获取百度地图实例的方法如下：

var bmap = bmapCharts.getModel().getComponent('bmap').getBMap(); // 百度地图实例

例如，我们可以为地图添加一个缩放控件和一个比例尺：

bmap.addControl(new BMap.NavigationControl()); // 缩放控件 bmap.addControl(new BMap.ScaleControl()); // 比例尺

参考http://efe.baidu.com/blog/echarts-map-tutorial-2/

去除百度地图logo的方法，加上如下css：

 .anchorBL {  

    display: none;  

 }