vue使用Echarts4.X及5.0版本坑
2021-01-28 本文已影响0人
华子_tm
之前的项目中一直用的是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'
好了。记录下自己的踩坑之旅。