echarts生成极坐标柱状图

网上实现极坐标柱状图案例是有的,但是我这边需求是数字需要放在最后,实现的效果如下图所示:

这种情况就没有用到type: 'pie'的形式,而是用到了type: 'bar', coordinateSystem: 'polar'的形式.废话不多说,直接贴代码

var colors = ['#33FFAA','#33FFDD','#33FFFF','#33CCFF','#5599FF']
var data = [
  { name: '钻石会员', value: 13077.9 },
  { name: '黄金会员', value: 15130 },
  { name: '白银会员', value: 26450.3 },
  { name: '青铜会员', value: 47648.7 },
  { name: '普通会员', value: 51301.11 },
]
var maxAum = Math.max(...data.map(d => d.value)) || 10

option = {
  title: {
    text: '270度圆弧状饼图',
    left: '3%',
    textStyle: {
      fontSize: 15,
      fontFamily: 'monospace'
    },
  },
  polar: {
    radius: [40, '75%']
  },
  angleAxis: {
    max:maxAum*7/6,
    startAngle: 90,
    splitLine:{
      show: false
    },
    axisLabel: {
      show:false
    },
    axisLine:{
      show: false
    },
    axisTick: {
      show: false
    }
  },
  radiusAxis:{
    type: 'category',
    data: data.map(d => d.name),
    axisLabel: {
      show: true,
      interval: 0
    },
    axisTick:{
      show: false
    },
    axisLine: {
      show: false
    }
  },
  tooltip:{
    trigger: 'item',
    formatter: '{b}:{c}(万元)'
  },
  legend: {
    y: 'bottom',
    x: 'center',
    data: data.map(d => d.name),
  },
  series: [
    {
      type: 'bar',
      data: data.map(d => d.value),
      coordinateSystem: 'polar',
      itemStyle: {
        color: function(params) {
          return colors[params.dataIndex]
        }
      },
      label: {
        show: true,
        position: 'end',
        rotate: true
      }
    }
  ]
};