echarts环形柱状图

u202.png

需求：使用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'
        }
      }