echarts 通过echarts实现圆环进度条

 

 

 

 

 var e = 60;
option = {
        title: {
          show: true,
          text: e + "%",
          x: "center",
          y: "center",// 通过x,y将标题(进度)定位在圆环中心
          textStyle: {
            fontSize: "25",
            color: "white",
            fontWeight: "400",
            fontFamily: "DINPro, DINPro-Regular",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{d}%",
          show: false,
        },
        legend: {
          orient: "vertical",
          x: "left",
          show: false,
        },
        series: {
          name: "",
          type: "pie",
          radius: ["65%", "85%"],
          avoidLabelOverlap: true,
          hoverAnimation: false,
          label: {
            normal: {
              show: false,
              position: "center",
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: e,
              name: "",
              itemStyle: {
                color: "#2AB296",
              },
            },
            {
              value: 100 - e,
              name: "",
              itemStyle: {
                color: "transparent",//透明色，也可以设置把其他颜色
              },
            },
          ],
        },
      }