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

项目场景：

在 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 以及 textstyle 配置项已经在 4.0 被弃用了,这里是过时的警告

解决方案：

label 中的配置项修改前 :

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

label 中的配置项修改后 :

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