-
Notifications
You must be signed in to change notification settings - Fork 103
/
index.html
212 lines (212 loc) · 18.8 KB
/
index.html
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SG161 实时网速</title>
<!-- <meta http-equiv="refresh" content="3">-->
<script src="/echarts.min.js"></script>
</head>
<body style="margin: 0;height:100%;">
<div id="main" style="width: 100%;height: 100vh;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '实时网速'
},
tooltip: {
trigger: 'axis',
formatter: function(value) {
//这里的value[0].value就是我需要每次显示在图上的数据
if (value[0].value <= 0) {
value[0].value = '0B';
} else {
var k = 1024;
var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
//这里是取自然对数，也就是log（k）（value[0].value），求出以k为底的多少次方是value[0].value
var c = Math.floor(Math.log(value[0].value) / Math.log(k));
value[0].value = (value[0].value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
}
if (value[1].value <= 0) {
value[1].value = '0B';
} else {
var k = 1024;
var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
//这里是取自然对数，也就是log（k）（value[0].value），求出以k为底的多少次方是value[0].value
var c = Math.floor(Math.log(value[1].value) / Math.log(k));
value[1].value = (value[1].value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
}
//这里的value[0].name就是每次显示的name
return value[0].name + "<br/>" + "上行网速: " + value[0].value + "<br/>" + "下行网速: " + value[1].value;
}
},
legend: {
data: ["上行网速", "下行网速"]
},
toolbox: {
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ["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", "123", "124", "125", "126", "127", "128", "129", "130", "131", "132", "133", "134", "135", "136", "137", "138", "139", "140", "141", "142", "143", "144", "145", "146", "147", "148", "149", "150", "151", "152", "153", "154", "155", "156", "157", "158", "159", "160", "161", "162", "163", "164", "165", "166", "167", "168", "169", "170", "171", "172", "173", "174", "175", "176", "177", "178", "179", "180", "181", "182", "183", "184", "185", "186", "187", "188", "189", "190", "191", "192", "193", "194", "195", "196", "197", "198", "199", "200", "201", "202", "203", "204", "205", "206", "207", "208", "209", "210", "211", "212", "213", "214", "215", "216", "217", "218", "219", "220", "221", "222", "223", "224", "225", "226", "227", "228", "229", "230", "231", "232", "233", "234", "235", "236", "237", "238", "239", "240", "241", "242", "243", "244", "245", "246", "247", "248", "249", "250", "251", "252", "253", "254", "255", "256", "257", "258", "259", "260", "261", "262", "263", "264", "265", "266", "267", "268", "269", "270", "271", "272", "273", "274", "275", "276", "277", "278", "279", "280", "281", "282", "283", "284", "285", "286", "287", "288", "289", "290", "291", "292", "293", "294", "295", "296", "297", "298", "299", "300", "301", "302", "303", "304", "305", "306", "307", "308", "309", "310", "311", "312", "313", "314", "315", "316", "317", "318", "319", "320", "321", "322", "323", "324", "325", "326", "327", "328", "329", "330", "331", "332", "333", "334", "335", "336", "337", "338", "339", "340", "341", "342", "343", "344", "345", "346", "347", "348", "349", "350", "351", "352", "353", "354", "355", "356", "357", "358", "359", "360", "361", "362", "363", "364", "365", "366", "367", "368", "369", "370", "371", "372", "373", "374", "375", "376", "377", "378", "379", "380", "381", "382", "383", "384", "385", "386", "387", "388", "389", "390", "391", "392", "393", "394", "395", "396", "397", "398", "399", "400", "401", "402", "403", "404", "405", "406", "407", "408", "409", "410", "411", "412", "413", "414", "415", "416", "417", "418", "419", "420", "421", "422", "423", "424", "425", "426", "427", "428", "429", "430", "431", "432", "433", "434", "435", "436", "437", "438", "439", "440", "441", "442", "443", "444", "445", "446", "447", "448", "449", "450", "451", "452", "453", "454", "455", "456", "457", "458", "459", "460", "461", "462", "463", "464", "465", "466", "467", "468", "469", "470", "471", "472", "473", "474", "475", "476", "477", "478", "479", "480", "481", "482", "483", "484", "485", "486", "487", "488", "489", "490", "491", "492", "493", "494", "495", "496", "497", "498", "499", "500"]
},
yAxis: {
type: "value",
max: function (value) {
var k = 1024;
var c = Math.floor(Math.log(value.max) / Math.log(k));
interval = Math.pow(k, c);
return Math.ceil(value.max / interval) * interval;
},
interval: 2097152,
axisLabel: {
formatter: function (value, index) {
if (value <= 0) {
value = '0B';
} else {
var k = 1024;
var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
//这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
var c = Math.floor(Math.log(value) / Math.log(k));
value = (value / Math.pow(k, c)) + ' ' + sizes[c];
}
//这里的value[0].name就是每次显示的name
return value;
}
},
},
series: [{
itemStyle: {
color: '#ef0000',
},
"data": [2482757.0, 4298173.0, 3504484.0, 648.0, 48.0, 0.0, 35064.0, 172820.0, 441718.0, 1317266.0, 2445956.0, 6156666.0, 1.0363046E7, 93839.0, 23111.0, 41167.0, 169702.0, 854729.0, 1898512.0, 2835358.0, 22298.0, 5106.0, 5749.0, 21681.0, 167195.0, 2285968.0, 3885447.0, 183583.0, 1801166.0, 931362.0, 16383.0, 0.0, 0.0, 0.0, 16389.0, 0.0, 0.0, 16395.0, 232570.0, 8523150.0, 7944220.0, 460378.0, 0.0, 0.0, 16454.0, 0.0, 0.0, 16460.0, 0.0, 0.0, 16466.0, 0.0, 0.0, 0.0, 279573.0, 4883389.0, 3099869.0, 16495.0, 0.0, 0.0, 16501.0, 0.0, 0.0, 0.0, 16507.0, 0.0, 0.0, 16513.0, 0.0, 0.0, 263101.0, 5049813.0, 2404730.0, 0.0, 16745.0, 0.0, 0.0, 16549.0, 0.0, 0.0, 0.0, 19504.0, 701.0, 0.0, 16565.0, 263863.0, 8107772.0, 17421.0, 0.0, 0.0, 16596.0, 0.0, 0.0, 0.0, 16602.0, 0.0, 0.0, 16608.0, 0.0, 0.0, 16614.0, 263421.0, 9653529.0, 4199936.0, 2882921.0, 0.0, 0.0, 16648.0, 0.0, 0.0, 16654.0, 0.0, 0.0, 0.0, 22534.0, 0.0, 0.0, 16667.0, 262825.0, 1.4052005E7, 5600819.0, 2628554.0, 0.0, 0.0, 16703.0, 0.0, 0.0, 2772917.0, 1399680.0, 0.0, 0.0, 16715.0, 0.0, 0.0, 280561.0, 1.1806478E7, 2390515.0, 1395053.0, 1773430.0, 4526617.0, 4905621.0, 19755.0, 0.0, 0.0, 16785.0, 0.0, 5884.0, 16796.0, 0.0, 0.0, 263146.0, 7136736.0, 0.0, 0.0, 16819.0, 0.0, 0.0, 16825.0, 0.0, 0.0, 0.0, 16831.0, 0.0, 0.0, 16837.0, 0.0, 1133611.0, 16855.0, 0.0, 0.0, 0.0, 16861.0, 0.0, 0.0, 16867.0, 0.0, 0.0, 16873.0, 0.0, 0.0, 0.0, 16879.0, 263139.0, 2615590.0, 16902.0, 0.0, 0.0, 16908.0, 0.0, 0.0, 0.0, 16914.0, 0.0, 0.0, 16920.0, 0.0, 0.0, 16926.0, 58546.0, 7636705.0, 2413990.0, 5306.0, 2948.0, 0.0, 16968.0, 0.0, 0.0, 16974.0, 0.0, 0.0, 16980.0, 0.0, 0.0, 0.0, 133518.0, 999457.0, 0.0, 17002.0, 0.0, 0.0, 17008.0, 0.0, 0.0, 0.0, 17014.0, 0.0, 0.0, 17020.0, 0.0, 0.0, 280662.0, 875424.0, 0.0, 0.0, 17039.0, 0.0, 0.0, 17045.0, 365.0, 0.0, 22928.0, 0.0, 116532.0, 163296.0, 24.0, 0.0, 0.0, 17077.0, 0.0, 0.0, 17078.0, 0.0, 0.0, 17080.0, 0.0, 0.0, 0.0, 17086.0, 116532.0, 147051.0, 17105.0, 0.0, 2944.0, 22423.0, 0.0, 0.0, 0.0, 17124.0, 0.0, 0.0, 17130.0, 0.0, 0.0, 17136.0, 174584.0, 88539.0, 0.0, 17154.0, 0.0, 0.0, 17160.0, 0.0, 0.0, 17166.0, 0.0, 0.0, 17172.0, 0.0, 0.0, 0.0, 182264.0, 140.0, 0.0, 20087.0, 0.0, 0.0, 17241.0, 0.0, 0.0, 9018.0, 17799.0, 0.0, 0.0, 17217.0, 0.0, 0.0, 17223.0, 0.0, 0.0, 0.0, 17229.0, 0.0, 0.0, 17235.0, 0.0, 0.0, 17241.0, 0.0, 0.0, 17247.0, 0.0, 0.0, 2968.0, 17259.0, 0.0, 0.0, 17265.0, 0.0, 0.0, 17271.0, 0.0, 0.0, 17277.0, 0.0, 0.0, 0.0, 17283.0, 0.0, 0.0, 17289.0, 0.0, 0.0, 17295.0, 0.0, 0.0, 0.0, 17301.0, 0.0, 0.0, 17307.0, 0.0, 0.0, 17313.0, 0.0, 0.0, 17319.0, 0.0, 0.0, 0.0, 17395.0, 0.0, 0.0, 17534.0, 5874.0, 0.0, 17343.0, 0.0, 0.0, 17349.0, 0.0, 0.0, 0.0, 17350.0, 0.0, 0.0, 17721.0, 9114.0, 80720.0, 54982.0, 97907.0, 208542.0, 482235.0, 399850.0, 1364549.0, 1312653.0, 1662819.0, 3289120.0, 2002323.0, 8864461.0, 9530262.0, 3569031.0, 17480.0, 9473551.0, 3945236.0, 3018704.0, 2904966.0, 698245.0, 228143.0, 876069.0, 2930770.0, 6794939.0, 1.3664619E7, 5176904.0, 656240.0, 853112.0, 1133188.0, 6024735.0, 1.2359494E7, 4197473.0, 5067851.0, 602629.0, 280751.0, 984360.0, 5620585.0, 7882291.0, 1395756.0, 2821832.0, 883984.0, 1.4066807E7, 3704692.0, 3920821.0, 3692641.0, 2099968.0, 6604936.0, 0.0, 4612575.0, 1410916.0, 1378104.0, 8450425.0, 2953080.0, 4843387.0, 2165592.0, 1.460376E7, 3560102.0, 5085860.0, 2970865.0, 5840536.0, 3806192.0, 2887456.0, 5070910.0, 3595490.0, 656310.0, 5005221.0, 2821832.0, 4856818.0, 4348980.0, 4069681.0, 1443728.0, 70.0, 1395959.0, 2165592.0, 6234280.0, 4432665.0, 676918.0, 2821902.0, 2821832.0, 1702203.0, 1.6783188E7, 7793827.0, 4201650.0, 5202083.0, 5774912.0, 2559336.0, 1445403.0, 2446549.0, 3478072.0, 6332716.0, 4462432.0, 908139.0, 1378104.0, 2821832.0, 2839601.0, 1.0299764E7, 4996916.0, 3609320.0, 2839601.0, 5251612.0, 5118672.0, 2887456.0, 3171818.0, 656240.0, 0.0, 2839602.0, 3642655.0, 5874.0, 0.0, 23066.0, 0.0, 0.0, 0.0, 17746.0, 0.0, 3413830.0, 8238501.0, 3626460.0, 6848113.0, 2312426.0, 54531.0, 6737572.0, 3794413.0],
"markLine": {
"data": [{
"type": "average",
"name": "平均值"
}],
"label": {
formatter: function (value) {
if (value.value <= 0) {
value = '0B';
} else {
var k = 1024;
var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
//这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
var c = Math.floor(Math.log(value.value) / Math.log(k));
value = (value.value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
}
//这里的value[0].name就是每次显示的name
return value;
}
}
},
"markPoint": {
"data": [{
"type": "max",
"name": "最大值"
}],
symbol: "roundRect",
symbolSize: [70, 30],
"label": {
formatter: function (value) {
if (value.value <= 0) {
value = '0B';
} else {
var k = 1024;
var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
//这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
var c = Math.floor(Math.log(value.value) / Math.log(k));
value = (value.value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
}
//这里的value[0].name就是每次显示的name
return value;
}
}
},
"name": "上行网速",
"smooth": false,
"type": "line"
},
{
itemStyle: {
color: '#5bf',
},
"data": [1076.0, 777.0, 0.0, 648.0, 48.0, 0.0, 7608.0, 1178.0, 0.0, 2729.0, 4520.0, 24.0, 0.0, 72.0, 4248.0, 0.0, 0.0, 777.0, 0.0, 0.0, 13663.0, 53.0, 976.0, 1180.0, 777.0, 35265.0, 3299.0, 863.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 1075.0, 2156.0, 1856.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 1850.0, 3233.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 1071.0, 4008.0, 0.0, 0.0, 1359.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 10735.0, 0.0, 0.0, 777.0, 3227.0, 18471.0, 4587.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 3229.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 1195.0, 0.0, 0.0, 777.0, 3225.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 1850.0, 2154.0, 0.0, 1295.0, 64.0, 1083.0, 0.0, 10707.0, 0.0, 0.0, 777.0, 0.0, 750.0, 777.0, 0.0, 0.0, 1071.0, 2931.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 1071.0, 3231.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 1073.0, 5415.0, 863.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 1073.0, 2154.0, 1854.0, 10456.0, 57.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 1850.0, 1077.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 4006.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 5984.0, 0.0, 0.0, 1195.0, 0.0, 1071.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 1071.0, 0.0, 777.0, 0.0, 9976.0, 1358.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 1071.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 1852.0, 0.0, 17629.0, 834.0, 0.0, 0.0, 777.0, 0.0, 0.0, 1073.0, 1359.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 9954.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 1359.0, 418.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 49431.0, 8950.0, 8321.0, 3903.0, 6448.0, 40754.0, 777.0, 0.0, 0.0, 3203.0, 14573.0, 4348.0, 4106.0, 1828.0, 0.0, 34495.0, 777.0, 4194.0, 1035.0, 0.0, 777.0, 3089.0, 5273.0, 1941.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 4219.0, 0.0, 777.0, 0.0, 0.0, 1828.0, 0.0, 1056.0, 0.0, 777.0, 0.0, 3163.0, 1835.0, 0.0, 0.0, 777.0, 0.0, 1058.0, 0.0, 3469.0, 0.0, 0.0, 777.0, 0.0, 0.0, 3167.0, 1835.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 1053.0, 10244.0, 57.0, 0.0, 0.0, 777.0, 0.0, 0.0, 27118.0, 834.0, 0.0, 0.0, 5003.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 0.0, 1832.0, 0.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 1058.0, 0.0, 0.0, 777.0, 1053.0, 0.0, 0.0, 777.0, 0.0, 0.0, 777.0, 0.0, 418.0, 0.0, 1358.0, 0.0, 0.0, 0.0, 777.0, 0.0, 2107.0, 777.0, 0.0, 458.0, 3798.0, 1833.0, 0.0, 116.0],
"markLine": {
"data": [{
"type": "average",
"name": "平均值"
}],
"label": {
formatter: function (value) {
if (value.value <= 0) {
value = '0B';
} else {
var k = 1024;
var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
//这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
var c = Math.floor(Math.log(value.value) / Math.log(k));
value = (value.value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
}
//这里的value[0].name就是每次显示的name
return value;
}
}
},
"markPoint": {
"data": [{
"type": "max",
"name": "最大值"
}],
symbol: "roundRect",
symbolSize: [70, 30],
"label": {
formatter: function (value) {
if (value.value <= 0) {
value = '0B';
} else {
var k = 1024;
var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
//这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
var c = Math.floor(Math.log(value.value) / Math.log(k));
value = (value.value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
}
//这里的value[0].name就是每次显示的name
return value;
}
}
},
"name": "下行网速",
"smooth": false,
"type": "line"
}],
animation: false,
animationDuration: 5
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>