如何在 echarts 中实现环形图中间的样式自定义

实现效果如图：

主要 series 中的配置：

series: [{
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true,
              formatter: function(params){
                return "{name|" + params.name +"}"+"\n"+"{unit|"+params.data.rate+"}"
              },
              textStyle: {	// 设置样式
                rich: {
                  name: {
                    fontSize: 18,
                    // color: '#ffffff',
                    fontWeight: 'bold',
                  },
                  unit: {
                    fontSize: 14,
                    color: '#ffffff'
                  }
                }
              }
            }
          }
        }]

点击事件给与一个默认高亮，并且点击可以切换

drawCharts(){
      this.charts = this.$echarts.init(this.$refs.chart);
      const option = this.chartDataNew;
      this.charts.setOption(option, true);
      window.addEventListener("resize", this.charts.resize);
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("resize", this.charts.resize);
      });

      // 默认选中第一项
      this.charts.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0 // 这里设置为0，表示默认选中第一项
      });
      let myChart = this.charts;
      myChart.on('mousemove', function (params) {
        // 根据点击的扇区更新中间文字
        if (params.componentType === 'series') {
            let newOption = myChart.getOption();
            // 更新 graphic 中的文字内容
            newOption.graphic[0].style = {
               text: `${params.name} - ${params.value}`,
                textAlign: 'center',
                fill: '#fff', // 文字颜色
                fontSize: 20
            };
            
            // 取消之前选中的扇形
            if (newOption.series[0].selectedDataIndex !== params.dataIndex) {
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: newOption.series[0].selectedDataIndex
                });
            }

            // 选中当前点击的扇形
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: params.dataIndex
            });

            // 更新选中的扇形索引
            newOption.series[0].selectedDataIndex = params.dataIndex;

            myChart.setOption(newOption);
        }
    });