js 动态生成echarts

博主： zmx
发布时间：2022 年 12 月 27 日
780 次浏览
暂无评论
26254字数
分类：编程前端

引言

最近做了一个系统性能监视器，为了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);
  }

效果

# 引言

最近做了一个系统性能监视器，为了WEB页面的实现，并且简单的展示60秒内的性能信息，做了一个页面，当然，原生的JS是非常重要的基本功，尤其是操作DOM节点，这篇文章也使用到了`appendChild` 和 `createElement`。
<div class="tip inlineBlock share">

这里主要是思路，实现方式一定会有很多种。
</div>

# json信息

```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]
	}
}
```

# 创建节点

```javascript
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节点

```js
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是自定义的方法
          }
      }
    })
  }
```

# 动态生成

```js
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);
  }
```

# 效果

![image.png](https://www.zunmx.top/usr/uploads/2022/12/1774582849.png)