• 周四. 12月 1st, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

echarts 通过echarts实现圆环进度条

admin

11月 28, 2021

 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",//透明色,也可以设置把其他颜色
              },
            },
          ],
        },
      }

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注