YM
2025-04-14 508fd127fee444ab2ac375a09d63c4690d45c09b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<div class="layui-row layui-col-space16">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div id="chartView" style="width: 100%;height:300px;"></div>
        </div>
    </div>
</div>
<script>
var chartView;
function layoutChartView() {
    chartView = echarts.init(document.getElementById('chartView'));
    $.ajax({
        url: "/home/api/get_view_data",
        type: 'get',
        data: {},
        success: function (e) {
            if (e.code == 0) {
                var data_first = e.data.data_first;
                var data_second = e.data.data_second;
                var myDate = new Date();
                var nowHour = myDate.getHours(); //获取当前小时数(0-23)
                var xData = [];
                var yData1 = [];
                var yData2 = [];
                $.each(data_first, function (key, value) {
                    if (key <= nowHour) {
                        yData1.push(value);
                    }
                });
                $.each(data_second, function (key, value) {
                    xData.push(setHour(key));
                    yData2.push(value);
                });
                var ops = {
                    title: {
                        top: '12px',
                        text: '今日与昨日员工活跃度',
                        left: '6px',
                        textStyle: {
                            fontSize: '18',
                            color: '#333',
                        }
                    },
                    color: ["#1AAD19", "#1890FF"],
                    grid: {
                        left: '16px',
                        right: '30px',
                        bottom: '12px',
                        top: '60px',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        show: true,
                    },
                    legend: {
                        data: ["今日", "昨日"],
                        top: '16px',
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: !1,
                        data: xData,
                        axisLine: {
                            lineStyle: {
                                color: '#999999',
                                width: 1,
                            }
                        },
                    }],
                    yAxis: [{
                        type: "value",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#999999',
                                width: 1,
                            }
                        },
                    }],
                    series: [{
                        name: "今日",
                        type: "line",
                        smooth: !0,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: "default",
                                    opacity: 0.2
                                }
                            }
                        },
                        data: yData1
                    }, {
                        name: "昨日",
                        type: "line",
                        smooth: !0,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: "default",
                                    opacity: 0.2
                                }
                            }
                        },
                        data: yData2
                    }]
                }
                chartView.setOption(ops);
            }
        }
    })
}
</script>