js随机生成模拟数据

最新推荐文章于 2024-05-17 17:28:26 发布

愤怒的红裤衩

最新推荐文章于 2024-05-17 17:28:26 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： javascript echarts

本文链接：https://blog.csdn.net/weixin_38011359/article/details/70415916

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用js写了个数据模拟,并通过echarts折线图查看数据效果,刷新即可更新数据

<script type="text/javascript">
//创建指定范围个数的随机数据
function createAutoData(count,max,min){
    var autoData = new Array();
    var Range = max - min;
    for(var i=0;i<count;i++){
        var Rand = Math.random();   
        autoData.push(min + Math.round(Rand * Range));   
    }
    return autoData;
}
function createEcharts(){
    var myChart = echarts.init(document.getElementById('main'), 'default');
    var option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
               data:[]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {

                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['12:10','12:20','12:30','12:40','12:50','13:00','13:10']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                        formatter: '{value} ms'
                    },
                splitNumber:10
            },
            series: []
        };

        myChart.setOption(option);

        for(var i=0;i<5;i++){
            var autoData = createAutoData(7,50,10);
            console.log(autoData);
            option.legend.data.push('test'+i);
            option.series.push({
                name: 'test'+i,                            // 系列名称
                type: 'line',                           // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                data: autoData,
                smooth:true
            });
            myChart.setOption(option);
        }
}
</script>  

<html>
<body onload="createEcharts()">
<div id="main" style="height:200px;width:700px;"></div>
</body>
</html