博客

原因

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

使用echarts5中自带样式

。

echarts升级

1. 卸载：
   
npm uninstall echarts

   无需声明版本
2. 安装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' }
])
}