echarts 画饼状U形环状占比图

喜欢ヅ旅行 2023-07-24 02:36 4阅读 0赞

export function echarts100(){
      let option = {
        angleAxis: {
          max: 100, // 满分
          clockwise: false, // 逆时针
            // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          startAngle: 180
        },
        radiusAxis: {
          type: 'category',
            // 隐藏刻度线
          axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
        polar: {
          center: ['50%', '30%'],
          radius: '220%' //图形大小
        },
        series: [{
          type: 'bar',
          data: [{
            name: '',
            value: 30,
            itemStyle: {
              normal: {
                color: { // 完成的圆环的颜色
                  colorStops: [{
                    offset: 0,
                    color: '#48FFFF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#48FFFF' // 100% 处的颜色
                  }]
                }
              }
            },
          }],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 18,
          barGap: '-100%', // 两环重叠
          radius: ['49%', '52%'],
          z: 2,
        },{ // 灰色环
          type: 'bar',
          data: [{
          value: 50,
          itemStyle: {
            color: '#3B4068',
          }
          }],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 26,
          barGap: '-123%', // 两环重叠
          radius: ['48%', '53%'],
          z: 1
        },{
          name: '圆',
          type: 'scatter',
          hoverAnimation: false,
          data: [30],
          symbolSize: 34,
          coordinateSystem: 'polar',
          roundCap: true,
          barGap: '-80%', // 两环重叠
          radius: ['48%', '53%'],
          z: 2,
          itemStyle: {
            normal: {
                color: '#48FFFF',
                opacity: 1,
            }
          }
        }]
    
      }
      return option;
    }

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jic3lp_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jic3lp_size_16_color_FFFFFF_t_70]: /images/20230528/234fda0ee46742418d8f0ac824852eb5.png