Echarts图表库推荐以及使用Echarts实现饼图端头弧形效果

推荐Echarts图表库官方链接http://www.ppchart.com/#/

下面是一段实现饼图端头弧形效果的Echarts代码

虽然有了上面的图表库，里面案例也挺多，但是就是没找到我想要的这种效果，索性就手写了一个

下面代码可以直接去我上面的图标库运行看效果也可以看我下面贴的效果图

// 实现步骤以及注意事项
// 1. max：16，定义的是一圈的份数，也就是16份
// 2. radiusAxis下面的data，是极坐标轴（radiusAxis）的类目数据。极坐标轴类目数据用于指定环形图的每个环的标签。每个类目代表环形图的一个环，因此在示例中，['1', '2', '3', '4', '5'] 表示有五个环，如果新增的话继续往后面加即可，也可以写['1','1','1','1','1'],为了标签不重复，也可以['A','B','C','D','E']，建议按照我那样写即可
// 3. polar下面的radius是一个数组，调整极坐标系的内径和外径，使所有环的半径统一调整，值为百分比
// 4. series下面每一项都是一个数据，每个数据项里面的stack都绑定同一个，用于设置了堆叠的分组名。这样可以将所有的圆环都堆叠到一起（这种圆角圆环的实现本质就是多个圆环堆叠到一起实现的视觉效果，如果不以某一个参考作为堆叠的话，就会显得不整齐）
// 5. series下面每一项的data数据为每个圆环的配置（这段是我个人理解的：就是有几个圆环就在每个配置项的data里面前面补几个圆环，最后一个才是数据项，但这个值参考的是max，也就是总份数16，当前数据也就是相当于在16份里面的一个占比,也就是所有圆环的份数相加必须小于等于16，后面新增一个圆环就要在所有的配置项的data里面最前面新增一个0，后面保持不变，就这样）
// 6. legend下面的data是一个图例，也就是每个图标都有的一些小圆点标志，鼠标悬浮上去可以高亮当前数据

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', '1', '1', '1','1'], // 极坐标径向轴中的类目，这边有几个数，
        // 就代表径向轴分了几份，和series中的data对应，这样就可以撑开圆环
        z: 10,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
    },
    polar: {
        radius: ['30%', '70%'] // 这里调整了极坐标系的内径和外径，使所有环的半径统一调整
    },
    series: [{
        type: 'bar',
        data: [0, 0, 0, 0, 2],
        coordinateSystem: 'polar',
        name: 'A',
        roundCap: true,
        stack: 'a',
        itemStyle: {
            color: '#Fb4035', // 设置系列 A 的颜色
        }
    }, {
        type: 'bar',
        data: [0, 0, 0, 0, 8], // 前面的0，累计还是0，这样径向轴上的对应的分区总数就是0，不会显示圆环
        coordinateSystem: 'polar',
        name: 'B',
        stack: 'a',
        roundCap: true,
        itemStyle: {
            color: '#dbdce5', // 设置系列 B 的颜色
        }
    }, {
        type: 'bar',
        data: [0, 0, 0, 0, 4],
        coordinateSystem: 'polar',
        name: 'C',
        stack: 'a',
        roundCap: true,
        itemStyle: {
            color: '#162c7a', // 设置系列 C 的颜色
        }
    },{
        type: 'bar',
        data: [0, 0, 0, 0, 2],
        coordinateSystem: 'polar',
        name: 'D',
        stack: 'a',
        roundCap: true,
        itemStyle: {
            color: '#000000', // 设置系列 D 的颜色
        }
    }],
    legend: {
        show: true,
        data: ['A', 'B', 'C', 'D']
    }
};