vue使用Echarts4.X及5.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'

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容