zoukankan      html  css  js  c++  java
  • 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",//透明色,也可以设置把其他颜色
                  },
                },
              ],
            },
          }
  • 相关阅读:
    docker安装kafka
    Prometheus警报
    MongoDB介绍
    SpringMvc中几个注解
    无DNS安装VCSA
    互联网本质
    什么是领导力
    58沈剑_一分钟专栏
    以数据库思维理解区块链
    区块链的4个实际应用
  • 原文地址:https://www.cnblogs.com/luckybaby519/p/15137791.html
Copyright © 2011-2022 走看看