Echarts环形图中间百分比、外圈虚线

先看一下显示效果

image.png

series[0]显示的是外环的数据，series[1]显示内圆以及百分比，实现代码如下

chartOption: {
        legend: {
          //图例
          orient: "vertical", //图例的布局，竖直    horizontal为水平
          right: "3%",
          top: "25%",
          data: ["优秀","良好", "合格" , "不合格" ],
          itemGap: 30,
          icon: "circle",
          textStyle: {
            color: this.$BoardConfig.legend.fontColor,
            fontSize: this.$BoardConfig.legend.fontSize
          }
        },
        series: [
          {
            name: " ",
            type: "pie", //环形图的type和饼图相同
            center: ["40%", "50%"],
            radius: ["60%", "70%"], //饼图的半径，第一个为内半径，第二个为外半径
            avoidLabelOverlap: false,
            color: ["#37ff66", "#800bf3", "#c00edf", "#ff5555", "#61d3ff"],
            label: {
              show: false
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{ value: 15, name: "优秀" },
          { value: 28, name: "良好" },
          { value: 16, name: "合格" },
          { value: 8, name: "不合格" }],
            itemStyle: {
              borderWidth: 2, //设置border的宽度有多大
              borderColor: "#0b2449",
              borderRadius: 10
            }
          },
          //内圈百分比
          {
            type: "pie",
            center: ["40%", "50%"],
            radius: ["00%", "50%"], //内圆的半径，第一个为内半径，第二个为外半径
            avoidLabelOverlap: false,
            color: ["#30c70f"],
            data: [
              {
                hoverOffset: 1,
                value: "0",
                position: "center",
                name: "",
                itemStyle: {
                  color: "#37ff66",
                },
                label: {
                  normal: {
                    formatter: "优秀\n \n{c}%",
                    textStyle: {
                      fontWeight: "normal",
                      fontSize: 28,
                    },
                    show: true,
                    position: "center",
                    color: "#fff",
                  },
                },
                labelLine: {
                  normal: {
                    smooth: true,
                    lineStyle: {
                      width: 0,
                    },
                  },
                },
                hoverAnimation: false,
              },
            ],
          },
        ]
      }

给图表配置显示数据

        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);//根据实际情况计算
          myChart.setOption(this.chartOption, true); // 第二个参数true，是为了解决数据更改后不生效（没更新到图表）
        });

拓展：setOption中3个参数的含义
option—— 图表的配置项和数据
notMerge—— 可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
lazyUpdate—— 可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。

html代码

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