Echarts實作帶刻度的餅圖

Echarts版本

以下效果實作使用的echarts版本為 4.X

帶刻度的餅圖

實作效果:

實作代碼：

const labelItemArr = [];
for (let i = 0; i < 100; ++i) {
    labelItemArr.push({
        value: 1,
        name: i,
        itemStyle: { normal: { color: i < 75 ? '#EB4B4B' : '#ccc' } }
    }, {
        value: 3,
        name: '',
        itemStyle: {
            normal: {
                label: { show: false },
                labelLine: { show: false },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
        }
    });
}
option = {
    title: [{
        text: '75%',
        x: '50%',
        y: '45%',
        textAlign: 'center',
        textStyle: {
            fontSize: '30',
            fontWeight: '600',
            color: 'rgba(0,0,0,0.90)',
            textAlign: 'center',
        },
    }, {
        text: '在線率',
        left: '50%',
        top: '52%',
        textAlign: 'center',
        textStyle: {
            fontSize: '18',
            fontWeight: '400',
            color: 'rgba(0,0,0,0.40)',
            textAlign: 'center',
        },
    }],
    polar: {
        radius: ['61%', '57%'],
        center: ['50%', '50%'],
    },
    angleAxis: {
        max: 100,
        show: false,
        startAngle: 0,
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: { show: false },
        axisLine: { show: false },
        axisTick: { show: false },
    },
    series: [
        {
            hoverAnimation: false,
            type: 'pie',
            z: 2,
            data: labelItemArr,
            radius: ['68%', '75%'],
            zlevel: -2,
            label: {
                normal: {
                    position: 'inside',
                    show: false,
                }
            },
        },
        {
            type: 'pie',
            radius: ['56%', '60%'],
            center: ['50%', '50%'],
            data: [{
                hoverOffset: 1,
                value: 75,
                name: '',
                itemStyle: { color: '#EB4B4B ' },
                label: { show: false },
                labelLine: {
                    normal: {
                        smooth: true,
                        lineStyle: {
                            width: 0
                        }
                    }
                },
                hoverAnimation: false,
            }, {
                label: { show: false },
                labelLine: {
                    normal: {
                        smooth: true,
                        lineStyle: { width: 0 }
                    }
                },
                value: 100-75,
                hoverAnimation: false,
                itemStyle: {
                    color: '#ccc',
                },
            }]
        },
    ]
};

• 內層餅圖就是兩組資料實作，itemStyle分別設定不同的顏色
• 外層的餅圖實作原理跟內層一樣，只是資料項多一些，并且設定部分itemStyle的顏色為透明色，這樣餅圖的每一項看上去就像有間隔一樣，就類似刻度盤，
• 如果希望刻度之間的間隔更大，就設定itemStyle為透明的資料項 value 值更大一些，反過來想設定刻度更細就設定非透明的資料項 value 值更小
• 主要就是添加多個資料項，每個資料項設定不同顏色就可以實作帶刻度的餅圖

極坐標+條形圖實作餅圖

實作效果：

實作代碼：

option = {
    color: ['#EB4B4B', 'rgb(245,245,245)'],
    title: [{
        text: '75%',
        x: '50%',
        y: '45%',
        textAlign: 'center',
        textStyle: {
            fontSize: '40',
            fontWeight: '500',
            color: 'rgba(0,0,0,0.90)',
            textAlign: 'center',
        },
    }, {
        text: '使用率',
        left: '50%',
        top: '52%',
        textAlign: 'center',
        textStyle: {
            fontSize: '16',
            fontWeight: '400',
            color: 'rgba(0,0,0,0.40)',
            textAlign: 'center',
        },
    }],
    polar: {
        radius: ['75%', '60%'],
        center: ['50%', '50%'],
    },
    angleAxis: {
        max: 100,
        show: false,
        startAngle: 0,
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,

        },
        axisTick: {
            show: false
        },
    },
    series: [
        {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 60,
            showBackground: true,
            data: [75],
            coordinateSystem: 'polar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: '#EB4B4B'
                    }, {
                        offset: 1,
                        color: '#F47F7F'
                    }]),
                }
            }
        },
    ]
};

• 這樣實作的餅圖跟其他餅圖一點點不一樣的地方就在于兩端是有弧度的圓，type 為 pie 的餅圖兩端為 矩形沒有弧度
• 一定是在極坐標下，如果坐標系沒有設定，就還是普通的條形圖
• 一定要設定 angleAxis 配置的 max 值，不設定就會出現不管 bar 的 data 值為多少，一定是完整的餅圖，100% 的狀態

最近專案畫圖比較多，之前用echarts用的都比較簡單，最近參考社區中共享的echarts圖之后，才發現自己使用的太死板，還是要多多的學習，繼續多研究 echarts 的這些配置項，靈活使用，

歡迎大家多分享，相互學習！

學到老，活到老