vue引入echarts升级5.0后,控制台提示问题

6,324 阅读1分钟

需求:仪表盘样式无法自定义,需要提供自定义功能

问题:echarts版本过低,本地用得4.8,需要升级到最新5.2

解决方案:升级echarts版本

升级后导致两个问题

  1. 中国地图和省份地图依赖包不再提供,需要自己下载并注入
  2. echarts废弃了一些用法,例如normal提示,不会报错,但是控制台会有提示

解决问题1:

blog.csdn.net/bazcsx/arti…

解决问题2:

  1. 出现:'normal' hierarchy in itemStyle has been removed since 4.0. All style properties are configured in itemStyle directly now
删除normal对象层
修改前:
 itemStyle: {
  normal: {
    borderRadius: 7,
    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: '#3977E6' },
      { offset: 1, color: '#37BBF8' },
    ]),
  },
},

修改后:
 itemStyle: {
  borderRadius: 7,
  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: '#3977E6' },
    { offset: 1, color: '#37BBF8' },
  ]),
},
  1. 出现: itemStyle.normal.label is deprecated, use label instead
删除itemStyle下的label,合并到label
修改前:
itemStyle: {
  normal: {
    label: {
      show: true,
      textStyle: { color: '#fff', fontSize: '16' },
    }, // 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。可以与itemStyle属性同级,具体看文档
  }, // 基本样式
},

修改后:
label: {
  show: true,
  color: '#fff',
  fontSize: '16',
},
  1. 出现:name property in radar component has been changed to axisName
将name 替换为 axisName
修改前:
name: {
  color: '#666',
},

修改后:
axisName: {
  color: '#666',
},
  1. 出现:textStyle hierarchy in axisLabel has been removed since 4.0. All textStyle properties are configured in axisLabel directly now.
删除 textStyle这层对象,将对象里的代码提出来
修改前:
label: {
  normal: {
    show: true,
    textStyle: {
      color: 'rgba(255,255,255,0.67)',
    },
  },
},

修改后:
label: {
   show: true,
    color: 'rgba(255,255,255,0.67)',
}