引言
最近做了一个系统性能监视器，为了WEB页面的实现，并且简单的展示60秒内的性能信息，做了一个页面，当然，原生的JS是非常重要的基本功，尤其是操作DOM节点，这篇文章也使用到了appendChild 和 createElement。
这里主要是思路，实现方式一定会有很多种。
json信息
{
"network": {
"network_upload": ["2.51", "1.32", "0.72", "1.22", "2.67", "4.69", "6.18", "1.05", "4.70", "1.62", "0.98", "0.61", "3.41", "0.35", "1.61", "1.02", "4.05", "3.77", "1.68", "4.24", "2.09", "0.28", "0.33", "1.61", "0.40", "5.78", "0.23", "5.70", "1.86", "1.00", "3.19", "5.45", "0.66", "2.04", "1.20", "1.70", "0.28", "1.08", "3.10", "3.33", "0.39", "0.54", "4.10", "0.57", "0.28", "1.09", "3.75", "2.44", "3.80", "0.67", "0.25", "2.10", "1.91", "0.44", "0.35", "0.53", "0.46", "0.62", "0.57", "2.62"],
"network_download": ["0.67", "0.37", "0.18", "0.75", "4.19", "5.81", "3.18", "0.97", "6.04", "3.68", "0.87", "0.10", "0.76", "0.16", "3.63", "0.10", "9.97", "1.24", "0.06", "4.35", "0.59", "0.29", "0.33", "3.56", "0.10", "3.62", "0.13", "6.67", "5.06", "0.37", "9.57", "6.18", "0.69", "3.59", "0.98", "1.09", "0.16", "0.06", "1.34", "1.49", "0.16", "0.51", "15.74", "0.18", "0.16", "0.46", "1.55", "4.07", "0.72", "0.25", "0.10", "0.16", "4.03", "0.10", "0.21", "0.49", "0.10", "0.74", "0.29", "1.33"]
},
"disk": {
"C:\\": {
"used": [154192.5625, 154192.5625, 154192.5625, 154192.6953125, 154192.6953125, 154192.6953125, 154192.8125, 154193.0625, 154193.0625, 154193.0625, 154193.0625, 154193.0625, 154193.0625, 154193.0625, 154193.0625, 154193.0625, 154193.0703125, 154193.0703125, 154193.0703125, 154193.0703125, 154193.0703125, 154193.0703125, 154193.0703125, 154193.1953125, 154193.1953125, 154193.1953125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.4453125, 154193.453125, 154193.453125, 154193.453125, 154193.46484375, 154193.46484375, 154193.46875, 154193.4609375, 154193.4609375, 154193.46484375, 154193.46484375, 154193.46484375, 154193.46484375, 154193.46484375, 154193.65234375, 154193.65234375, 154193.77734375, 154193.83984375, 154193.83984375, 154193.83984375, 154193.85546875, 154193.87890625],
"free": [49590.43359375, 49590.43359375, 49590.43359375, 49590.30078125, 49590.30078125, 49590.30078125, 49590.18359375, 49589.93359375, 49589.93359375, 49589.93359375, 49589.93359375, 49589.93359375, 49589.93359375, 49589.93359375, 49589.93359375, 49589.93359375, 49589.92578125, 49589.92578125, 49589.92578125, 49589.92578125, 49589.92578125, 49589.92578125, 49589.92578125, 49589.80078125, 49589.80078125, 49589.80078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.55078125, 49589.54296875, 49589.54296875, 49589.54296875, 49589.53125, 49589.53125, 49589.52734375, 49589.53515625, 49589.53515625, 49589.53125, 49589.53125, 49589.53125, 49589.53125, 49589.53125, 49589.34375, 49589.34375, 49589.21875, 49589.15625, 49589.15625, 49589.15625, 49589.140625],
"total": [203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375, 203782.99609375],
"percent": [75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7, 75.7]
},
"D:\\": {
"used": [199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125, 199537.55078125],
"free": [60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125, 60843.4453125],
"total": [260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375, 260380.99609375],
"percent": [76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6, 76.6]
},
"E:\\": {
"used": [208008.25, 208008.25, 208008.25, 208008.25, 208008.25, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.625, 208008.6875, 208008.6875, 208008.6875, 208008.6875, 208008.6875, 208008.6875, 208008.6875],
"free": [201594.7265625, 201594.7265625, 201594.7265625, 201594.7265625, 201594.7265625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.3515625, 201594.2890625, 201594.2890625, 201594.2890625, 201594.2890625, 201594.2890625, 201594.2890625, 201594.2890625],
"total": [409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625, 409602.9765625],
"percent": [50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8, 50.8]
},
"F:\\": {
"used": [160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75, 160125.75],
"free": [147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375, 147076.24609375],
"total": [307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375, 307201.99609375],
"percent": [52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1, 52.1]
},
"G:\\": {
"used": [257195.28515625, 257195.28515625, 257195.28515625, 257195.28515625, 257195.28515625, 257195.28515625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.28515625, 257195.28515625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.41015625, 257195.41015625, 257195.41015625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625, 257195.34765625],
"free": [309078.7109375, 309078.7109375, 309078.7109375, 309078.7109375, 309078.7109375, 309078.7109375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.7109375, 309078.7109375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.5859375, 309078.5859375, 309078.5859375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375, 309078.6484375],
"total": [566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375, 566273.99609375],
"percent": [45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4, 45.4]
},
"H:\\": {
"used": [165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125, 165.95703125],
"free": [624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375, 624484.109375],
"total": [624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625, 624650.06640625],
"percent": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
}
},
"ram": {
"ram_used": [19.22, 19.23, 19.23, 19.25, 19.25, 19.26, 19.27, 19.26, 19.24, 19.25, 19.24, 19.24, 19.24, 19.21, 19.21, 19.2, 19.2, 19.19, 19.19, 19.19, 19.2, 19.2, 19.24, 19.25, 19.24, 19.27, 19.25, 19.26, 19.25, 19.24, 19.23, 19.24, 19.23, 19.22, 19.2, 19.2, 19.2, 19.19, 19.22, 19.21, 19.22, 19.21, 19.21, 19.22, 19.21, 19.19, 19.18, 19.2, 19.2, 19.2, 19.2, 19.21, 19.23, 19.23, 19.23, 19.27, 19.28, 19.3, 19.31, 19.38],
"ram_available": [12.53, 12.52, 12.52, 12.5, 12.5, 12.49, 12.47, 12.49, 12.51, 12.5, 12.5, 12.51, 12.51, 12.54, 12.54, 12.54, 12.55, 12.56, 12.56, 12.56, 12.55, 12.54, 12.51, 12.5, 12.51, 12.48, 12.5, 12.49, 12.5, 12.51, 12.52, 12.51, 12.52, 12.53, 12.54, 12.55, 12.55, 12.56, 12.53, 12.53, 12.53, 12.54, 12.53, 12.53, 12.54, 12.56, 12.57, 12.55, 12.55, 12.55, 12.55, 12.54, 12.51, 12.52, 12.51, 12.47, 12.47, 12.45, 12.44, 12.37],
"ram_total": [31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75, 31.75]
},
"battery": {
"battery_percent": [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
},
"cpu": {
"cpu_percent": [13.4, 13.5, 14.6, 15.5, 12.5, 20.1, 22.1, 16.7, 16.2, 16.6, 10.1, 11.8, 12.2, 17.1, 18.0, 15.3, 11.4, 12.6, 13.0, 14.1, 17.4, 14.3, 16.3, 14.7, 13.2, 19.9, 14.5, 17.6, 13.6, 13.4, 13.0, 15.9, 12.0, 13.9, 12.1, 11.3, 12.8, 14.7, 14.1, 16.3, 16.1, 13.9, 12.0, 13.9, 14.0, 13.1, 11.8, 13.7, 14.2, 19.9, 14.3, 12.6, 14.5, 16.1, 19.1, 14.0, 26.7, 15.5, 17.2, 29.8]
}
}
创建节点
let node = document.createElement('div') // 每个图各一个DIV
node.id = item + "_inner"
node.style.height = 500 + "px"
node.style.width = 100 + "%"
document.getElementById('要添加子节点的元素ID').appendChild(node)
遍历JSON节点
function get_info() {
$.ajax({
url: "http://localhost:8050/get_system_performance"
}).then(function(res) {
key = Object.keys(res)
for (var i = 0; i < key.length; i++) {
let category = key[i]
let c_item = res[category]
let key2 = Object.keys(c_item)
if (category !== 'disk') {
construct(category, category, c_item)
} else
for (var j = 0; j < key2.length; j++) {
let item_name = key2[j]
let item_val = c_item[item_name]
let key3 = Object.keys(item_val)
construct(category, item_name.replace(`:\\`, "盘"), item_val) \\ 这里因为符号原因导致querySelector报错，所以替换一下符号。 construct是自定义的方法
}
}
})
}
动态生成
function construct(cate, item, value) {
let RNode = document.getElementById(cate)
if (RNode == null) { // 根节点不存在，创建根节点
let node = document.createElement('div')
node.id = cate
document.getElementsByTagName('body')[0].appendChild(node)
RNode = document.getElementById(cate)
} else {
RNode = document.getElementById(cate)
}
if (RNode.querySelector("#" + item + "_inner") == null) {
let node = document.createElement('div') // 每个图各一个DIV
node.id = item + "_inner"
node.style.height = 500 + "px"
node.style.width = 100 + "%"
document.getElementById(cate).appendChild(node)
}
var chats = echarts.init(document.getElementById(item + "_inner"))
let obj = Object.keys(value)
let series = []
let legend = []
let idxdx = []
let min = 0
let max = 0
for (let i = 0; i < obj.length; i++) {
series.push({
name: obj[i],
type: 'line',
stack: 'Total',
data: value[obj[i]]
})
min = min < value[obj[i]].min ? min : value[obj[i]].min
max = max < value[obj[i]].max ? max : value[obj[i]].max
legend.push(obj[i])
idxdx = array_creator(value[obj[i]].length)
}
let opt = {
title: {
text: cate + (item == cate ? "" : "-" + item)
},
tooltip: {
trigger: 'axis'
},
legend: {
data: legend
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: idxdx
},
yAxis: {
type: 'value',
min: min - (max - min),
max: max + (max - min),
min: function(value) { //取最小值向下取整为最小刻度
return Math.floor(value.min)
},
max: function(value) { //取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
scale: true, //自适应
minInterval: 10, //分割刻度
axisLabel: {
fontSize: 13,
showMinLabel: false, //不显示最小刻度线值
showMaxLabel: false //不显示最大刻度线值
}
},
series: series
}
chats.setOption(opt);
}
效果
