先看一下顯示效果

image.png

series[0]顯示的是外環(huán)的數(shù)據(jù)践惑，series[1]顯示內(nèi)圓以及百分比腹泌，實(shí)現(xiàn)代碼如下

chartOption: {
        legend: {
          //圖例
          orient: "vertical", //圖例的布局，豎直    horizontal為水平
          right: "3%",
          top: "25%",
          data: ["優(yōu)秀","良好", "合格" , "不合格" ],
          itemGap: 30,
          icon: "circle",
          textStyle: {
            color: this.$BoardConfig.legend.fontColor,
            fontSize: this.$BoardConfig.legend.fontSize
          }
        },
        series: [
          {
            name: " ",
            type: "pie", //環(huán)形圖的type和餅圖相同
            center: ["40%", "50%"],
            radius: ["60%", "70%"], //餅圖的半徑尔觉，第一個為內(nèi)半徑凉袱，第二個為外半徑
            avoidLabelOverlap: false,
            color: ["#37ff66", "#800bf3", "#c00edf", "#ff5555", "#61d3ff"],
            label: {
              show: false
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{ value: 15, name: "優(yōu)秀" },
          { value: 28, name: "良好" },
          { value: 16, name: "合格" },
          { value: 8, name: "不合格" }],
            itemStyle: {
              borderWidth: 2, //設(shè)置border的寬度有多大
              borderColor: "#0b2449",
              borderRadius: 10
            }
          },
          //內(nèi)圈百分比
          {
            type: "pie",
            center: ["40%", "50%"],
            radius: ["00%", "50%"], //內(nèi)圓的半徑，第一個為內(nèi)半徑侦铜，第二個為外半徑
            avoidLabelOverlap: false,
            color: ["#30c70f"],
            data: [
              {
                hoverOffset: 1,
                value: "0",
                position: "center",
                name: "",
                itemStyle: {
                  color: "#37ff66",
                },
                label: {
                  normal: {
                    formatter: "優(yōu)秀\n \n{c}%",
                    textStyle: {
                      fontWeight: "normal",
                      fontSize: 28,
                    },
                    show: true,
                    position: "center",
                    color: "#fff",
                  },
                },
                labelLine: {
                  normal: {
                    smooth: true,
                    lineStyle: {
                      width: 0,
                    },
                  },
                },
                hoverAnimation: false,
              },
            ],
          },
        ]
      }

給圖表配置顯示數(shù)據(jù)

        let myChart = this.$echarts.init(
            document.getElementById("myChart")
          );
          this.chartOption.legend.formatter = name => {
            let data = this.chartOption.series[0].data;
            for (let i = 0; i < data.length; i++) {
              if (data[i].name == name) {
                return `${name} ${data[i].value} 人`;
              }
            }
            return name;
          };
          this.chartOption.series[1].data[0].value = (15*100/(15+28+16+8)).toFixed(2);//根據(jù)實(shí)際情況計算
          myChart.setOption(this.chartOption, true); // 第二個參數(shù)true专甩，是為了解決數(shù)據(jù)更改后不生效（沒更新到圖表）
        });

拓展：setOption中3個參數(shù)的含義
option—— 圖表的配置項和數(shù)據(jù)
notMerge—— 可選，是否不跟之前設(shè)置的 option 進(jìn)行合并钉稍，默認(rèn)為 false涤躲，即合并。
lazyUpdate—— 可選贡未，在設(shè)置完 option 后是否不立即更新圖表种樱，默認(rèn)為 false，即立即更新俊卤。

html代碼

            <div class="chartClass">
              <div id="myChart" style="width: 100%; height: 100%"></div>
            </div>