原因

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

前往低代码交流专区

更多推荐