报警总数echarts 饼配置项内容和展示

饼图嵌套

      let dataPie = [

    {
        value: 410,
        name: '企业'
    },
    {
        value: 380,
        name: '政府'
    },
    {
        value: 501,
        name: '个人'
    },
];
let colorPie = ['#173852', '#0b2036', '#002e49'];
let colorWrap = ['#3087d6', '#afe1ff', '#4be1ff'];
let baseDataPie = [],
    baseDataWrap = [];
for (var i = 0; i < dataPie.length; i++) {
    baseDataPie.push({
        value: dataPie[i].value,
        name: dataPie[i].name,
        itemStyle: {
            normal: {
                borderWidth: 50,

                borderColor: colorPie[i],

            }
        }
    });
    baseDataWrap.push({
        value: dataPie[i].value,
        name: dataPie[i].name,
        itemStyle: {
            normal: {
                color: colorWrap[i],
                borderWidth: 10,
                borderColor: colorWrap[i],
                shadowBlur: 50,
                shadowColor: 'rgba(48, 135, 214, 0.3)',
            }
        }
    }, {
        value: 10,
        name: '',
        itemStyle: {
            normal: {
                color: 'transparent',
                borderWidth: 10,
                borderColor: 'transparent',

            }
        }
    });
}


option = {
    backgroundColor: '#021228',
    title: {
        text: '报警总数',
        subtext: '10,225',
        textStyle: {
            color: '#00b5f3',
            fontSize: 12,
            
        },
        subtextStyle: {
            align: 'center',
            fontSize: 18,
            color: ['#85c7e3'],
            fontWeight:800
        },
        x: '38%',
        y: 'center',
    },
    tooltip: {
        show: true,
        trigger: 'item',
        formatter: "{a}：{b} <br/>占比：{d}%"
    },
    legend: {
        data: ['企业', '政府', '个人'],
        icon: 'vertical',
        right: '1%',
        top: 'center',
        orient: 'vertical',
        itemGap: 20,
        itemWidth: 15,
        itemHeight: 8,

        formatter: function(name) {
            let target;
            for (let i = 0; i < dataPie.length; i++) {
                if (dataPie[i].name === name) {
                    target = dataPie[i].value
                }
            }
            let arr = [name, target];
            return arr.join("\n")

        },
        textStyle: {
            lineHeight: 20,
            color: '#9ed2f5',

        },
    },
    grid: {
        left: '1%', // 与容器左侧的距离
        right: '1%', // 与容器右侧的距离
        top: '1%', // 与容器顶部的距离
        bottom: '1%', // 与容器底部的距离

    },
    series: [
        {
            name: '',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['40%', '50%'],
            radius: ['80%', '81%'],
            tooltip: {
                show: false
            },
            label: {
                normal: {
                    show: false
                }
            },
            data: baseDataWrap
        },
        {

            name: '报警',
            type: 'pie',
            color: colorPie,
            selectedMode: 'single',
            radius: ['55%', '58%'],
            center: ['40%', '50%'],
            hoverAnimation: false,
            label: {
                normal: {
                    show: false,
                }
            },

            data: baseDataPie
        },

    ]
};