環形圓角圖echarts


社區看了很多,無法用餅圖來實現,在官方 Issues 看到類似問題,官方已解決,使用極坐標來實現。

option = {
    title: {
      text: '95.08%',
      textStyle: {
        color: '#333',
        fontSize: 16
      },
      subtext: '100萬',
      subtextStyle: {
        color: '#333',
        fontSize:16
      },
      itemGap: 10, // 主副標題距離
      left: 'center',
      top: 'center'
    },
    angleAxis: {
      max: 100, // 滿分
      clockwise: false, // 逆時針
        // 隱藏刻度線
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    radiusAxis: {
      type: 'category',
        // 隱藏刻度線
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    polar: {
      center: ['50%', '50%'],
      radius: ['60%','100%'] //圖形大小
    },
    series: [{
      type: 'bar',
      data: [{
        name: '作文得分',
        value: 75,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: '#6BAAF9'
            }, {
              offset: 0.5,
              color: '#6BAAF9'
            },{
              offset: 1,
              color: '#1A59A8'
            }])
          }
        },
      }],
      coordinateSystem: 'polar',
      roundCap: true,
      barWidth: 15,
      barGap: '-100%', // 兩環重疊
      z: 2,
    },{ // 灰色環
        type: 'bar',
        data: [{
          value: 100,
          itemStyle: {
            color: '#E9F5FF',
            shadowColor: 'rgba(1, 0, 0, 0.2)',
            shadowBlur: 5,
            shadowOffsetY: 2
          }
        }],
        coordinateSystem: 'polar',
        roundCap: true,
        barWidth: 15,
        barGap: '-100%', // 兩環重疊
        z: 1
    }]
}
此配置為我經國原文鏈接改造過后的圖:
 

 

 

 

 

原為鏈接:https://blog.csdn.net/z291493823/article/details/103502767?utm_medium=distribute.pc_relevant_download.none-task-blog-2~default~BlogCommendFromBaidu~default-1.nonecase&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-2~default~BlogCommendFromBaidu~default-1.nonecas
環形圓角圖在線更改:https://www.makeapie.com/editor.html?c=xuyO-o_wd
更多作品:https://www.makeapie.com/explore.html?u=bd-1949357510&type=work#sort=rank~timeframe=all~author=all


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM