最简单的Echarts3迁徙图实现
2017-10-09 本文已影响0人
_空指针
最近想模仿windy网站自己实现一个气流动态图,经过不懈的尝试,终于实现了在地图上描绘动态点



这几个就是需要的js文件,echarts在官网下载,中国地图和世界地图的js文件我是从echarts的github开源包里找出来的,本例只用到了世界地图。

这段配置为地图的初始化配置,之前的官方示例使用series[i]-map作为地图初始化的配置,使用echarts3的包和原来的示例代码会报一个函数不存在的错误,在这个地方折腾了好久,几乎快放弃。偶然看到官方文档的一句提示
Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 markLine 和 markPoint。如果要实现点数据或者线数据的可视化,可以使用在地理坐标系组件上的散点图和线图。
没错,介个geo就是地理坐标系的配置

这一段,就是绘制动态点的过程。series设置为lines属性,effect属性设置动画特效,data中为地理坐标经纬度的点。