Latency

描述:当前是关于Echarts图表中的 折线图 示例。
 
            var labelData = ["2017-8-6 21:53:10", "2017-8-6 21:53:11", "2017-8-6 21:53:12", "2017-8-6 21:53:13", "2017-8-6 21:53:14", "2017-8-6 21:53:15", "2017-8-6 21:53:16", "2017-8-6 21:53:17", "2017-8-6 21:53:18", "2017-8-6 21:53:19", "2017-8-6 21:53:20", "2017-8-6 21:53:21", "2017-8-6 21:53:22", "2017-8-6 21:53:23", "2017-8-6 21:53:24", "2017-8-6 21:53:25", "2017-8-6 21:53:26", "2017-8-6 21:53:27", "2017-8-6 21:53:28", "2017-8-6 21:53:29", "2017-8-6 21:53:30", "2017-8-6 21:53:31", "2017-8-6 21:53:32", "2017-8-6 21:53:33", "2017-8-6 21:53:34", "2017-8-6 21:53:35", "2017-8-6 21:53:36", "2017-8-6 21:53:37", "2017-8-6 21:53:38", "2017-8-6 21:53:39", "2017-8-6 21:53:40", "2017-8-6 21:53:41", "2017-8-6 21:53:42", "2017-8-6 21:53:43", "2017-8-6 21:53:44", "2017-8-6 21:53:45", "2017-8-6 21:53:46", "2017-8-6 21:53:47", "2017-8-6 21:53:48", "2017-8-6 21:53:49", "2017-8-6 21:53:50", "2017-8-6 21:53:51", "2017-8-6 21:53:52", "2017-8-6 21:53:53", "2017-8-6 21:53:54", "2017-8-6 21:53:55", "2017-8-6 21:53:56", "2017-8-6 21:53:57", "2017-8-6 21:53:58", "2017-8-6 21:53:59", "2017-8-6 21:54:0", "2017-8-6 21:54:1", "2017-8-6 21:54:2", "2017-8-6 21:54:3", "2017-8-6 21:54:4", "2017-8-6 21:54:5", "2017-8-6 21:54:6", "2017-8-6 21:54:7", "2017-8-6 21:54:8", "2017-8-6 21:54:9", "2017-8-6 21:54:10", "2017-8-6 21:54:11", "2017-8-6 21:54:12", "2017-8-6 21:54:13", "2017-8-6 21:54:14", "2017-8-6 21:54:15", "2017-8-6 21:54:16", "2017-8-6 21:54:17", "2017-8-6 21:54:18", "2017-8-6 21:54:19", "2017-8-6 21:54:20", "2017-8-6 21:54:21", "2017-8-6 21:54:22", "2017-8-6 21:54:23", "2017-8-6 21:54:24", "2017-8-6 21:54:25", "2017-8-6 21:54:26", "2017-8-6 21:54:27", "2017-8-6 21:54:28", "2017-8-6 21:54:29", "2017-8-6 21:54:30", "2017-8-6 21:54:31", "2017-8-6 21:54:32", "2017-8-6 21:54:33", "2017-8-6 21:54:34", "2017-8-6 21:54:35", "2017-8-6 21:54:36", "2017-8-6 21:54:37", "2017-8-6 21:54:38", "2017-8-6 21:54:39", "2017-8-6 21:54:40", "2017-8-6 21:54:41", "2017-8-6 21:54:42", "2017-8-6 21:54:43", "2017-8-6 21:54:44", "2017-8-6 21:54:45", "2017-8-6 21:54:46", "2017-8-6 21:54:47", "2017-8-6 21:54:48", "2017-8-6 21:54:49", "2017-8-6 21:54:50", "2017-8-6 21:54:51", "2017-8-6 21:54:52", "2017-8-6 21:54:53", "2017-8-6 21:54:54", "2017-8-6 21:54:55", "2017-8-6 21:54:56", "2017-8-6 21:54:57", "2017-8-6 21:54:58", "2017-8-6 21:54:59", "2017-8-6 21:55:0", "2017-8-6 21:55:1", "2017-8-6 21:55:2", "2017-8-6 21:55:3", "2017-8-6 21:55:4", "2017-8-6 21:55:5", "2017-8-6 21:55:6", "2017-8-6 21:55:7", "2017-8-6 21:55:8", "2017-8-6 21:55:9", "2017-8-6 21:55:10", "2017-8-6 21:55:11", "2017-8-6 21:55:12", "2017-8-6 21:55:13", "2017-8-6 21:55:14", "2017-8-6 21:55:15", "2017-8-6 21:55:16", "2017-8-6 21:55:17", "2017-8-6 21:55:18", "2017-8-6 21:55:19", "2017-8-6 21:55:20", "2017-8-6 21:55:21", "2017-8-6 21:55:22", "2017-8-6 21:55:23", "2017-8-6 21:55:24", "2017-8-6 21:55:25", "2017-8-6 21:55:26", "2017-8-6 21:55:27", "2017-8-6 21:55:28", "2017-8-6 21:55:29", "2017-8-6 21:55:30", "2017-8-6 21:55:31", "2017-8-6 21:55:32", "2017-8-6 21:55:33", "2017-8-6 21:55:34", "2017-8-6 21:55:35", "2017-8-6 21:55:36", "2017-8-6 21:55:37", "2017-8-6 21:55:38", "2017-8-6 21:55:39", "2017-8-6 21:55:40", "2017-8-6 21:55:41", "2017-8-6 21:55:42", "2017-8-6 21:55:43", "2017-8-6 21:55:44", "2017-8-6 21:55:45", "2017-8-6 21:55:46", "2017-8-6 21:55:47", "2017-8-6 21:55:48", "2017-8-6 21:55:49", "2017-8-6 21:55:50", "2017-8-6 21:55:51", "2017-8-6 21:55:52", "2017-8-6 21:55:53", "2017-8-6 21:55:54", "2017-8-6 21:55:55", "2017-8-6 21:55:56", "2017-8-6 21:55:57", "2017-8-6 21:55:58", "2017-8-6 21:55:59", "2017-8-6 21:56:0", "2017-8-6 21:56:1", "2017-8-6 21:56:2", "2017-8-6 21:56:3", "2017-8-6 21:56:4", "2017-8-6 21:56:5", "2017-8-6 21:56:6", "2017-8-6 21:56:7", "2017-8-6 21:56:8", "2017-8-6 21:56:9", "2017-8-6 21:56:10", "2017-8-6 21:56:11", "2017-8-6 21:56:12", "2017-8-6 21:56:13", "2017-8-6 21:56:14", "2017-8-6 21:56:15", "2017-8-6 21:56:16", "2017-8-6 21:56:17", "2017-8-6 21:56:18", "2017-8-6 21:56:19", "2017-8-6 21:56:20", "2017-8-6 21:56:21", "2017-8-6 21:56:22", "2017-8-6 21:56:23", "2017-8-6 21:56:24", "2017-8-6 21:56:25", "2017-8-6 21:56:26", "2017-8-6 21:56:27", "2017-8-6 21:56:28", "2017-8-6 21:56:29", "2017-8-6 21:56:30", "2017-8-6 21:56:31", "2017-8-6 21:56:32", "2017-8-6 21:56:33", "2017-8-6 21:56:34", "2017-8-6 21:56:35", "2017-8-6 21:56:36", "2017-8-6 21:56:37", "2017-8-6 21:56:38", "2017-8-6 21:56:39", "2017-8-6 21:56:40", "2017-8-6 21:56:41", "2017-8-6 21:56:42", "2017-8-6 21:56:43", "2017-8-6 21:56:44", "2017-8-6 21:56:45", "2017-8-6 21:56:46", "2017-8-6 21:56:47", "2017-8-6 21:56:48", "2017-8-6 21:56:49", "2017-8-6 21:56:50", "2017-8-6 21:56:51", "2017-8-6 21:56:52", "2017-8-6 21:56:53", "2017-8-6 21:56:54", "2017-8-6 21:56:55", "2017-8-6 21:56:56", "2017-8-6 21:56:57", "2017-8-6 21:56:58", "2017-8-6 21:56:59", "2017-8-6 21:57:0", "2017-8-6 21:57:1", "2017-8-6 21:57:2", "2017-8-6 21:57:3", "2017-8-6 21:57:4", "2017-8-6 21:57:5", "2017-8-6 21:57:6", "2017-8-6 21:57:7", "2017-8-6 21:57:8", "2017-8-6 21:57:9", "2017-8-6 21:57:10", "2017-8-6 21:57:11", "2017-8-6 21:57:12", "2017-8-6 21:57:13", "2017-8-6 21:57:14", "2017-8-6 21:57:15", "2017-8-6 21:57:16", "2017-8-6 21:57:17", "2017-8-6 21:57:18", "2017-8-6 21:57:19", "2017-8-6 21:57:20", "2017-8-6 21:57:21", "2017-8-6 21:57:22", "2017-8-6 21:57:23", "2017-8-6 21:57:24", "2017-8-6 21:57:25", "2017-8-6 21:57:26", "2017-8-6 21:57:27", "2017-8-6 21:57:28", "2017-8-6 21:57:29", "2017-8-6 21:57:30", "2017-8-6 21:57:31", "2017-8-6 21:57:32", "2017-8-6 21:57:33", "2017-8-6 21:57:34", "2017-8-6 21:57:35", "2017-8-6 21:57:36", "2017-8-6 21:57:37", "2017-8-6 21:57:38", "2017-8-6 21:57:39", "2017-8-6 21:57:40", "2017-8-6 21:57:41", "2017-8-6 21:57:42", "2017-8-6 21:57:43", "2017-8-6 21:57:44", "2017-8-6 21:57:45", "2017-8-6 21:57:46", "2017-8-6 21:57:47", "2017-8-6 21:57:48", "2017-8-6 21:57:49", "2017-8-6 21:57:50", "2017-8-6 21:57:51", "2017-8-6 21:57:52", "2017-8-6 21:57:53", "2017-8-6 21:57:54", "2017-8-6 21:57:55", "2017-8-6 21:57:56", "2017-8-6 21:57:57", "2017-8-6 21:57:58", "2017-8-6 21:57:59", "2017-8-6 21:58:0", "2017-8-6 21:58:1", "2017-8-6 21:58:2", "2017-8-6 21:58:3", "2017-8-6 21:58:4", "2017-8-6 21:58:5", "2017-8-6 21:58:6", "2017-8-6 21:58:7", "2017-8-6 21:58:8", "2017-8-6 21:58:9", "2017-8-6 21:58:10"]
