项目中需要统计访问量,做一个折线图展示,使用 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 的引入方式,页面的折线图展示出来了。
感谢前端小姐姐的鼎力支持!

Logo

前往低代码交流专区

更多推荐