echarts模拟真实数据

当你打开的时候要显示当前的时间段数据，必须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>
echarts模拟真实数据

猜你喜欢
