半圆形环形图(ZUIAI)echarts 饼配置项内容和展示

半圆形环形图(ZUIAI)

      var dataStyle = {
    normal: {
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        color: "#F7F7F7",
        borderColor: "#F7F7F7",
        borderWidth: 2
    }
};
var placeHolderStyle = {
    normal: {
        color: 'rgba(0,0,0,0)',
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        borderWidth: 0,
    },
    emphasis: {
        color: 'rgba(0,0,0,0)'
    }
};
var option = {
    legend: [{
        orient: '',
        icon: 'circle',
        right: '20%',
        top: '20%',
        data: ['TOP1 34216', 'TOP2 34216', 'TOP3 34216', 'TOP4 34216', 'TOP5 34216', ],
        textStyle: {
            fontStyle: 50
        },
        itemWidth: 5,
        itemHeight: 5,
        itemGap: 1,
    }],
    series: [{
            name: 'TOP1',
            type: 'pie',
            clockWise: false,
            radius: ["90%", "92%"],
            hoverAnimation: false,
            z: 2,
            label: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#FF9C22',
                    borderColor: "#FF9C22",
                    borderWidth: 2
                }
            },
            data: [{
                    value: 100,
                    name: '01',

                },
                {
                    value: 50,
                    name: 'invisible',
                    itemStyle: placeHolderStyle
                }

            ]
        },
        {
            name: 'TOP1',
            type: 'pie',
            clockWise: false,
            radius: ["90%", "92%"],
            itemStyle: dataStyle,
            hoverAnimation: false,
            z: 1,
            data: [{
                    value: 270,
                    name: '01'
                },
                {
                    value: 90,
                    name: 'invisible',
                    itemStyle: placeHolderStyle
                }

            ]
        },
        {
            name: 'TOP2',
            type: 'pie',
            clockWise: false,
            radius: ['70%', '72%'],
            hoverAnimation: false,
            z: 2,
            label: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#FF9C22',
                    borderColor: "#FF9C22",
                    borderWidth: 2
                }
            },
            data: [{
                    value: 200,
                    name: '02'
                },
                {
                    value: 90,
                    name: 'invisible',
                    itemStyle: placeHolderStyle
                }
            ]
        },
        {
            name: 'TOP2',
            type: 'pie',
            clockWise: false,
            radius: ['70%', '72%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            z: 1,
            data: [{
                    value: 270,
                    name: '02'
                },
                {
                    value: 90,
                    name: 'invisible',
                    itemStyle: placeHolderStyle
                }
            ]
        },
        {
            name: 'TOP3',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: ['50%', '52%'],
            z: 2,
            label: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#FF9C22',
                    borderColor: "#FF9C22",
                    borderWidth: 2
                }
            },
            data: [{
                    value: 180,
                    name: '03'
                },
                {
                    value: 90,
                    name: 'invisible',
                    itemStyle: placeHolderStyle
                }
            ]
        },
        {
            name: 'TOP3',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: ['50%', '52%'],
            itemStyle: dataStyle,
            z: 1,
            data: [{
                    value: 270,
                    name: '03'
                },
                {
                    value: 90,
                    name: 'invisible',
                    itemStyle: placeHolderStyle
                }
            ]
        }, {
            name: 'TOP4',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: ['30%', '32%'],
            z: 2,
            label: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#FF9C22',
                    borderColor: "#FF9C22",
                    borderWidth: 2
                }
            },
            data: [{
                    value: 150,
                    name: '04'
                },
                {
                    value: 90,
                    name: 'invisible',
                    itemStyle: placeHolderStyle
                }
            ]
        },
        {
            name: 'TOP4',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: ['30%', '32%'],
            itemStyle: dataStyle,
            z: 1,
            data: [{
                    value: 270,
                    name: '04'
                },
                {
                    value: 90,
                    name: 'invisible',
                    itemStyle: placeHolderStyle
                }
            ]
        }, {
            name: 'TOP5',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: ['10%', '12%'],
            z: 2,
            label: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#FF9C22',
                    borderColor: "#FF9C22",
                    borderWidth: 2
                }
            },

            data: [{
                    value: 100,
                    name: '05'
                },
                {
                    value: 90,
                    name: 'invisible',
                    itemStyle: placeHolderStyle
                }
            ]
        },
        {
            name: 'TOP5',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: ['10%', '12%'],
            itemStyle: dataStyle,
            z: 1,
            data: [{
                    value: 270,
                    name: '05'
                },
                {
                    value: 90,
                    name: 'invisible',
                    itemStyle: placeHolderStyle
                }
            ]
        }, {
            type: 'pie',
            color: ['#f18d00', '#f18d00', "#f18d00", "#f18d00", "#f18d00"],
            data: [{
                value: '',
                name: 'TOP1 34216'
            }, {
                value: '',
                name: 'TOP2 34216',
            }, {
                value: '',
                name: 'TOP3 34216'
            }, {
                value: '',
                name: 'TOP4 34216'
            }, {
                value: '',
                name: 'TOP5 34216'
            }]
        }

    ]
};