图表参考一echarts 配置项内容和展示
配置项如下
option = option = {
"color": [
"#0072FF",
"#26B56F"
],
"tooltip": {
"trigger": "axis",
"borderColor": "rgba(232, 232, 232, 0.98)",
"backgroundColor": "rgba(255,255,255,1)",
"padding": 0,
"textStyle": {
"color": "#2E2E33",
"fontSize": 12,
"lineHeight": 27
},
"axisPointer": {
"lineStyle": {
"color": "rgba(192, 192, 192, 1)"
}
}
},
"axisPointer": {
"link": [
{
"xAxisIndex": "all"
}
]
},
"legend": {
"bottom": 16,
"icon": "circle",
"type": "scroll",
"itemGap": 32,
"itemHeight": 8,
"itemWidth": 8,
"textStyle": {
"color": "#6f7078",
"fontSize": 12
}
},
"grid": {
"bottom": 50,
"right": 24,
"left": 24,
"top": 90,
"containLabel": true
},
"dataZoom": [
{
"show": false,
"realtime": true,
"throttle": 500,
"height": 10,
"bottom": 41,
"backgroundColor": "#e2e2e2",
"handleIcon": "M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z",
"handleColor": "#aab6c6",
"handleSize": 20,
"handleStyle": {
"borderColor": "#aab6c6",
"shadowBlur": 4,
"shadowOffsetX": 1,
"shadowOffsetY": 1,
"shadowColor": "#e5e5e5"
},
"textStyle": {
"color": "#fff0",
"textBorderColor": "#fff0"
}
},
{
"type": "inside",
"zoomLock": true,
"realtime": true
}
],
"visualMap": [
{
"show": false,
"seriesIndex": 0,
"dimension": 1,
"orient": "horizontal",
"left": "center",
"textStyle": {
"color": "#6F7078",
"fontFamily": "Microsoft YaHei"
},
"pieces": [
{
"gte": 0,
"lt": 30,
"label": "延迟",
"color": "#0072FF",
"symbol": "circle"
},
{
"gte": 30,
"color": "#DD0538",
"label": "高延迟",
"symbol": "circle"
}
]
},
{
"show": false,
"seriesIndex": 1,
"dimension": 1,
"orient": "horizontal",
"left": "center",
"textStyle": {
"color": "#6F7078",
"fontFamily": "Microsoft YaHei"
},
"pieces": [
{
"gte": 0,
"lt": 80,
"label": "延迟",
"color": "#26B56F",
"symbol": "circle"
},
{
"gte": 80,
"color": "#DD0538",
"label": "高延迟",
"symbol": "circle"
}
]
}
],
"xAxis": {
"data": [
1623390836,
1623390845,
1623390854,
1623390863,
1623390872,
1623390881,
1623390890,
1623390899,
1623390908,
1623390917,
1623390926,
1623390935,
1623390944,
1623390953,
1623390962,
1623390971,
1623390980,
1623390989,
1623390998,
1623391007,
1623391016,
1623391025,
1623391034,
1623391043,
1623391052,
1623391061,
1623391070,
1623391079,
1623391088,
1623391097,
1623391106,
1623391115,
1623391124,
1623391133,
1623391142,
1623391151,
1623391160,
1623391169,
1623391178,
1623391187,
1623391196,
1623391205,
1623391214,
1623391223,
1623391232,
1623391241,
1623391250,
1623391259,
1623391268,
1623391277,
1623391286,
1623391295,
1623391304,
1623391313,
1623391322,
1623391331,
1623391340,
1623391349,
1623391358,
1623391367,
1623391376,
1623391385,
1623391394,
1623391403,
1623391412,
1623391421,
1623391430,
1623391439,
1623391448,
1623391457,
1623391466,
1623391475,
1623391484,
1623391493,
1623391502,
1623391511,
1623391520,
1623391529,
1623391538,
1623391547,
1623391556,
1623391565,
1623391574,
1623391583,
1623391592,
1623391601,
1623391610,
1623391619,
1623391628,
1623391637,
1623391646,
1623391655,
1623391664,
1623391673,
1623391682,
1623391691,
1623391700,
1623391709,
1623391718,
1623391727,
1623391736,
1623391745,
1623391754,
1623391763,
1623391772,
1623391781,
1623391790,
1623391799,
1623391808,
1623391817,
1623391826,
1623391835,
1623391844,
1623391853,
1623391862,
1623391871,
1623391880,
1623391889,
1623391898,
1623391907,
1623391916,
1623391925,
1623391934,
1623391943,
1623391952,
1623391961,
1623391970,
1623391979,
1623391988,
1623391997,
1623392006,
1623392024,
1623392033,
1623392041,
1623392049,
1623392057,
1623392065,
1623392073,
1623392081,
1623392096,
1623392104,
1623392112,
1623392120,
1623392128,
1623392136,
1623392144,
1623392159,
1623392167,
1623392175,
1623392183,
1623392191,
1623392199,
1623392207,
1623392222,
1623392230,
1623392238,
1623392246,
1623392254,
1623392262,
1623392270,
1623392285,
1623392292,
1623392299,
1623392306,
1623392324,
1623392333,
1623392342,
1623392351,
1623392360,
1623392369,
1623392378,
1623392387,
1623392396,
1623392405,
1623392414,
1623392423,
1623392432,
1623392441,
1623392450,
1623392459
],
"type": "category",
"boundaryGap": false,
"axisLine": {
"lineStyle": {
"color": "#F0F4FA"
}
},
"axisPointer": {
"show": true,
"type": "line",
"label": {
"show": false
},
"lineStyle": {
"width": 0.5
}
},
"axisLabel": {
"color": "#9A9CA2",
"align": "center",
"rich": {
"right": {
"padding": [
0,
20,
0,
0
]
},
"left": {
"padding": [
0,
0,
0,
30
]
}
}
}
},
"yAxis": {
"type": "value",
"axisLine": {
"show": false,
"lineStyle": {
"color": "#F0F4FA"
}
},
"splitNumber": 2,
"axisLabel": {
"color": "#9A9CA2",
"formatter": function(value) {
return Math.abs(value);
}, // 将y轴显示的数据取绝对值
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"rgba(0, 114, 255, 0.2)"
],
"width": 1,
"type": "dashed"
}
},
"min": -60,
"max": 62,
"interval": 31
},
"series": [
{
"name": "系统CPU使用率",
"type": "line",
"smooth": true,
"symbol": "circle",
"showSymbol": false,
"symbolSize": 10,
"hoverAnimation": false,
"itemStyle": {
"normal": {
"opacity": 1,
"borderWidth": 1,
"color": "#0072FF"
},
"emphasis": {
"borderColor": "#fff",
"borderWidth": 2,
"shadowBlur": 2,
"shadowColor": "#E8E8E8"
}
},
"areaStyle": {
"opacity": 0.1
},
"lineStyle": {},
"dataName": "sys_cpu_used",
"color": "",
"backgroundColor": "#0072FF",
"tooltipDotImagesColor": "blue",
"max": 61,
"min": 0,
"data": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
51,
43,
35,
61,
39,
37,
38,
8,
8,
7,
8,
6,
6,
9,
16,
7,
7,
7,
6,
8,
8,
7,
6,
6,
38,
47,
41,
32,
31,
33,
33,
36,
35,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
],
"id": "sys_cpu_used-%"
},
{
"name": "App CPU使用率",
"type": "line",
"smooth": true,
"symbol": "circle",
"showSymbol": false,
"symbolSize": 10,
"hoverAnimation": false,
"itemStyle": {
"normal": {
"opacity": 1,
"borderWidth": 1,
"color": "#26B56F"
},
"emphasis": {
"borderColor": "#fff",
"borderWidth": 2,
"shadowBlur": 2,
"shadowColor": "#E8E8E8"
}
},
"areaStyle": {
"opacity": 0.1
},
"lineStyle": {},
"backgroundColor": "#26B56F",
"dataName": "app_cpu_used",
"tooltipDotImagesColor": "green",
"color": "",
"max": 50,
"min": 0,
"data": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
31,
33,
24,
28,
31,
32,
10,
5,
5,
5,
5,
5,
5,
4,
4,
5,
5,
5,
5,
6,
5,
5,
5,
5,
29,
31,
28,
25,
-25,
-20,
-25,
-31,
-30,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
],
"id": "app_cpu_used-%"
},
{
"name": "高占用",
"type": "line",
"smooth": true,
"symbol": "circle",
"showSymbol": false,
"symbolSize": 10,
"hoverAnimation": false,
"itemStyle": {
"normal": {
"opacity": 1,
"borderWidth": 1,
"color": "rgba(221, 5, 56, 1)"
},
"emphasis": {
"borderColor": "#fff",
"borderWidth": 2,
"shadowBlur": 2,
"shadowColor": "#E8E8E8"
}
},
"areaStyle": {
"opacity": 0.1
},
"lineStyle": {},
"isActive": true,
"backgroundColor": "rgba(221, 5, 56, 1)",
"isShow": true,
"data": null
}
]
}
截图如下
