当你打开的时候要显示当前的时间段数据,必须5分钟一次数据,数据必须是在某个时间段达到高峰还不能超过多少,某个时间段又必须低估。开始也是很苦恼,但是后来还是根据echarts案例里面原本人家就是模拟的数据得到灵感,我也做了一个所以感兴趣或有需要的小伙盼儿可以看看,说不定能获得一些灵感。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts-en.min.js"></script> </head> <body> <div id="f_broadband" style="width: 800px;height: 300px;"></div> <script> var f_broadband= echarts.init(document.getElementById('f_broadband')); /***********重点在这一块儿***********************/ var date=new Date(); var data = []; for(var i=0; i<1000;i++){ date=new Date(date-300*1000); //每隔5分钟获取一次值 var m=date.getHours(); //不同时间段峰值要不一样 var value=0; console.log(m) if(m<=8){ value=Math.random()*(200-i+1)+i; //上班之前低峰期 }else if(8<m<=12){ value=Math.random()*(2450-i+1)+i; //上班时间高峰期 }else if(12<m<=15){ value=Math.floor(Math.random()*300+1) //休息吃饭时间 }else if(14<m<=17){ value=Math.random()*(2350-i+1)+i; //上班时间高峰期 }else{ value=Math.floor(Math.random()*200+1); //下班了低峰期 } data.push({ name:date, value:[date,Math.round(value)] }) } var option = { backgroundColor:"black", title : { text: '带宽占用情况', top:"10px", left:"45%", textStyle:{ color:"#fff" } }, tooltip: { trigger: 'axis', formatter: function (params) {/**这里也是一个小重点,可以自己设置样式的案例,更前几个一样**/ params = params[0]; var date = new Date(params.name); var h=date.getHours(); //获取当前小时数(0-23) var m= date.getMinutes(); //获取当前分钟数(0-59) var s=date.getSeconds(); return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate()+ "\n"+(h<10?"0"+h:h)+":"+(m<10?"0"+m:m)+":"+(s<10?"0"+s:s)+"\n带宽:"+ params.value[1]; // return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]; }, axisPointer: { animation: false } }, grid: { left: '7%', right: '6%', bottom: '6%', // padding:'0 0 10 0', containLabel: true, }, xAxis: { type: 'time', splitLine: { show: false }, axisLabel: { textStyle: { fontSize: 14, color: '#eeeeee' } } }, yAxis : [ { type : 'value', name:"域名带宽(Mbps)", nameTextStyle:{ color:"#fff" }, splitLine: { show: true, lineStyle: { color: '#3a4b61' } }, axisLabel: { textStyle: { fontSize: 14, color: '#eeeeee' } } } ], dataZoom: [ { type: 'inside', start: 90, end: 100 }, { start: 90, end: 100, height:8, bottom:"3%", handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', handleSize: '80%', textStyle:{ color:"#fff" }, handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }], series: [ { data: data, type: 'line', showSymbol: false, smooth: true, itemStyle: { normal: { color: "#f0817a" }, }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#f07a65' }, { offset: 0.7, color: '#ffc0c3' }]) } }, } ] }; f_broadband.setOption(option); </script> </body> </html>