Echarts实现圆角完成度无缝衔接

 主要原理

• 设置 series: 'bar'（柱状图）中的坐标系为极坐标系（polar）coordinateSystem: 'polar'
• 开启柱状图中的数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。stack: 'A' // 值可以随便写，只要保证每个series中的stack是相同的值即可
• 计算堆叠的数据总和，设为angleAxis配置项中的max的值，即angleAxis: { max: 16 } // 坐标值的最大值
• 设置series配置项中的roundCap: true，开启环形柱条两侧圆弧效果

实例代码

option = {
    angleAxis: {
        clockwise: false, // 刻度增长是否按顺时针，默认顺时针(true)。
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        min: 0,
        max: 16, //一圈的刻度值
        startAngle: 0 //初始角度
    },
    radiusAxis: {
        type: 'category',
        data: ['1', '2