Echarts实现环状半圆形饼图

系统管理员 2021-07-26 15:21 2495阅读 1赞

**实现效果**

![format_png][]

**实现代码**

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)"
                            }
                        }
                    },
                ]
            }
        ]
    };

[format_png]: /images/20210726/bfe515d8f1214fc1b65737dbfce0b1cd.png