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
| <!DOCTYPE html>
| <html>
| <head>
| <meta charset="utf-8">
| <title>磁盘使用率监控</title>
| <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
| </head>
| <body>
| <script>
| // 原始数据
| const rawData = {
| "Thinkpad-E14": [
| { createTime: 1739149080000, "Windows (C:)": 84, "Data (D:)": 35 }
| ],
| "DESKTOP-50930CB": [
| { createTime: 1739844971000, "(D:)": 21, "(C:)": 54, "(F:)": 0, "(E:)": 7 },
| { createTime: 1739845405000, "(D:)": 21, "(C:)": 54, "(F:)": 0, "(E:)": 7 }
| ]
| };
|
| // 生成图表函数
| function createChart(serverName, data) {
| // 处理数据
| const seriesData = {};
|
| data.forEach(entry => {
| const createTime = entry.createTime;
| Object.entries(entry).forEach(([key, value]) => {
| if (key !== 'createTime') {
| if (!seriesData[key]) {
| seriesData[key] = [];
| }
| // 存储为 [时间戳, 数值] 格式
| seriesData[key].push([createTime, value]);
| }
| });
| });
|
| // 生成series配置
| const series = Object.keys(seriesData).map(disk => ({
| name: disk,
| type: 'line',
| data: seriesData[disk], // 直接使用包含时间戳的数据
| smooth: true
| }));
|
| // 配置选项
| const option = {
| title: { text: `${serverName} 磁盘使用率监控` },
| tooltip: {
| trigger: 'axis',
| valueFormatter: value => `${value}%`
| },
| legend: { data: Object.keys(seriesData) },
| grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
| xAxis: {
| type: 'time',
| axisLabel: {
| formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}',
| rotate: 45
| }
| },
| yAxis: {
| type: 'value',
| axisLabel: {
| formatter: '{value}%',
| },
| max: 100
| },
| series: series
| };
|
| // 创建图表容器
| const div = document.createElement('div');
| div.style.width = '800px';
| div.style.height = '500px'; // 增加高度适应时间标签
| div.style.margin = '40px auto';
| document.body.appendChild(div);
|
| const chart = echarts.init(div);
| chart.setOption(option);
| }
|
| // 为每个服务器生成图表
| Object.entries(rawData).forEach(([serverName, data]) => {
| createChart(serverName, data);
| });
| </script>
| </body>
| </html>
|
|
