运行中echarts 饼配置项内容和展示

设备概况

      var placeHolderStyle = {
    normal: {
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        color: "rgba(0,0,0,0)",
        borderWidth: 0
    },
    emphasis: {
        color: "rgba(0,0,0,0)",
        borderWidth: 0
    }
};


var dataStyle = {
    normal: {
        formatter: '{c}%',
        position: 'center',
        show: true,
        textStyle: {
            fontSize: '20',
            fontWeight: 'normal',
            color: '#AAAFC8'
        }
    }
};


option = {
    backgroundColor: '#0F1C3C',
    title: [{
        text: '运行中',
        left: '19%',
        top: '52%',
        textAlign: 'center',
        textStyle: {
            fontWeight: 'normal',
            fontSize: '14',
            color: '#AAAFC8',
            textAlign: 'center',
        },
    }, {
        text: '维修中',
        left: '49%',
        top: '52%',
        textAlign: 'center',
        textStyle: {
            color: '#AAAFC8',
            fontWeight: 'normal',
            fontSize: '14',
            textAlign: 'center',
        },
    }, {
        text: '离网/在建',
        left: '79%',
        top: '52%',
        textAlign: 'center',
        textStyle: {
            color: '#AAAFC8',
            fontWeight: 'normal',
            fontSize: '14',
            textAlign: 'center',
        },
    }],

    //第一个图表
    series: [{
            type: 'pie',
            hoverAnimation: false, //鼠标经过的特效
            radius: ['50%', '55%'],
            center: ['20%', '50%'],
            startAngle: 100,
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                    value: 100,
                    itemStyle: {
                        normal: {
                            color: '#E1E8EE'
                        }
                    },
                }, {
                    value: 0,
                    itemStyle: placeHolderStyle,
                },

            ]
        },
        //上层环形配置
        {
            type: 'pie',
            hoverAnimation: false, //鼠标经过的特效
            radius: ['50%', '55%'],
            center: ['20%', '50%'],
            startAngle: 90,
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                    value: 80,
                    itemStyle: {
                        normal: {
                            color: '#6F78CC'
                        }
                    },
                    label: dataStyle,
                }, {
                    value: 20,
                    itemStyle: placeHolderStyle,
                },

            ]
        },


        //第二个图表
        {
            type: 'pie',
            hoverAnimation: false,
            radius: ['50%', '55%'],
            center: ['50%', '50%'],
            startAngle: 225,
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                    value: 100,
                    itemStyle: {
                        normal: {
                            color: '#E1E8EE'


                        }
                    },

                }, {
                    value: 0,
                    itemStyle: placeHolderStyle,
                },

            ]
        },

        //上层环形配置
        {
            type: 'pie',
            hoverAnimation: false,
            radius: ['50%', '55%'],
            center: ['50%', '50%'],
            startAngle: 90,
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: '#4897f6'
                        }
                    },
                    label: dataStyle,
                }, {
                    value: 70,
                    itemStyle: placeHolderStyle,
                },

            ]
        },
         //第三个图表
        {
            type: 'pie',
            hoverAnimation: false,
            radius: ['50%', '55%'],
            center: ['80%', '50%'],
            startAngle: 225,
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                    value: 100,
                    itemStyle: {
                        normal: {
                            color: '#E1E8EE'


                        }
                    },

                }, {
                    value: 0,
                    itemStyle: placeHolderStyle,
                },

            ]
        },

        //上层环形配置
        {
            type: 'pie',
            hoverAnimation: false,
            radius: ['50%', '55%'],
            center: ['80%', '50%'],
            startAngle: 90,
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                    value: 55,
                    itemStyle: {
                        normal: {
                            color: 'rgba(32, 232, 36, 1)'
                        }
                    },
                    label: dataStyle,
                }, {
                    value: 45,
                    itemStyle: placeHolderStyle,
                },

            ]
        },
    ]
};