echart环形饼图

 

chartInit() {
      var chart = this.$echarts.init(this.$refs.chart);
      var colorArr = ["#32C5FF", "#97EF3A", "#F7B500", "#5AD8A6"];
      let title = "共" + this.number + "个" + "\n\r" + "云店";
      var data = [
        { value: 14, name: "推广者云店" },
        { value: 31, name: "初级云店" },
        { value: 21, name: "高级云店" },
        { value: 11, name: "超级云店" },
      ];
      var option = {
        title: {
          text: "新增机构", //头部标题
          left: "center",
        },
        color: colorArr, //环形块颜色
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          show: false,
        },
        graphic: [
          //为环形图中间添加文字
          {
            type: "text",
            left: "center",
            top: "45%",
            style: {
              text: title,
              textAlign: "center",
              fill: "#005947",
              fontSize: "15",
              fontWeight: "bold",
            },
          },
        ],
        series: [
          {
            name: "新增机构",
            type: "pie",
            radius: ["28%", "60%"],
            label: {
              position: "outside",
              color: "#000",
              fontSize: 13,
              alignTo: "labelLine",
              formatter: "{b}\n{c}个",
            },
            data: data,//自定义环形值数据
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      //使用刚指定的配置项和数据显示图表。
      chart.setOption(option);
    },