echarts模擬真實資料
阿新 • • 發佈：2018-11-09
當你開啟的時候要顯示當前的時間段資料，必須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>