VUE引用和使用echarts4/echarts5的差别
原因由于echarts5中的热力图样式和4不一样,为了少在options中修改,直接升级echarts版本,便于使用echarts5中自带样式。echarts升级卸载:npm uninstall echarts 无需声明版本安装5.0.2版本:npm install echarts@5.0.2 这里需要声明,避免下载之前重复版本echarts引用echarts4的引入是:import echart
·
原因
由于echarts5中的热力图样式和4不一样,为了少在options中修改,直接升级echarts版本,便于使用echarts5中自带样式。
echarts升级
- 卸载:
npm uninstall echarts
无需声明版本 - 安装5.0.2版本:
npm install echarts@5.0.2
这里需要声明,避免下载之前重复版本
echarts引用
echarts4的引入是:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
echarts5的引入略有不同:
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
或者是
const echarts = require('echarts/index.blank')
Vue.prototype.$echarts = echarts
echarts使用
之前的代码有一个地方报错:渐变色的使用,调用graphic.LinearGradient()方法报undefined
原代码:
import echarts from echarts
.....(省略)
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#f88311' },
{ offset: 0.7, color: '#f83600' },
{ offset: 1, color: '#f83600' }
])
}
修改为:
//无需引用echarts
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#f88311' },
{ offset: 0.7, color: '#f83600' },
{ offset: 1, color: '#f83600' }
])
}
更多推荐
已为社区贡献3条内容
所有评论(0)