图表2echarts 配置项内容和展示
配置项如下
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": 56,
"right": 24,
"left": 24,
"top": 60,
"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": [],
"xAxis": {
"data": [
1623390836,
1623390844,
1623390852,
1623390860,
1623390868,
1623390876,
1623390884,
1623390899,
1623390907,
1623390915,
1623390923,
1623390931,
1623390939,
1623390947,
1623390962,
1623390970,
1623390978,
1623390986,
1623390994,
1623391002,
1623391010,
1623391025,
1623391033,
1623391041,
1623391049,
1623391057,
1623391065,
1623391073,
1623391088,
1623391096,
1623391104,
1623391112,
1623391120,
1623391128,
1623391136,
1623391151,
1623391159,
1623391167,
1623391175,
1623391183,
1623391191,
1623391199,
1623391214,
1623391222,
1623391230,
1623391238,
1623391246,
1623391254,
1623391262,
1623391277,
1623391285,
1623391293,
1623391301,
1623391309,
1623391317,
1623391325,
1623391341,
1623391349,
1623391357,
1623391365,
1623391373,
1623391381,
1623391389,
1623391404,
1623391412,
1623391420,
1623391428,
1623391436,
1623391444,
1623391452,
1623391467,
1623391475,
1623391483,
1623391491,
1623391499,
1623391507,
1623391515,
1623391530,
1623391538,
1623391546,
1623391554,
1623391562,
1623391570,
1623391578,
1623391586,
1623391594,
1623391602,
1623391610,
1623391618,
1623391626,
1623391634,
1623391642,
1623391650,
1623391658,
1623391666,
1623391674,
1623391681,
1623391689,
1623391697,
1623391705,
1623391713,
1623391721,
1623391729,
1623391744,
1623391752,
1623391760,
1623391768,
1623391776,
1623391784,
1623391792,
1623391807,
1623391815,
1623391823,
1623391831,
1623391839,
1623391847,
1623391855,
1623391870,
1623391878,
1623391886,
1623391894,
1623391902,
1623391910,
1623391918,
1623391933,
1623391941,
1623391949,
1623391957,
1623391965,
1623391973,
1623391981,
1623391996,
1623392003,
1623392010,
1623392017,
1623392032,
1623392040,
1623392048,
1623392056,
1623392064,
1623392072,
1623392080,
1623392096,
1623392104,
1623392112,
1623392120,
1623392128,
1623392136,
1623392144,
1623392159,
1623392167,
1623392175,
1623392183,
1623392191,
1623392199,
1623392207,
1623392222,
1623392230,
1623392238,
1623392246,
1623392254,
1623392262,
1623392270,
1623392285,
1623392293,
1623392301,
1623392309,
1623392317,
1623392325,
1623392333,
1623392348,
1623392356,
1623392364,
1623392372,
1623392380,
1623392388,
1623392396,
1623392411,
1623392419,
1623392427,
1623392435,
1623392443,
1623392451,
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": 5,
"axisLabel": {
"color": "#9A9CA2",
"formatter": function(value) {
return Math.abs(value);
},
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"rgba(0, 114, 255, 0.2)"
],
"width": 1,
"type": "dashed"
}
},
"min": -72,
"max": 72,
"interval": 24
},
"series": [
{
"name": "目标码率",
"type": "line",
"smooth": true,
"symbol": "circle",
"showSymbol": false,
"symbolSize": 10,
"hoverAnimation": false,
"itemStyle": {
"normal": {
"opacity": 1,
"borderWidth": 1,
"color": "#9A9CA1"
},
"emphasis": {
"borderColor": "#fff",
"borderWidth": 2,
"shadowBlur": 2,
"shadowColor": "#E8E8E8"
}
},
"areaStyle": {
"opacity": 0.1
},
"lineStyle": {},
"isActive": true,
"backgroundColor": "#9A9CA1",
"isShow": true,
"data": null
},
{
"name": "目标码率",
"type": "line",
"smooth": true,
"symbol": "circle",
"showSymbol": false,
"symbolSize": 10,
"hoverAnimation": false,
"itemStyle": {
"normal": {
"opacity": 1,
"borderWidth": 1,
"color": "#9A9CA1"
},
"emphasis": {
"borderColor": "#fff",
"borderWidth": 2,
"shadowBlur": 2,
"shadowColor": "#E8E8E8"
}
},
"areaStyle": {
"opacity": 0.1
},
"lineStyle": {},
"isActive": true,
"backgroundColor": "#9A9CA1",
"isShow": true,
"data": null
},
{
"name": "视频发送码率",
"type": "line",
"smooth": true,
"symbol": "circle",
"showSymbol": false,
"symbolSize": 10,
"hoverAnimation": false,
"itemStyle": {
"normal": {
"opacity": 1,
"borderWidth": 1,
"color": "#0072FF"
},
"emphasis": {
"color": "rgba(0, 114, 255, 1)",
"borderColor": "#fff",
"borderWidth": 2,
"shadowBlur": 2,
"shadowColor": "#E8E8E8"
}
},
"areaStyle": {
"opacity": 0.1
},
"lineStyle": {
"color": "rgba(0, 114, 255, 1)"
},
"backgroundColor": "#0072FF",
"dataName": "video_bitrate",
"color": "blue",
"markLineValue": "video_bitrate_target_value",
"max": 1,
"min": 0,
"data": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"id": "video_bitrate-kbps"
},
{
"name": "音频发送码率",
"type": "line",
"smooth": true,
"symbol": "circle",
"showSymbol": false,
"symbolSize": 10,
"hoverAnimation": false,
"itemStyle": {
"normal": {
"opacity": 1,
"borderWidth": 1,
"color": "#26B56F"
},
"emphasis": {
"color": "rgba(38, 181, 111, 1)",
"borderColor": "#fff",
"borderWidth": 2,
"shadowBlur": 2,
"shadowColor": "#E8E8E8"
}
},
"areaStyle": {
"opacity": 0.1
},
"lineStyle": {
"color": "rgba(38, 181, 111, 1)"
},
"backgroundColor": "#26B56F",
"dataName": "audio_bitrate",
"color": "green",
"markLineValue": "audio_bitrate_target_value",
"isSpecialData": [
"contrast"
],
"max": 58,
"min": -58,
"data": [
-57,
0,
-57,
-57,
-57,
-56,
-57,
-57,
-56,
-57,
-57,
-57,
-58,
-57,
-57,
-56,
-57,
-57,
-57,
-57,
-56,
-57,
-57,
-57,
-57,
-57,
-57,
-57,
-57,
-56,
-57,
-56,
-56,
-57,
-57,
-55,
-57,
-56,
-56,
-56,
-56,
-56,
-57,
-57,
-56,
-57,
-57,
-57,
-56,
-56,
-57,
-57,
-56,
-57,
-57,
-57,
-58,
-57,
-56,
-56,
-58,
-57,
-57,
-56,
-56,
-56,
-57,
-57,
-57,
-56,
-57,
-57,
-57,
-55,
-57,
-57,
-57,
-56,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
-57,
-57,
-57,
-57,
-57,
-57,
-53,
-52,
-52,
-57,
-57,
-57,
-57,
-54,
-56,
-57,
-54,
-57,
-56,
-56,
-57,
-56,
-57,
-57,
-55,
-57,
-56,
-56,
-56,
-57,
-57,
-56,
-56,
-57,
-57,
-57,
-56,
-56,
-52,
-52,
-57,
-56,
-57,
-57,
-57,
-56,
-57,
-57,
-57,
-56,
-57,
-56,
-58,
-57,
-58,
-57,
-56,
-57,
-57,
-57,
-57,
-57,
-57,
-57,
-57,
-57,
-56,
-56,
-56,
-57,
-57,
-56,
-57,
-57,
-57,
-57,
-56,
-56,
-57,
-57,
-57,
-57,
-57,
-57,
-57,
-56,
-57,
-57
],
"id": "audio_bitrate-Kbps"
},
{
"name": "编码分辨率",
"type": "scatter",
"smooth": true,
"symbol": "emptyCircle",
"showSymbol": true,
"symbolSize": 8,
"hoverAnimation": false,
"itemStyle": {
"normal": {
"opacity": 1,
"borderWidth": 2,
"color": "#FFA800"
},
"emphasis": {
"color": "rgba(255, 168, 0, 1)",
"borderColor": "#fff",
"borderWidth": 0.5,
"shadowBlur": 2,
"shadowColor": "#E8E8E8"
}
},
"areaStyle": {
"opacity": 0
},
"lineStyle": {
"color": "rgba(255, 0, 0, 0)"
},
"backgroundColor": "#FFA800",
"dataName": "encode_resolution",
"isSpecialData": [
"encode"
],
"color": "emptyCircle",
"max": 1,
"min": 0,
"data": [
{
"value": [
"1623390836",
0
],
"encodeValue": "360*640"
},
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
{
"value": [
"1623391681",
0
],
"encodeValue": "360*640"
}
],
"id": "encode_resolution-"
}
]
}
截图如下
