echarts 报错: ‘xxx‘ hierarchy in label has been removed since 4.0. All xx properties are configured ..

本文介绍: echarts 报错 ‘xx ‘ h ie r arc h y in label ha s been r emo v e d s inc e 4.0. All xx properties a re configured in label directly now. 的解决方案

项目 场景：

在 Vue3 + TS 的项目当中使用 echarts 图表,用的是水球图 liquidFill
之前写过一篇关于水球图在 Vue3 +TS 中的使用的文章 vue3+ts 之echarts 水球图 liquidFill 的使用
在这里插入图片描述

问题 描述

其中对于水球中间百分比字体样式做了设置,运行效果展示没有问题,但是这里再控制台上报了 warn
报错 :
DEPRECATED: 'normal' hierarchy in label has been removed since 4.0. All style properties are configured in label directly now.
DEPRECATED: textStyle hierarchy in label has been removed since 4.0. All textStyle properties are configured in label directly now.

在这里插入图片描述

原因 分析：

警告翻译过来是 normal 以及 text style 配置项已经在 4.0 被弃用了,这里是过时的警告

解决方案：

label 中的配置项修改前 :

          label: {
            //水球图里面的文字喝字体等设置
            normal: {
              formatter: function (value) {
                if (!value) {
                  return '加载中';
                } else {
                  return props.rate * 100 + '%';
                }
              },
              textStyle: {
                fontSize: 22,
              },
            },
          },

lab el 中的配置项修改后 :

          label: {
            //水球图里面的文字喝字体等设置
            formatter: function (value):string {
              if (!value) {
                return '加载中';
              } else {
                return props.rate * 100 + '%';
              }
            },
            fontSize: 22,
          },