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: '下北泽' }
            ]
        }
    ]
}