echarts饼图 mouseover中间部分文字样式设置，默认显示总和

需求描述

需求要求利用echarts的饼图对企业数量进行统计，要求 默认饼图中间 显示全部 企业数量，鼠标移动上去，则显示对应部分的企业数量，并且设置样式。

效果图

具体代码

let TrendCharts = this.$echarts.init(
        document.getElementById("trendChart1")
      );

  var options = {
    //设置主副标题
    title: {
      show: true,
      text: "企业数量", //主标题
      subtext: this.totalNum, //副标题：企业数量值，此处用标题方式来显示
      left: "center",
      top: "40%", 
      z: 0,
      zlevel: 100,
      textStyle: { //设置主标题的 样式
        textAlign: "center",
        color: "rgba(145,213,255,0.85)",
        fontSize: 14
      },
      subtextStyle: { //设置副标题的样式
        textAlign: "center",
        color: "#fff",
        fontSize: 30,
        fontWeight: 600
      }
    },

    tooltip: {
      show: false, //需要关闭默认的鼠标悬浮显示样式
    },
    //图例
    legend: {
      show: false
    },
    //设置图表撑满整个画布
    grid: {
      left: "0%",
      right: "0%",
      bottom: "0%",
      containLabel: true
    },

    series: [
      {
        name: "企业数量",
        type: "pie",
        //自定义颜色
        color: this.pieColor,
        radius: ["60%", "90%"], //饼图大小
        avoidLabelOverlap: false,
        legendHoverLink: false, //移入leged不显示在中间
        textAlign: "center",

        label: {
          normal: {
            show: true,
            position: "center", //文字显示在中间
            align: "center", 
            verticalAlign: "middle",
            textStyle: {
              //设置文字样式
              fontSize: "0"
            }
          },
          emphasis: {
            show: true, //文字至于中间时，这里需为true
            textStyle: {
              //设置文字样式
              fontSize: "14",
              color: "rgba(145,213,255,0.85)"
            },
            formatter: function({ data }) {
            	//此处重点，其中定义的 b,c,d 是用于下面的 rich来单独设置样式，因为这里不支持 HTML标签
              let html = `{b| ${data.name}} \n {c|${data.value}}  {d|${data.percent}}`;
              return html;
            },
            //样式设置
            rich: {
              b: {
                //name 文字样式
                lineHeight: 20,
                fontSize: 14,
                textAlign: "center",
                color: "rgba(145,213,255,0.85)"
              },
              c: {
                //value 文字样式
                lineHeight: 36,
                color: "#fff",
                fontSize: 30,
                fontWeight: 600
              },
              d: {
                //百分比样式
                fontSize: 12,
                color: "rgba(145,213,255,0.85)"
              }
            }
          }
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: "#2E3E62"
        },
        labelLine: {
          show: false
        },
        data: this.pieData
      }
    ]
  };

  TrendCharts.showLoading({
    text: "加载中",
    color: "rgba(145,213,255,0.85)", //设置转圈圈字体颜色
    textColor: "rgba(145,213,255,0.85)", //设置文字字体颜色
    maskColor: "rgba(36, 102, 175, 0.05)",
    zlevel: 0
  });

  TrendCharts.setOption(options);
  TrendCharts.hideLoading();

  // 自动渲染echarts
  window.addEventListener("resize", () => {
    TrendCharts.resize();
  });

  //自定义事件，当鼠标移动上是，则设置 title 不显示
  TrendCharts.on("mouseover", params => {
    TrendCharts.setOption({
      title: {
        show: false //当鼠标移动上是，则设置 title 不显示
      },
      series: {
        label: {
          emphasis: {
            rich: {
              c: {
                //获取 该区域的颜色值，为对应的企业数字体设置颜色
                color: params.color
              }
            }
          }
        }
      }
    });
  });

  //自定义事件
  TrendCharts.on("mouseout", params => {
    TrendCharts.setOption({
      title: {
        show: true  //当鼠标移出 饼图区域时，则打开 title显示
      }
    });
  });