Luyue123456
/
ZGC_PEOP

<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>首页介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/main.css" th:href="@{/css/main.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="container">
    <div class="travel" style="height: 68%;">
        <div style="width: 30%;">
            <div class="wddbrw_head">
                <h1>职务层次情况</h1>
            </div>
            <div class="box" style="height: calc(50% - 50px);">
                <div id="pieChart1" style="width: 100%; height: 100%;"></div>
            </div>
            <div class="wddbrw_head">
                <h1>政治面貌情况</h1>
            </div>
            <div class="box" style="height: calc(50% - 50px);display: flex;margin: 0 10px;">
                <div id="pieChart2" style="width: 50%; height: 100%;"></div>
                <div id="plotChart3" style="width:50%; height: 100%;"></div>
            </div>
        </div>
        <div style="width: 40%;">
             <div style="width:100%;display: flex;">
                 <div class="arrange div1">
                     <div>知联会干部在库数</div>
                     <span>5321</span>
                 </div>
                 <div class="arrange div2">
                     <div><img style="width: 40px;height: 40px;" src="/img/main/presidentOne.png"/></div>
                     <div style="margin-left: 20px;">
                         <div>正会长</div>
                         <span><span style="margin-right: 20px;color: #FF620D;">1</span>人</span>
                     </div>
                 </div>
                 <div class="arrange div3">
                     <div><img style="width: 40px;height: 40px;" src="/img/main/presidentTwo.png"/></div>
                     <div style="margin-left: 20px;">
                         <div>副会长</div>
                         <span><span style="margin-right: 20px;color: #016BFF;">5</span>人</span>
                     </div>
                 </div>
             </div>
        </div>
        <div style="width: 30%;">
            <div class="wddbrw_head">
                <h1>学历、学位情况</h1>
            </div>
            <div class="box" style="height: calc(100% - 20px);">
                <div style="display: flex;justify-content: center;">
                    <div class="cut active" style="">全日制教育</div>
                    <div class="cut">在职教育</div>
                </div>
                <div id="barChart2" style="width: 100%; height: calc(50% - 10px);"></div>
                <div id="pieChart3" style="width: 100%; height: calc(50% - 10px);"></div>
            </div>
        </div>
    </div>
    <div class="travel" style="height: 30%;">
        <div style="width: 30%;">
            <div class="wddbrw_head">
                <h1>性别及年龄分布</h1>
            </div>
            <div class="box" style="height: calc(100% - 30px);">
                <div id="barChart1" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
        <div style="width: 70%;">
            <div class="wddbrw_head">
                <h1>单位类别情况</h1>
            </div>
            <div class="box" style="height: calc(100% - 30px);">
                <div id="barChart3" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js?v=3.6.3}"></script>
