图表2

描述:当前是关于Echarts图表中的 示例。
 
            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-"
        }
    ]
}