前端开发那些事儿

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'

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

上一篇下一篇

猜你喜欢

热点阅读