echarts百分比进度条

最新推荐文章于 2024-04-17 18:00:38 发布

真墨迹

最新推荐文章于 2024-04-17 18:00:38 发布

阅读量922

点赞数

分类专栏：日常记录文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_45467481/article/details/122864827

版权

日常记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

option

	  let number = 50
      const option = {
        title: {
          text: `${number }%`,
          left: 'center',
          top: 'center', // top待调整
          textStyle: {
            color: '#fff',
            fontSize: 18,
            fontFamily: 'DINAlternate-Bold'
          },
          subtextStyle: {
            color: '#ff',
            fontSize: 15,
            fontFamily: 'PingFangSC-Regular',
            top: 'center'
          },
          itemGap: -4 // 主副标题间距
        },
        xAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          }
          // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [
          // 内圆
          {
            type: 'pie',
            radius: ['0', '60%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            z: 0,
            itemStyle: {
              normal: {
                color: ['#000000'],
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            label: {
              show: false,
              normal: {
                position: 'center'
              }
            },
            data: [100]
          },
          // 进度圈
          {
            type: 'pie',
            clockWise: true,
            radius: ['70%', '75%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false // 数据标签显示
            },
            data: [{
              value: number,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                color: ['#000000'],
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              }
            },
            {
              name: 'gap',
              value: 100 - obj.value,
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                  color: 'rgba(0, 0, 0, 0)',
                  borderColor: 'rgba(0, 0, 0, 0)',
                  borderWidth: 0
                }
              }
            }
            ]
          }
        ]
      }