master

分支 (1)

管理

管理

master

select-xn
/
e.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表</title>
    <style>
        body{
            background-color: #f7f8fa;
        }
        .charts-container{
            display: grid;
            gap: 10px;
            grid-template-columns: 1fr 1fr 1fr;
        }
        .charts-item{
            background-color: #fff;
        }
    </style>
    <!-- 引入jQuery和ECharts库 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div class="charts-container">
    <div class="charts-item" id="barChart" style="width: 600px; height: 400px;"></div>
    <div class="charts-item" id="pieChart" style="width: 600px; height: 400px;"></div>
    <div class="charts-item" id="lineChart" style="width: 600px; height: 400px;"></div>
</div>

<script>
    $(document).ready(function() {
        $.ajax({
            url: 'work1.php', // PHP脚本的URL
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // 处理部门数据并创建图表
                var departmentData = data.departmentData;
                var departmentNames = departmentData.map(function(item) { return item.department; });
                var totalEmployees = departmentData.map(function(item) { return item.totalEmployees; });
                var maleCounts = departmentData.map(function(item) { return item.maleCount; });
                var femaleCounts = departmentData.map(function(item) { return item.femaleCount; });

                var barChart = echarts.init(document.getElementById('barChart'));
                var barOptions = {
                    title:
                        { text: '各部门员工总数' },
                    tooltip:
                        {trigger: 'axis'},
                    xAxis:
                        { data: departmentNames },
                    yAxis:
                        {type: 'value'},
                    series:
                        [{ name: '员工总数', type: 'bar', data: totalEmployees }]
                };
                barChart.setOption(barOptions);

                var pieChart = echarts.init(document.getElementById('pieChart'));
                var pieOptions = {
                    title: { text: '男女人数比例' },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '性别',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: maleCounts.reduce((a, b) => a + b, 0), name: '男性' },
                                { value: femaleCounts.reduce((a, b) => a + b, 0), name: '女性' }
                            ]
                        }
                    ]
                };
                pieChart.setOption(pieOptions);

                // 处理工资数据并创建图表
                var salaryData = data.salaryData;
                var dates = salaryData.map(function(item) { return item.date; });
                var salaries = salaryData.map(function(item) { return item.salary; });

                var lineChart = echarts.init(document.getElementById('lineChart'));
                var lineOptions = {
                    title:
                        { text: '周一工资走势图',
                            textStyle: { color: 'red' },
                            left: 'center',
                        },
                    tooltip:
                        { trigger: 'axis' },
                    toolbox: {
                        feature: {
                            saveAsImage: { title: '保存为图片' }
                        },
                    },
                    xAxis:
                        { type: 'category', data: dates },
                    yAxis:
                        { type: 'value' },
                    series:
                        [{ name: '工资', type: 'line', data: salaries }]
                };
                lineChart.setOption(lineOptions);
            },
            error: function(xhr, status, error) {
                console.error('获取数据时出错:', error);
            }
        });
    });
</script>
</body>
</html>