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

Question

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

Answer 1

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

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,
    }
  ]
};

Answer 2

echart有类似的呀,我这配置了一个,我还没找到怎么改进度条的底色,你自己找找
echart 进度条

Answer 3

百度echart没有找到像这样的图例

• Examples - Apache ECharts

这一个调整一下 startAngle 和 endAngle 不就可以了吗 直接不配置这俩参数也行

startAngle: 240,
endAngle: -60,

Answer 4

G2 有现成的组件, 改改就好了
https://g2.antv.antgroup.com/zh/examples/general/radial/#appl...

Answer 5

看看这两文章能不能解决你的问题 https://juejin.cn/post/7149104643963158564，
https://juejin.cn/post/6998078886080675871