用极坐标下的条形图实现带圆角的环形图（代码可直接使用）

我们项目中要实现这样一个图：

嗯，看起来呢，就是个环图，所以我直接用环图实现了，但是UI走查的时候说，我的设计稿红色部分是圆角，你的是直角，嗯，确实是这样子，那我就找相应API来实现这个圆角，无果……

后来搜大家的实现方案，是用极坐标下的条形图来实现的，这下可难为住我了，好在有个同学实现了，我也参考着实现了一下。如下代码所示。

最终有个小bug，因为这两个颜色所对应的图表是叠加的，所以在点击图例的时候，尤其是点击test2后，会只剩下红色，但是红色只显示一小部分，也就是当前图中这一块。经排查发现，是angleAxis里面的Max值的缘故，所以注释掉了，具体原因我不是很清楚。

下述代码可直接复制到Echarts中看效果 

option = {
  color: ['#FF5656', '#5C94FF'],
  tooltip: {
    trigger: 'item',
    textStyle: {
      color: '#FFF'
    },
    backgroundColor: 'rgba(0,0,0, 0.6)',
    borderColor: 'transparent',
    formatter: function(data) {
      let value = data.seriesIndex === 1 ? data.data.data : data.value;
      return `<span style="color: ${data.color}; font-size: 10px;"> ● </span><span>${data.data.name}: ${value}%</span>`;
    },
  },
  legend: {
    show: true,
    data: ['test1', 'test2'],
    orient: 'vertical',
    align: 'left',
    right: '10%',
    top: 'middle',
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
      color: '#38436A',
      lineHeight: 13,
      borderRadius: 20
    },
    pageIconSize: 6,
    formatter: function (name) {
      let data = option.series;
      let tarValue;
      for (let i = 0; i < data.length; i++) {
        if (data[i].name === name) {
          tarValue = data[i].data[0].data >= 0 ? data[i].data[0].data : data[i].data[0].value;
        }
      }
      return name + ' ' + tarValue + '%';
    }
  },
  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: ['40%', '50%'],
    radius: '90%' //图形大小
  },
  series: [{
    type: 'bar',
    data: [{
          name: 'test1',
          value: 10,
          itemStyle: {
            normal: {
              color: '#FF5656'
            }
          },
        }],
    name: 'test1',
    coordinateSystem: 'polar',
    roundCap: true,
    barWidth: 10,
    barGap: '-100%', // 两环重叠
    z: 2,
    emphasis: {
      focus: 'series'
    }
  }, {
    type: 'bar',
    data: [{
          name: 'test2',
          value: 100,
          data: 90,
          itemStyle: {
            color: '#5C94FF',
            shadowColor: '#EFF0F8',
            shadowBlur: 1,
            // shadowOffsetY: 2
          }
        }],
    name: 'test2',
    coordinateSystem: 'polar',
    roundCap: true,
    barWidth: 10,
    barGap: '-100%', // 两环重叠
    z: 1,
    emphasis: {
      focus: 'series'
    }
  }],
}