概述
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[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的代码如下:
|