Blue教你如何在vue2中将china.js与echarts结合

237 阅读1分钟

背景:

众所周知,echarts在新版本中,因版权问题,下架了china地图,对于学习过黑马的echats视频,这就显得很头疼了,既想要使用,但是因为是初学者,却不会正确使用,往往放弃了。本文结合自己的在学习中摸爬滚打,查阅资料,来为初学者铺路。

第一步:下载china.js文件

t.csdnimg.cn/XlgGa

从这篇文章中我们下载好china.js文件

第二步:将文件cv进你的vue项目的public下

​编辑

如图:

第三步:下载echarts

npm install echarts --save

第四步:设置echarts全局变量

我们找到main.js,然后将下面代码copy进去

//引入echarts
import * as echarts from 'echarts'
//vue全局注入echarts
Vue.prototype.$echarts = echarts;

第五步:在需要使用地图的模块中导入以下语句

import chinaMap from "/public/map/json/china.json"
import * as echarts from 'echarts'
echarts.registerMap('china', chinaMap);

结语:

感谢各位的观看,在这里Blue向各位致谢