Echarts实现环状半圆形饼图

实现效果

实现代码

option = {
    backgroundColor: '#fff',
    title: {
        text: "设备告警",
        textStyle: {
            color: '#000',
            fontSize: 32,
            fontWeight: 'bold'
        },
        left: 'center',
        top: 100,
        bottom: '69%',
        itemGap: 60,
    },
    tooltip: {
        show: false,
    },
    color: ['#01dadc', '#23cea7', '#5096e0'],
    legend: {
        orient: 'vertical',
        x: 690,
        y: 120,
        data: ['危急', '严重', '一般'],
    },
    series: [{
        name: '一般',
        type: 'pie',
        //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
        startAngle: 0,
        hoverAnimation: false,
        tooltip: {},
        radius: ["30%", "47%"],
        center: ['50%', '80%'],
        label: {
            normal: {
                show: false,
                position: 'center',
                color: '#fff',
                formatter: function (params) {
                    return params.value
                },
            },
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [{
            value: 300,
            itemStyle: {
                normal: {
                    color: "rgba(80,150,224,0)"
                }
            }
        },
            {
                value: 270,
                itemStyle: {
                    normal: {
                        color: "rgba(80,150,224,1)"
                    }
                }
            },
            {
                value: 30,
                itemStyle: {
                    normal: {
                        color: "rgba(80,150,224,0.1)"
                    }
                }
            },
        ]
    },
        {
            name: '严重',
            type: 'pie',
            startAngle: 0,
            radius: ['50%', '67%'],
            center: ['50%', '80%'],
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 300,
                itemStyle: {
                    normal: {
                        color: "rgba(35,206,167,0)"
                    }
                }
            },
                {
                    value: 210,
                    itemStyle: {
                        normal: {
                            color: "rgba(35,206,167,1)"
                        }
                    }
                },
                {
                    value: 90,
                    itemStyle: {
                        normal: {
                            color: "rgba(35,206,167,0.1)"
                        }
                    }
                },
            ]
        },
        {
            name: '危急',
            type: 'pie',
            startAngle: 0,
            hoverAnimation: false,
            radius: ["70%", "87%"],
            center: ['50%', '80%'],
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '10',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 300,
                itemStyle: {
                    normal: {
                        color: "rgba(1,218,220,0)"
                    }
                }
            },
                {
                    value: 240,
                    itemStyle: {
                        normal: {
                            color: "rgba(1,218,220,1)"
                        }
                    }
                },
                {
                    value: 60,
                    itemStyle: {
                        normal: {
                            color: "rgba(1,218,220,0.1)"
                        }
                    }
                },
            ]
        }
    ]
};