vue中使用echart的map

作者: exmexm | 来源:发表于2018-05-03 13:25 被阅读361次

    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绘制地图该教程,可以完成地图的显示了。

    相关文章

      网友评论

      本文标题:vue中使用echart的map

      本文链接:https://www.haomeiwen.com/subject/gfvkrftx.html