echarts饼图

data() {
    return {
      PartyActivity: "",
      imgsrc: require("../../../../assets/images/nodata.png")
    };
  }
PartyActivityPie() {
      if (this.PartyActivity.length > 0) {
        let series = [];
        let legendData = [];
        let total;
        for (let i = 0; i < this.PartyActivity.length; i++) {
          series.push({
            name: this.PartyActivity[i].text,
            value: this.PartyActivity[i].count,
            totals: this.PartyActivity[i].total
          });
          total = this.PartyActivity[i].total;
          legendData.push(this.PartyActivity[i].text);
        }
        _document.getElementById("PartyActivity").innerHTML =
          '<div id="PartyActivityPie" style="width:100%;height:100%;"></div>';
        let myChart = echarts.init(
          _document.getElementById("PartyActivityPie")
        );
        let option = {
          title: {
            text: total,
            right: "73%",
            top: "43%",
            textStyle: {
              //环形图内默认文字样式
              fontSize: 20,
              fontWeight: "bold",
              color: "#333"
            }
          },
          tooltip: {
            //提示框，可以在全局也可以在
            trigger: "item", //提示框的样式
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            top: "middle",
            textStyle: {
              fontSize: 14,
              color: "#333"
            },
            x: "300px",
            y: "5px",
            orient: "vertical",
            data: legendData,
            formatter: function(name) {
              let count = 0;
              let totals = 0;
              for (let i = 0; i < series.length; i++) {
                if (series[i].name == name) {
                  count = series[i].value;
                  totals =
                    Math.floor((series[i].value / series[i].totals) * 100) +
                    "%";
                }
              }
              return name + "  |  " + totals + "   |   " + count;
            }
          },
          series: [
            {
              name: "党建活动",
              type: "pie", //环形图的type和饼图相同
              radius: ["50%", "70%"], //饼图的半径，第一个为内半径，第二个为外半径
              center: ["25%", "47%"],
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    baseline: "top",
                    fontSize: 12
                  }
                }
              },
              color: ["#e57c00", "#6f9b94", "#6f8c9b", "#9b0b11"],
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: series
            }
          ]
        };
        myChart.setOption(option);
      } else {
        var html = '<div class="nodata"><img src=' + this.imgsrc + "></div>";
        _document.getElementById("PartyActivity").innerHTML = html;
　　　　 _document.getElementById('PartyActivity').removeAttribute('_echarts_instance_'); //echarts_instance_不能创建多个实例，所以需删除。否则无法显示有数据的界面。

　　　　} 
},

 

如图：