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: {