vuex + echarts实现子母饼状图

 mounted() {
    this.myChart = this.$echarts.init(document.getElementById(this.domId));
    this.getChartsMsg();
  },

methods: {
    //初始化图
    initEcharts(data) {
      var option;
      option = {
        legend: { type: "scroll", top: 20 },
        tooltip: { trigger: "item" },
        dataset: {
          source: data,
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            center: ["25%", "50%"],
            label: {
              show: true,
              position: "inside",
              formatter: "{b}:({d}%)",
            },
            startAngle: 45, // 起始角度 45
            clockwise: false, // 逆时针
            markLine: {
              lineStyle: {
                type: "solid",
                color: "#BFBFBF",
              },
              symbol: "none",
              data: this.addOtherData(data, 3),
            },
          },
          {
            type: "pie",
            radius: "30%",
            center: ["75%", "50%"],
            encode: {
              itemName: "product",
              value: "2016",
            },
            label: {
              show: true,
              position: "inside",
              formatter: "{b}:({d}%)",
            },
          },
        ],
      };
      this.myChart.on("click", (params) => {
        this.getOnlyEcharts(params.data);
      });
      this.myChart.setOption(option);
    },
    //请求数据
    getChartsMsg() {
      let source = [
        ["项目", "2021", "2022"],
        ["块1", 415.3],
        ["块2", 214.4],
        ["块3", 816.4],
        ["块4", 11.4],
        ["块5", 32.45],
        ["块块1", 1022],
        ["块块2", 1012.8],
        ["块块3", 1013.8],
      ];
      setTimeout(() => {
        this.initEcharts(source);
      }, 0);
    },
    // 获取表标线 对应点坐标
    getMarkLineData(percent) {
      // 1.获取画布 width,height
      let height = this.myChart.getHeight();
      let width = this.myChart.getWidth();

      // 2.  根据 series[0].center 获取圆心坐标
      let x0 = width * 0.25; // 圆心x轴坐标

      //3.圆边上点坐标
      // let x1   =   x0   +   r   *   cos(ao   *   3.14   /180   )
      // let y1   =   y0   +   r   *   sin(ao   *   3.14   /180   )

      // “其他” 终点坐标series[0].startAngle 45
      let x1 = x0 + (height / 4) * Math.cos((45 * 3.14) / 180);
      let y1 = height * 0.5 - (height / 4) * Math.sin((45 * 3.14) / 180);

      let ao = 360 * (percent / 100); // 扇形角度

      let ao1 = 0; // 用来计算的坐标角度
      ao1 = ao <= 45 ? 45 - ao : 360 - (ao - 45);
      if (ao1 < 270 && ao1 > 45) ao1 = 270; // 角度当270用，要不样式不好看

      let x2 = 0,
        y2 = 0;
      x2 = x0 + (height / 4) * Math.cos((ao1 * 3.14) / 180);
      y2 = height * 0.5 - (height / 4) * Math.sin((ao1 * 3.14) / 180);

      return [
        [
          {
            x: x1,
            y: y1,
          },
          {
            x: "75%",
            y: "35%",
          },
        ],
        [
          {
            x: x2,
            y: y2,
          },
          {
            x: "75%",
            y: "65%",
          },
        ],
      ];
    },
    // 添加其他
    addOtherData(datasetSource, len) {
      let percent = 0;
      let sum = 0; // 总计
      datasetSource.forEach((data, rowIndex) => {
        if (rowIndex > 0) {
          // 第一行数据不算
          let count = 0;
          for (let key of data) {
            let value = isNaN(key) ? 0 : Number(key);
            if (count === 1) sum += value;
            count++;
          }
        }
      });
      let endData = datasetSource.slice(datasetSource.length - len);
      let other = ["其他"];
      for (let i = 0; i < endData.length; i++) {
        let j = 0;
        for (let key of endData[i]) {
          let value = isNaN(key) ? 0 : key;
          if (j) other[j] ? (other[j] += value) : other.push(value);
          j++;
        }
        endData[i].splice(1, 0, "");
      }
      datasetSource.push(other);
      // "其他"占比
      percent = sum ? ((other[1] / sum) * 100).toFixed(2) : 100;
      return this.getMarkLineData(percent);
    },
  },

请求数据直接调用  this.getChartsMsg()  即可