vue中使用echars环形图中间添加总计效果，鼠标悬浮切换

示例代码

<template>
  <div class="box">
    <div id="cate" ref="cate"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { value: 300, name: "公共区域设备" },
        { value: 350, name: "消防设备" },
        { value: 250, name: "出入口设备" },
        { value: 100, name: "防洪防漏设备" }
      ]
    };
  },
  mounted() {
    this.setCate(this.data);
  },
  methods: {
    setCate(data) {
      let myChart  = this.$echarts.init(this.$refs.cate);
      let dataName = [];
      let total = 0;
      this.data.forEach(res => {
        dataName.push(res.name);
        total += parseFloat(res.value) * 10000;
      });
      total = total / 10000;
      let option = {
        title: {
          zlevel: 0,
          text: ["{value|" + total + "}", "{name|总设备}"].join("\n"),
          rich: {
            value: {
              color: "#fff",
              fontSize: 24,
              fontWeight: "bold",
              lineHeight: 24
            },
            name: {
              color: "#fff",
              lineHeight: 24
            }
          },
          top: "center",
          left: "120",
          textAlign: "center",
          textStyle: {
            rich: {
              value: {
                color: "#fff",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 24
              },
              name: {
                color: "#fff",
                lineHeight: 24
              }
            }
          }
        },
        tooltip: {
          // 悬停指示
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        // legend: {
        //   orient: "vertical",
        //   x: "right",
        //   data: dataName,
        //   itemGap: 30,
        //   top: "middle",
        //   align: "left",
        //   icon: "circle",
        //   formatter: function(name) {
        //     return name;
        //   }
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["55%", "80%"],
            center: ["50%", "50%"],
            stillShowZeroSum: false,
            avoidLabelOverlap: false,
            zlevel: 1,
            label: {
              normal: {
                padding: [16,16,16,16],
                backgroundColor: "#061256",
                show: false,
                position: "center",
                formatter: ["{value|{c}}", "{name|{b}}"].join("\n"),
                rich: {
                  value: {
                    color: "#fff",
                    fontSize: 24,
                    fontWeight: "bold",
                    lineHeight: 24
                  },
                  name: {
                    color: "#fff",
                    lineHeight: 24
                  }
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "18",
                  fontWeight: "bold"
                }
              }
            },
            data
          }
        ],
        color: ["#410ADF", "#F42850", "#F6A93B", "#7ED321", "#282828"]
      };
      myChart .setOption(option);
    }
  }
};
</script>

<style scoped>
#cate {
  width: 4.4rem;
  height: 4.4rem;
}
</style>