//var serie1Data1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.000007220216606498195,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.0000036101083032490977,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.0000036101083032490977,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.0000036101083032490977,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.000007220216606498195,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.000007220216606498195,0,0,0,0,0,0,0,0,0,0,0,0,0];
//var serie1Data2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.0000036101083032490977,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.0000036101083032490977,0,0,0,0,0,0,0,0,0,0,0,0,0];
//alert(labelData.length + "," + serie1Data1.length + "," + serie1Data2.length);
var serie1Data1 = [];
var serie1Data2 = [];
for(var i = 0; i< 301; i++) {
    serie1Data1.push(0);
    serie1Data2.push(0);
}
option = {
    "title": {
        "text": "Latency"
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow",
            "label": {
                "show": true,
                "backgroundColor": "#333"
            }
        }
    },
    "toolbox": {
        "show": true,
        "feature": {
            "magicType": {
                "type": ["line", "bar"]
            },
            "restore": {},
            "saveAsImage": {}
        }
    },
    "xAxis": {
        "type": "category",
        "boundaryGap": false,
        "data":labelData
    },
    "yAxis": {
        "type": "value",
        "axisLabel": {
            "formatter": "{value}"
        }
    },
    "dataZoom": {
        "type": "inside"
    },
    "series": [{
        "name": "ApplyLatency",
        "type": "line",
        "data": serie1Data2,
        "showSymbol": true,
        "hoverAnimation": true,
        "smooth": true,
        "markPoint": {
            "symbolSize": 20,
            "itemStyle": {
                "normal": {
                    "label": {
                        "show": false
                    }
                },
                "emphasis": {
                    "borderColor": "#1e90ff",
                    "borderWidth": 5,
                    "label": {
                        "show": false
                    }
                }
            },
            "effect": {
                "show": true,
                "shadowBlur": 0
            },
            "data": [{
                "type": "max",
                "name": "最大值"
            }, {
                "type": "min",
                "name": "最小值"
            }]
        }
    }, {
        "name": "CommitLatency",
        "type": "line",
        "data": serie1Data1,
        "showSymbol": true,
        "hoverAnimation": true,
        "smooth": true,
        "markPoint": {
            "symbolSize": 20,
            "itemStyle": {
                "normal": {
                    "label": {
                        "show": false
                    }
                },
                "emphasis": {
                    "borderColor": "#1e90ff",
                    "borderWidth": 5,
                    "label": {
                        "show": false
                    }
                }
            },
            "effect": {
                "show": true,
                "shadowBlur": 0
            },
            "data": [{
                "type": "max",
                "name": "最大值"
            }, {
                "type": "min",
                "name": "最小值"
            }]
        }
    }],
    "color": ["#01a1fe", "#ff3703"]

};