echarts仪表盘和圆形结合

最新推荐文章于 2025-04-19 22:19:08 发布

Ciao_Traveler

最新推荐文章于 2025-04-19 22:19:08 发布

阅读量2k

点赞数

分类专栏： echarts的使用文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_44202904/article/details/123546332

版权

效果图
在这里插入图片描述
注意：使用startAngle: 200,endAngle: -20,在数据为零时，会出现一个实心圆，需要调整一下角度。
效果

代码

var option = {
   
      series: [
        {
   
          type: "gauge",
          center: ["50%", "50%"],
          radius: "80%",
          startAngle: 190,
          endAngle: -10,
          // minAngle:10,
          min: 0,
          max: 100,
          z: 5,
          itemStyle: {
   
            normal: {
   
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
   
                  offset: 0,
                  color: "#65e1fb",
                },
                {
   
                  offset: 1,
                  color: "#2e70f6",
                },
              ]),
            },
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          progress: {
   
            show: true,
            roundCap: true,
            width: 5
          },
          pointer: {
   
            show: false
          },
          axisLine: {
   
            show: false,
            lineStyle: {
   
              width: 30
            }
          },
          axisTick: {
   
            show: false,
          }

最低0.47元/天解锁文章