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

echart有类似的呀,我这配置了一个,我还没找到怎么改进度条的底色,你自己找找 <a href="https://link.segmentfault.com/?enc=1IyHAKZR%2Fvq2KaphuUlImQ%3D%3D.xa9My6ezmlgpQcrHguatVbsxU3JyhrJB4nwXLxVkpwUnaX95eCkALVFS45TNmvfKLm5HRT8nTrdYS%2FA0w1J4o%2FvVJkkxjFl1Hdy563HGqG1QT%2BenV7R%2BI%2FpL%2BDgtdpnCMTkgXsaaiVSIv5t0iX18cq5Zx8WDTkl%2BW74YqIrRlp289yVWJFMbFLuMLSEHMKA5R1t79FBA1Cg72lST17dj%2FtW%2F2BZNssn3NA8pQabmAsZDLQOGCOjdO4LLtRBw9Ysun3XbPz%2BlJWqJvimMqHxdSj4twIz%2F1MNd6OlL8ApyBsl75Jok4Y1DYrLhTXq8lJLDflLt%2FmY5Jjrb%2F%2BQ0qdvgH3wUP2mb61QAngynUJWu3MDp4VwpZP2JAnHGSjfFyaadjY31pxxbj%2FsKX90OkwMiS8kR%2Btv%2F4hNKpf4V9wrCO29dj5VgKD6jnNNIqBx83u02uI%2F5a4KU7fW3XClmdn4I6joyTRQO%2BN2u9Y3DbGfn6u%2F3pb6Hkkyep4R9VoWdBjJuD3RPAqGprGv%2Fq%2F7wpJTK18Wf%2FJMH1S2FV6BzOcec8s2Q8wenQdWyMHT6GHM2%2BSNHIQ2G%2BI1Nl%2BfvN6OIyfxPhJMipaTJwjX%2BOGBCS75KnaWtWnFrsOhX1EdgkBmXURtRDF7%2FYNFYCuLW1V9yATZsY0AJRQYRQDo%2Fze1%2BO77pWDVjSNtemmUsiKj8uekcriyviP7JPwLPjw69nVJzpmTOHRFKAM14yaZ0sinMD8oxaSit87EQ1nKH8qUnsLv0nsRE0xedna%2Fuk92A%2FgUKL1CzEGRyws%2FD9G1xDaXMtuy4AainH7hCNOBPA94Gsg5RxmvJO0c3lg5EBpJhn0PjCe3t%2FlmUjlTNXZxLK3hXEkmzdAFJyRP9feVBsB%2B0QVWwuk0UivkHpvTmpjSpyLbBQ0PfR6oN5MSbcINThyrx%2FOJ8jItmEaCdqA7B7SqVm4o51kQ0tNLrEMDuQPQqK4n5fFMYkEXYWyZ7MqYTOavGVbNQIskSpFILm80vFxpJfAr8jGtZynQlwIw6lkHVUB64j5Y%2FWeS%2Bo89gdELrlLIPYNcOK%2FOGQkVn0TCvt8PilS71NRUjOLLLPaGZAzuiKQAf4IackmfPXAcjuLJ1cW68m6jMCPEPE5IHf%2Fq4LG0ZC0IeU5liUfJq8FoRYJCZk0L09ePxJ2c925Zqffz3HHr8c0b4aYjhyPR2XYtbnJVxbQMfkiWCe1ZXKa0gCzXZ%2BMncXpD6k2pWCudFmgyRTcp%2BQfDs3WvC%2BKlxqQgrjFzCbW6DfkNJ" rel="nofollow" target="_blank">echart 进度条

百度echart没有找到像这样的图例 Examples - Apache ECharts 这一个调整一下 startAngle 和 endAngle 不就可以了吗直接不配置这俩参数也行 startAngle: 240, endAngle: -60,

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

小木爱旅行

22536

发布于
2023-04-12 广东

✓ 已被采纳

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