空心饼图

最新推荐文章于 2025-05-22 11:43:54 发布

原创最新推荐文章于 2025-05-22 11:43:54 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

工作专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何利用Python编程语言中的matplotlib库，详细步骤解释如何创建一个具有中心空白区域的空心饼图，适用于数据可视化场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./plugin/echarts/echarts-plain-original.js"></script>
    <script src="./plugin/echarts/echarts.min.js"></script>
</head>
<body>
    <div id="src_eventRanking" style="height: 200px;width: 200px;margin: 100px 100px;" >

    </div>
    <script>
        var mysrcChart = echarts.init(document.getElementById('src_eventRanking'));
        var option = {
            title: {
                text:'攻击源',
                x: 'left',
                textStyle: {
                    fontWeight:'normal',
                    fontSize:'12',
                    color:"#555555"
                },
                //     backgroundColor:'#f4faff',
                padding:[5,0,5,0],
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} 次<br/>({d}%)"
                //position: [1,150]
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                y: 'center',
                data: []
            },
            series: [{
                name: '攻击源',//'攻击源',
                type: 'pie',
                center: ['60%', '50%'],
                radius: ['50%', '25%'],
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{
                        label:{
                            show:true,
                            formatter:function(params){
                                return (Math.round(params.percent)+'%')
                            },
                            textStyle:{
                                fontSize: 10
                            },
                            position: 'inner'
                        },
                        labelLine:{
                            show:false
                        }
                    }
                },
                animation:false
            }],
            color: ['#4c46bc','#8045bd','#cb66d1','#d26585','#f9662c']
        };
        var datas = {
            src_ip:[{
                attack_count:5,
                src_ip: '1.1.1.1'
            },{
                attack_count:6,
                src_ip: '1.1.1.2'
            },{
                attack_count:7,
                src_ip: '1.1.1.3'
            },{
                attack_count:8,
                src_ip: '1.1.1.4'
            },{
                attack_count:9,
                src_ip: '1.1.1.5'
            },{
                attack_count:5,
                src_ip: '1.1.1.6'
            }]

        }
        var attackType = [];
        var attackCount = [];
        for(var i = 0; i<5;i++){
            var obj = datas.src_ip[i];
            attackType.push(obj.src_ip);
            attackCount.push({
                value: obj.attack_count,
                name: obj.src_ip
            });
        }
        option.legend.data = attackType;
        option.series[0].data = attackCount;
        mysrcChart.setOption(option);
    </script>
</body>
</html>

转自：https://blog.youkuaiyun.com/u012603073/article/details/51141976