echarts环形柱状图

需求:使用echarts实现上图的效果
参考的是:https://echarts.apache.org/examples/zh/editor.html?c=bar-polar-label-tangential
实现代码及注释:

const option = {
        // 极坐标polar
        polar: {
          radius: [40, '50%'] // '15%'整个绘图区域的大小; 40圆环的半径大小
        },
        // 自定义绘制图形
        graphic: [
          {
            type: 'text', // 绘制文本
            x: 50,
            y: 40,
            style: {
              text: '超欠',
              textAlign: 'center',
              fontSize: '10px',
              fill: '#1778B9' // 文本颜色
            }
          },
          {
            type: 'text',
            x: 50,
            y: 55,
            style: {
              text: '-3837',
              textAlign: 'center',
              fontSize: '10px',
              fill: '#D52722'
            }
          }
        ],
        angleAxis: {
          show: false, // 角度x轴刻度线
          max: 100, // 圆环最大值
          startAngle: 90, // 圆环开始绘制的位置,90度为12点的位置
          clockwise: false, // 圆环绘制的方向,false为逆时针方向
          axisLine: {
            show: false // x轴刻度分割线
          },
          axisLabel: {
            show: false // x轴刻度文本
          },
          splitLine: {
            show: false // 切分线显示
          }
        },
        radiusAxis: {
          show: false, // 带弧度的x轴的轴线
          type: 'category',
          data: ['a', 'b', 'c']
        },
        series: {
          type: 'bar', // 柱状
          barCategoryGap: '0%', // 每个类别之间的空隙
          data: [ // 这里的data对应 radiusAxis里的data 个数
            {
              value: 75,
              itemStyle: {
                normal: {
                  color: '#1778B9'
                }
              }
            },
            {
              value: 60,
              itemStyle: {
                normal: {
                  color: '#D52722'
                }
              }
            },
            {
              value: 25,
              itemStyle: {
                normal: {
                  color: '#FB8106'
                }
              }
            }
          ],
          coordinateSystem: 'polar'
        }
      }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值