通过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");
努力的生活着
一个非常强大的前端画图框架,文档相对来说也比较详细,参数太多找起来挺难受的。