1. 程式人生 > 實用技巧 >Echarts 空心餅圖示例

Echarts 空心餅圖示例

把以下程式碼複製貼上到:https://gallery.echartsjs.com/editor.html 可以預覽看到效果圖。

option = {
    color: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14'],
    backgroundColor: '#FFFFFF',
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}%'
    },
    legend: {
        icon: 'circle',
        type: 'plain',
        textStyle: { //圖例文字的樣式
            color: '#8C8C8C',
            fontSize: 12
        },
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: ['橫濱', '江之島', '鎌倉', '下北澤']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    series: [
        {
            name: '',
            type: 'pie',
            center: ["35%", "50%"],
            radius: ['50%', '70%'],
            itemStyle: {
                borderWidth: 1,
                borderColor: '#fff'
            },
            emphasis: {
                itemStyle: {
                    borderWidth: 0,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            data: [
                { value: 20, name: '橫濱' },
                { value: 30, name: '江之島' },
                { value: 25, name: '鎌倉' },
                { value: 25, name: '下北澤' }
            ]
        }
    ]
}