<template>
  <div class="box">
    <div id="main" class="echsty"></div>
  </div>
</template>
<script>
import * as ECharts from "echarts";
export default {
  data() {
    return {
      Mydata: [
        { value: 500, name: "测试用1" },
        { value: 400, name: "测试用2" },
        { value: 300, name: "测试用3" },
        { value: 200, name: "测试用4" },
        { value: 100, name: "测试用5" },
        { value: 600, name: "测试用6" }
      ]
    };
  },
  mounted() {
    // window.addEventListener("resize", () => {
    //   const myChart = this.ECharts.init(document.getElementById("main"));
    //   myChart.resize();
    // });
    this.$nextTick(function() {
      this.drawPie("main");
    });
  },
  methods: {
    //饼状图开始------------------------------------------------------------
    drawPie(id) {
      var PieCase = ECharts.init(document.getElementById(id));
      PieCase.off("click"); //解决重复点击问题
      PieCase.setOption({
        title: {
          text: "",
          subtext: "",
          left: "center"
        },
        gird: {
          top: "10%"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: "0",
          top: "center",
          formatter: params => {
            var TotalValue = 0;
            var TarValue;
            for (let i = 0; i < this.Mydata.length; i++) {
              // 计算总的value数值
              //用Number()的原因是如果传进来的数组是{value："111",name:"////"}这种，这个时候value的值类型是字符串类型，无法进行加法运算
              //所以用Number()来以防万一
              TotalValue += Number(this.Mydata[i].value);
              // 判断
              if (this.Mydata[i].name == params) {
                TarValue = Number(this.Mydata[i].value);
              }
            }
            // 计算百分比,判断总值是否为0，如果为0，则当前所有name的占比都为0，反之则进行数学计算
            // 如果不进行处理的话,当碰到总数为0的数组的时候,会出现Nan报错
            var Percentage =
              TotalValue == 0
                ? 0
                : Math.round((TarValue / TotalValue) * 10000) / 100.0;

            return params + ":" + TarValue + "(" + Percentage + "%" + ")";
          }
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["40%", "50%"],
            selectedMode: "single",
            data: this.Mydata
          }
        ]
      });
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
}
.echsty {
  width: 548px;
  height: 247px;
  position: absolute;
}
</style>

　　效果如下（样式根据自己的实际情况修改）：