<script th:src="@{/js/bootstrap.min.js?v=3.3.7}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=4.7.3}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.7.3}"></script>
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    var array1 = [
        {name:'数据1',value:235},
        {name:'数据2',value:274},
        {name:'数据3',value:310},
        {name:'数据4',value:335}
    ];
    $(".cut").click(function () {
        $('.cut').removeClass('active');
        $(this).addClass('active');
    });
    var grid = {left: '10%', right: '6%', bottom: '3%', top:'6%'}
    //饼图1
    pieChartMethod('pieChart1',array1,"职务层次情况",'60%',"",grid,"",true);
    //饼图2
    pieChartMethod('pieChart2',array1,"饼图2",['50%', '80%'],"",grid,"",true);
    //阶梯图
    var data = [
        { value: 8, name: '副部级' },
        { value: 23, name: '正局级' },
        { value: 100, name: '副局级' },
        { value: 699, name: '正处级' },
        { value: 1640, name: '副处级' }
    ]
    funnelPlot('plotChart3',data);
    //柱状图
    var yAxis = {
        type: 'category',
        data: ['30岁以下', '31-40岁', '41-50岁', '51-60岁', '61岁以上'],
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        }
    }
    var series = [{
            name: '男',
            type: 'bar',
            data: [1200, 900, 600, 300, 200],
            emphasis: {
                focus: 'series'
            }
        }, {
            name: '女',
            type: 'bar',
            data: [1100, 950, 650, 350, 250],
            emphasis: {
                focus: 'series'
            }
        }
    ]
    //柱状图1
    var grid1 = {left: '15%', right: '6%', bottom: '12%', top:'12%'};
    barChartMethod("barChart1",{trigger: 'axis'},{data: ['男', '女'],left: '3%',},{type: 'value', name: '人数',
        axisLine: {show: false,}, axisTick: {show: false,},splitLine: {show: false}},yAxis,grid1,series);
    grid1.top = '3%';
    series = [{
        name: '数据',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130,120],
        itemStyle: {
            normal: {
                color: function(params) {
                    var colors = ['#34b3a0', '#ff6347'];
                    return colors[params.dataIndex % 2];
                }
            }
        }
    }];
    yAxis = {
        type: 'category',
        data: ['研究生', '大学', '大专', '中专', '职高','中央党校研究生','中央党校大学','其他']
    }
    //柱状图2
    barChartMethod("barChart2",{trigger: 'axis'},"",{type: 'value', name: '人数'},yAxis,grid1,series);
    var itemStyle = {borderColor: '#fff',borderWidth: 2}
    //饼图3
    pieChartMethod('pieChart3',array1,"饼图3",'60%',"",grid,"",true,itemStyle);
    //柱状图3
    var data1 = [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70];
    var maxHeight = Math.max(...data1);
    var xAxis = {
        type: 'category',
            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
    }
    yAxis = {
        type: 'value'
    }
    var series1 = [{
        name: '灰色背景',
        type: 'bar',
        data: data1.map(value => maxHeight), // 使用最大高度填充
        itemStyle: {
            color: '#ccc', // 灰色
            opacity: 0.5 // 可选：使灰色柱子稍微透明
        },
        barGap: '-100%', // 使灰色柱子与实际数据柱子重叠
        tooltip: {
            show: false //禁用灰色柱子的 tooltip
        },
        silent: true //禁用柱子的悬停和点击事件
    }, {
        name: '数据',
        type: 'bar',
        data: data1,
        itemStyle: {
            color: '#73C9C8' // 实际数据的颜色
        }
    }];
    var grid3 = {left: '5%', right: '6%', bottom: '12%', top:'6%'}
    barChartMethod("barChart3","","",xAxis,yAxis,grid3,series1);

    //饼图-id-数据-名称-弧度-位置-grid-legend-是否需要线
    function pieChartMethod(id,array,name,radius,center,grid,legend,isLabel,itemStyle){
        var pieChart = echarts.init(document.getElementById(id));
        var pieOption = {
            tooltip: {
                trigger: 'item'
            },
            legend: legend,
            series: [{
                name: name,
                type: 'pie',
                data: array,
                labelLine: {
                    length: 4,
                    length2: 4
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        if (grid) pieOption.grid = grid;
        if (radius) pieOption.series[0].radius = radius;
        if (center) pieOption.series[0].center = center;
        if (!isLabel) {
            pieOption.series[0].label = {show: false};
            pieOption.series[0].labelLine = {show: false};
        }
        if (itemStyle) pieOption.series[0].itemStyle = itemStyle;
        pieChart.setOption(pieOption);
    }

    //漏斗图
    function funnelPlot(id,data){
        var myChart = echarts.init(document.getElementById(id));
        var changeData = handleData(data);
        var option = {
            // tooltip: {
            //     trigger: 'item',
            //     formatter: function(params) {
            //         return params.name + ': ' + data[params.dataIndex].value;
            //     }
            // },
            series: [{
                    type: 'funnel',
                    left: '5%',
                    top: 10,
                    bottom: 10,
                    width: '90%',
                    min: 0,
                    max: 10,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'ascending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    data: changeData
                }
            ]
        };
        myChart.setOption(option);
    }

    //柱状图-id--tooltip-legend-xAxis-yAxis-grid-series
    function barChartMethod(id,tooltip,legend,xAxis,yAxis,grid,series){
        var barChart = echarts.init(document.getElementById(id));
        var barOption = {
            tooltip: {

            },
        };
        if (tooltip) barOption.tooltip = tooltip;
        if (legend) barOption.legend = legend;
        if (xAxis) barOption.xAxis = xAxis;
        if (yAxis) barOption.yAxis = yAxis;
        if (grid) barOption.grid = grid;
        if (series) barOption.series = series;
        barChart.setOption(barOption);
    }

    // 处理数据集合
    function handleData(data){
        return data.map((item,index) => {
            return {
                name: item.name+" "+item.value+" 人",
                value: (index+1)*2
            };
        });
    }
</script>
</body>
</html>