echart环形进度条,底窄上宽,进度未尾有图形

发布时间 2023-12-06 16:49:24作者: light丶

如图

 直接上代码

  let chartData = {
        value: 90,
        total: 100
      };
      let max = chartData.total;
      let value = chartData.value;
      var option = {
        title: [
          {
            top: "40%",
            left: "center",
            text: value + "{b|分}",
            textStyle: {
              color: "#00a464",
              fontSize: 26,
              fontWeight: 700,
              rich: {
                b: {
                  color: "#00a464",
                  fontSize: 12,
                  fontWeight: 700
                }
              }
            }
          },

          {
            top: "55%",
            left: "center",
            text: "总分:1000分",
            textStyle: {
              color: "#222B29",
              fontSize: 12,
              fontWeight: 700
            }
          }
        ],

        angleAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },

          max: 100,
          startAngle: 100
        },
        radiusAxis: {
          type: "category",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true
          },
          data: []
        },
        polar: {
          radius: "130%",
          center: ["50%", "50%"]
        },
        series: [
          // 极坐标系下柱状图
          // 实际值
          {
            type: "bar",
            data: [value],
            z: 1,
            coordinateSystem: "polar",
            barMaxWidth: 15,
            name: "出租率",
            roundCap: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0.5,
                color: "rgba(72, 195, 124, 1)"
              },
              {
                offset: 0,
                color: "rgba(117, 214, 138, 0.9)"
              }
            ])
          },
          // 背景图形
          {
            type: "pie",
            data: [max],
            z: 0,
            silent: true,
            radius: ["60.5%", "68.5%"],
            roundCap: true,
            color: "rgba(145,145,145,0.4)",
            barGap: "-100%"
          },
          // 尾端小圆点 饼图
          {
            type: "pie",
            radius: ["65%", "65%"],
            hoverAnimation: false,
            startAngle: 100,
            endAngle: 0,
            silent: 1,
            z: 10,
            data: [
              {
                name: "",
                value: value,
                itemStyle: {},
                label: {
                  show: true,
                  position: "center",
                  color: "#fff",
                  fontSize: 38,
                  fontWeight: "bold",

                  formatter: function(o) {
                    // return data
                  }
                },
                labelLine: {
                  show: false,
                  emphasis: {
                    show: false
                  }
                }
              },
              {
                //画中间的图标
                name: "",
                value: 0,
                label: {
                  position: "inside",
                  backgroundColor: {
                    image:
                      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANfSURBVHgBxZfPixRHFMffq+ofO5OZ6O6YGXaToEskIughBHLeg8clt1mQkJAQMARyiGzubu6KF0VYBUUPgnvUP0D/AC8iiCKoKLPO6uyqPdsz3VXVz6qRWbS658fuNvg5zMCrN+/7XnfVqzcIY1C/UecwN1coNbuTvDxRkgQ+KeRmDTmpJKGQh1HH/br0bnnqr7fjxMRRgv5Px6oOyVpfaGRAVLHk3uuovdpaObIUb1v418cXqpwnM+MKZiWQxNi4evif1tjCv7y4+I3TFTXIAdbprF0+uvh8pPCfjXP7Zcj2QY6giFpXDp98OlB4WKWuUOUyRPOc6EcgOIRI08ZOgI/0V0Mi3Nlwv7gJA7Ar3xL+7cG5CrrsQNaP9orunAfylFYpwxB0Eqs6geVBCSSAz68d/Hutl4j5qN9f8phHM1nOFREueiRPjxL9UAVNu0SnpkR4ImudJ8lMnep8S3iyNF0h4p7taAJwSo7DNnEoOVGJw0XbTgy5/+xYdUs4VnFqM02qzrwJADuEQ3L8S/2KbLsTy5qpGn9/cnYvKf872+GrePOmeXSwO4INLPwsXB58bNyQwSMm3FLJ9jbV5iBq6J0E21gtFfYwHlHRXtCbYA5ygpnjZxFJXmZSiZSwPmMzkJcw0ve2jcfgM5elezFS2nnHULoIs7sZfCaYSEjZRtOBICeIei31E1BrMt02opQzwkPISxihYdsSTiFLHC9ILQDehZwQBHdsm+cnIfPb66lRJXD8W3prB7BL9GNefeunLwz5SrVZcGg2tN+zQB50wfkfdomee5Ztm36a0ZUfTr5hK7igSp7TtB3euRO3FbLrsEMksuWsaoWU6+a7d5w29k+uZe3ulls8YwLANlHArq+7xcxqlay93hI2VXPGGllBTIAI+ZJ5XzCaoIvOfy2veCZrEYVaXTmy0Js8Pxl9/nh8/ludVXVQ1D2iM++B7uO6G+lLpNfdegkxeCj0SdgE/5Z9E/VhoEefgxmjTx99TR7Q12QFcgS5HvZmhwx7fUZVvh3sSocKG8zwRy6fZkA+7ADFmJzY7L68dPTfZtb68L8w9294Zae5TzjO1LgJGEEvFq+Ce7XmysKCGuSHMCZmRMK2V1ZFt5BgUtDDgtMXQqZiJ4A2uu03wb3ZcJhgn/ePWX8JsqXMiQAAAABJRU5ErkJggg=="
                  },
                  width: 20,
                  height: 20,
                  borderRadius: 30,
                  padding: 10
                }
              },
              {
                //画剩余的刻度圆环
                name: "",
                value: max - value,

                label: {
                  show: false
                },
                labelLine: {
                  show: false,
                  emphasis: {
                    show: false
                  }
                }
              }
            ]
          }
        ]
      };