笔记：echarts饼图默认中心显示文本数据 点击事件变换相应的数据功能

废话不多说直接上代码：

🚆🚆🚆 这一步显示中心默认文本 实际上就是利用title这个字段设置的

let option = {
     // 标题
        title: {
          show: true,
          top: 20,
          // 标题文本1
          text: "算法总路数",
          // 标题文本2
          subtext: this.AltotalNumber,//这里就是默认显示的数据
          // 具体放置位置
          left: "center",
          top: "center",
          z: 0,
          zlevel: 100,
          // 文本对应的样式
          textStyle: {
            textAlign: "center",
            color: "black",
            fontSize: 14
          },
          subtextStyle: {
            textAlign: "center",
            color: "black",
            fontSize: 14,
            fontWeight: 600
          }
        },
}

✈✈✈ 点击事件变换相应的数据功能

series: [
                  {
            name: "需求类型占比",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["45%", "65%"],
            // 实际上就是在series数据内部加label字段
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "{value|{c}}\n{label|{b}}",
                rich: {
                  value: {
                    padding: 5,
                    align: "center",
                    verticalAlign: "middle",
                    fontSize: 32
                  },
                  label: {
                    align: "center",
                    verticalAlign: "middle",
                    fontSize: 16
                  }
                }
              },
              // 文本数据设置
              emphasis: {
                // position: "inner",
                show: true,
                textStyle: {
                  fontSize: "10"
                }
              }
            },
            data: this.TotalData.AloData
}