VUE引用和使用echarts4/echarts5的差别

原因

由于echarts5中的热力图样式和4不一样，为了少在options中修改，直接升级echarts版本，便于使用echarts5中自带样式。

echarts升级

1. 卸载：npm uninstall echarts 无需声明版本
2. 安装5.0.2版本：npm install [email protected] 这里需要声明，避免下载之前重复版本

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' }
])
}