H5如何实现多环 环形进度条？

作者站长头像
站长
· 阅读数 4

H5如何实现多环 环形进度条？像这样的图例得怎么实现？icon可以不要。百度echart没有找到像这样的图例，度娘也搜不到。有没有大神知道怎么实现

回复
1个回答
avatar
test
2024-07-05

echarts 可以解决，直接上图！！代码在最后。

answer image

https://echarts.apache.org/examples/zh/editor.html?c=gauge-ring

const gaugeData = [
  {
    value:100,
    name: 'Perfect',
    title: {
      show:false
    },
    detail: {
      show:false
    },
    itemStyle:{
      color:'#fee2d6',
    }
  },
  {
    value: 100,
    name: 'Good',
    title: {
      show:false
    },
    detail: {
      show:false
    },
    itemStyle:{
      color:'#fff4cd',
    }
  },
  {
    value: 100,
    name: 'Commonly',
    title: {
      show:false
    },
    detail: {
      show:false
    },
    itemStyle:{
      color:'#dcf2ff',
    },
  
  }
];
const gaugeData1 = [
  {
    value:30,
    name: 'Perfect',
    title: {
      show:false
    },
    detail: {
      show:false
    },
    itemStyle:{
      color:'#f54d28',
    }
  },
  {
    value: 100,
    name: 'Good',
    title: {
      show:false
    },
    detail: {
      show:false
    },
    itemStyle:{
      color:'#ffc013',
    }
  },
  {
    value: 70,
    name: 'Commonly',
    title: {
      show:false
    },
    detail: {
      show:false
    },
    itemStyle:{
      color:'#307dfd',
    },
  
  }
];
option = {
  series: [
    {
      type: 'gauge',
      startAngle: 230,
      endAngle: -50,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          borderWidth: 4,
          borderColor: '#fff'
        }
      },
      axisLine: {
        show:false,
        roundCap:false,
        lineStyle: {
          color:[[1, '#E6EBF8']],
          width: 200,
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 50
      },
      itemStyle:{
        color:'#00'
      },
     detail:{
       backgroundColor:'#000'
     },
      data: gaugeData,
    },
    {
      type: 'gauge',
      startAngle: 230,
      endAngle: -50,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          borderWidth: 4,
          borderColor: '#fff'
        }
      },
      axisLine: {
        show:false,
        roundCap:false,
        lineStyle: {
          color:[[1, '#E6EBF8']],
          width: 200,
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 50
      },
      itemStyle:{
        color:'#00'
      },
     detail:{
       backgroundColor:'#000'
     },
      data: gaugeData1,
    }
  ]
};
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容