美文网首页前端开发那些事儿
vue使用Echarts4.X及5.0版本坑

vue使用Echarts4.X及5.0版本坑

作者: 华子_tm | 来源:发表于2021-01-28 15:32 被阅读0次

    之前的项目中一直用的是4.7.0及4.8.0版本的Echarts。引入的方式无非是全局引入和按需引入两种
    main.js中引入

    // 引入echarts
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts
    

    按需引入新建个myecharts.js

    // 引入 ECharts 主模块
    var echarts = require('echarts/lib/echarts')
    // 引入柱状图等
    require('echarts/lib/chart/bar')
    require('echarts/lib/chart/line')
    require('echarts/lib/chart/pie')
    // 引入提示框和标题组件
    require('echarts/lib/component/legend')
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    require('echarts/lib/component/dataZoom')
    require('echarts/lib/component/markPoint')
    require('echarts/lib/component/markLine')
    export default echarts
    

    后来,新建了个项目,由于没有装Echarts就重新cnpm install echarts -S
    写页面的时候无论如何柱状图表也出不来。对比了下原来是版本不一样,新项目装上了5.0版本。
    研究了半天才找见是版本的问题。怎么解决呢。要不降级

    # 卸载 Echarts5.0
    npm uninstall echarts
    # 规定版本来安装(选择自己喜欢的版本安装)
    npm install echarts@4.8.0 --save
     # 导入使用
    import echarts from 'echarts'
    

    要不改引入方法,因为之前的方法引入不可用了,echarts的源码变了,不再支持“从'echarts/lib/echarts'导入echarts”,改用“import*as echarts from'echarts/lib/echarts'”

    import * as echarts from 'echarts'
    

    好了。记录下自己的踩坑之旅。

    相关文章

      网友评论

        本文标题:vue使用Echarts4.X及5.0版本坑

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