Echarts中引入中国地图

摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方。

思考:1、迁徙图实现的第一步是引入中国地图,那如何引入中国地图呢?

           2、地图引入后在实现迁徙图的相关动效(这个会在接下来的文章中总结,今天先总结下如何在Echarts中引入中国地图)

实现:

一、下载echarts.js以及china.js文件

1、echarts.js文件下载地址:百度云提取码:cpt0

2、china.js文件下载地址:百度云提取码:jbc3(如果失效了请与我联系)

二、开始我们的代码之旅啦

1、引入 ECharts以及china.js

Echarts中引入中国地图_第1张图片

2、在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。





    
    echarts中国地图
    



     
    

 运行后的效果如下:(给地图的容器一个深色背景颜色)Echarts中引入中国地图_第2张图片

3、写相关配置(下面是完整的代码,并且还有相关的备注,大家可以自己调整修改成自己想要的颜色)





    
    echarts中国地图
    



    
    

运行后的结果如图:

Echarts中引入中国地图_第3张图片

这样地图就引入成功啦

你可能感兴趣的:(Echarts,Echarts,map)