Echarts圆形占比图改良版

在工作中经常遇到一些与百分比相关的图表，本文描述的是一个由Echarts圆环+仪表图改良后的占比图表。

设计稿：

实现效果：

画图思路：圆环+仪表图

常规饼图，圆环图：

存在的问题：无法像设计稿那样均分成 36 份，因为其是按照数据的份数进行分割的

常规的仪表图：

仪表图特点：可以将圆进行任意整数份数的切分

结合圆环特点和仪表图特点进行 Echarts option 编码：

const option = {
    title: {
        text: value + '%',
        x: 'center',
        y: 'center',
        textStyle: {
            fontWeight: 'normal',
            color: colorInit[0],
            fontSize: '16',
        },
        // subtext: '副标题',
        subtextStyle: {
            fontSize: 18,
        },
    },
    color: colorInit[1],
    series: [
        {
            name: '',
            type: 'pie',
            clockWise: true,
            radius: ['68%', '80%'],
            // 提高表盘组件优先级
            z: 0,
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                },
            },
            hoverAnimation: false,
            data: [
                {
                    value: value,
                    name: '',
                    itemStyle: {
                        normal: {
                            color: colorInit[0],
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                        },
                    },
                },
                {
                    name: '',
                    value: 100 - value,
                },
            ],
        },
        {
            name: '分割线',
            type: 'gauge',
            startAngle: 0,
            endAngle: 360,
            splitNumber: 36,
            hoverAnimation: true,
            axisTick: {
                show: false,
            },
            splitLine: {
                length: 60,
                lineStyle: {
                    width: 3,
                    color: '#fff',
                },
            },
            axisLabel: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    opacity: 0,
                },
            },
            detail: {
                show: false,
            },
        },
    ],
};