2021-03-19-echarts5导入失败原因
项目中需要统计访问量,做一个折线图展示,使用 apache 的echarts图表类库,网上普遍流传的是 echarts4 的使用方式,提到的引入方式如下:1,首先在 npm 里面安装npm install echarts --save2,在mian.js中引入import Echarts from 'echarts'Vue.prototype.echarts = EchartsVue.use(Ec
·
项目中需要统计访问量,做一个折线图展示,使用 apache 的echarts图表类库,网上普遍流传的是 echarts4 的使用方式,提到的引入方式如下:
1,首先在 npm 里面安装
npm install echarts --save
2,在mian.js中引入
import Echarts from 'echarts'
Vue.prototype.echarts = Echarts
Vue.use(Echarts)
3,在 js 中使用
let myChart = this.$echarts.init(document.getElementById('myChart'))
按照网上的 4.x 版本的安装教程,页面刷新的时候提示 null 对象没有 init 方法,表明 $echarts 没有引入进来。
后请教前端小姐姐,小姐姐经过一顿操作猛如虎,最终找到问题原因,官方说明如下:
引用 ECharts
去除 default exports 的支持
如果使用者在 v4 中这样引用了 echarts:
import echarts from 'echarts';
// 或者按需引入
import echarts from 'echarts/lib/echarts';
这两种方式,v5 中不再支持了。
使用者需要如下更改代码解决这个问题:
import * as echarts from 'echarts';
// 按需引入
import * as echarts from 'echarts/lib/echarts';
按照官方教程,使用 v5 的引入方式,页面的折线图展示出来了。
感谢前端小姐姐的鼎力支持!
更多推荐
已为社区贡献1条内容
所有评论(0)