通过echarts.js画24小时流量监控图

echarts.js官网链接

https://echarts.baidu.com/index.html

效果图片

代码示例

$.post("/network_manage/get_speed",function(data){
			var myChart = echarts.init(document.getElementById('chart_img'));
			option = {
				title: {
					text: '24小时流量监控图',//图片标题
				},
				legend:{
					icon:'rect',//标记图标，方形
				},
				tooltip: { //focus显示内容
					trigger: 'axis',
					formatter: function (params) {
						var tmpparams = params[1];
						params = params[0];
						if(tmpparams)
						{
							return params.value[0] + '</br>'+params.seriesName+':' + params.value[1] + "kb/s"+'</br>'+tmpparams.seriesName+':' + tmpparams.value[1] + "kb/s";
						}
						return params.value[0] + '</br>'+params.seriesName+':' + params.value[1] + "kb/s";
					},
					axisPointer: {
						animation: false
					},
				},
				xAxis: { //x轴,类型为日期格式，故在数据中添加了一个24小时的数组，以调整x坐标系显示数据
					name:'时间',
					nameGap:30,
					nameTextStyle:{
						padding:[15,0,0,0],
						fontSize:14,
					},
					type: 'time',
					maxInterval: 3600*2*1000,
					min:data.time[0][0],
					max:data.time[1][0],
					splitLine: { //显示分割线
						show: false
					},
				},
				yAxis: { //y轴，添加留白策略数据变多时y轴突然拉的比较长
					name:'bits per second(kb/s)',
					nameLocation:'center',
					nameGap:30,
					type: 'value',
					min:0,
					// boundaryGap: [0, '30%'],//坐标轴两边留白策略
					splitLine: {
						show: false
					}
				},
				dataZoom: [	//局部显示插件
					{
					start: 80,                               //数据窗口范围的起始百分比,表示%
					end: 100,  
					type: 'slider',                          //slider表示有滑动块的，inside表示内置的
					backgroundColor:"rgb(252,252,252)",
					fillerColor:"rgba(167,183,204,0.5)",     //选中范围的填充颜色。
					showDataShadow: false,	 //是否显示数据阴影
					orient:"horizontal",     //缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平|x'vertical'：竖直|y。
					height:20,		
					bottom:5,
					},{
					type: 'slider',                         
					orient:"vertical",                
					showDataShadow: false, 
					width:20,
					}
					],
				series: [{	//数据
					name: '入口网速',
					type: 'line',
					step:true, //是否支持骤变，false有段数据为空时为渐变
					showSymbol: false,
					hoverAnimation: false,
					data: data.in_speed,
					areaStyle: {},
					lineStyle:{
						opacity:0,
					},
					itemStyle:{
						color:'rgb(0,204,0)',
					},
					
				},
				{
					name: '出口网速',
					type: 'line',
					showSymbol: false,
					hoverAnimation: false,
					data: data.out_speed,
					// lineStyle:{
					// 	opacity:0.7,
					// 	color:'rgb(0,0,225)'
					// },
					itemStyle:{
						opacity:0.7,
						color:'rgb(0,0,225)',
					}
				},
				{
					type: 'line',
					tooltip:{trigger:'none'}, 
					data:data.time,//数据格式[[2019-07-04 15:20:12,-1],[2019-07-05 15:20:12,-1]]
				}]
			};
			myChart.setOption(option);
		},"json");

努力的生活着

一个非常强大的前端画图框架，文档相对来说也比较详细，参数太多找起来挺难受的。