最新更新:发现echarts最新版的有百度地图作为底图的demo了,地址:http://echarts.baidu.com/examples/editor.html?c=map-polygon,可以参考这个官方的来实现最佳实践
___________________________________________________________________________________________________
很多小伙伴都来要demo源码,现在我把demo放在我的GitHub上了。
https://github.com/lixinGiting/echarts3_map_demo
希望大家能给我个star鼓励一下。效果预览 :http://htmlpreview.github.io/?https://github.com/lixinGiting/echarts3_map_demo/blob/master/index.html
___________________________________________________________________________________________________
工作需要,想通过ECharts3来制作类似于ECharts2实例中模拟迁徙地图的效果,本来认为很简单,后来发现并不好做,上网查找了相关问题,翻来覆去只有相关的问题,却没有一个合适的答案,后来费心尽力,终于做出一点成果,分享给大家。
在ECharts2中模拟迁徙地图为:点击打开链接
在ECharts3中模拟迁徙地图为:点击打开链接
发现有以下要注意的事项,首先与echarts2相比echarts3有很大的改动:第一点:ECharts2推荐模块化单文件引入;由于echarts依赖底层zrender,你需要同时下载zrender到本地。ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。
第二点:ECharts3中因为地图精度的提高,不再内置地图数据增大代码体积,你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。
如果采用echarts3官方给的地图加载方式即<script src="echarts.js"></script> <script src="map/js/china.js"></script> <script> var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map',
利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图。
最新推荐文章于 2024-08-05 05:00:00 发布