为了账号安全,请及时绑定邮箱和手机立即绑定

vue中使用echart的map

标签:
Vue.js

1.在vue中使用echart

参考:
在 webpack 中使用 ECharts
直接运行命令:
npm install echarts --save
并且在main.js文件添加下面代码,引入echart的全部组件

import echarts from 'echarts'Vue.prototype.$echarts = echarts

之后就可以在其他vue文件用this.$echarts引用echart的。

1.使用map

按照以上方式使用echart来画普通的图都可以正常画出,但是在进行模仿别人的demo时,会出现Echart not loaded的错误。
然后在网上找解决方案:
方案1
echart只显示南海
在Vue项目中使用Echarts(五): Echarts绘制地图
看过的方案基本都是说echart3.x少了china.js或者world.js。
但是显然我的是4.x.里面已经打包了map需要的js文件或者json文件。但是自己还傻乎乎地寻找。
最后,看到了这篇文章暴露echart,所以我在想是不是我全局引用了,但是china.js中没有找到echarts。就试试再次在组件中暴露一下echart。于是成功了。
即在使用的vue文件下添加:

import echarts from 'echarts/lib/echarts';import 'echarts/map/js/china.js';

按照以上,结合在Vue项目中使用Echarts(五): Echarts绘制地图该教程,可以完成地图的显示了。



作者:exmexm
链接:https://www.jianshu.com/p/a8daa0d84b97


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消