echarts图表动态化

一、原理

通过 setInterval设定每隔多长时间产生一组随机数据,并且将数据放入图表对应位置上,重新渲染,以此达到图表的动态化

二、直接上代码,每一条的解释都在注释里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.js的路径"></script>
    <script type="text/javascript" src="jquery-3.4.1.js的路径"></script>
</head>
<body>

<div id="main" style="height:600px"></div>
</body>
<script>
    var myChart;
    //初始化
    myChart = echarts.init(document.getElementById('main'));

	//原本的流程是 配置->渲染 现在为了减少代码量,采用直接渲染的方式,配置也放在setOption中
    myChart.setOption({
        title: {
            text: 'test'
        },
        //X轴上的数据
        xAxis: {
            data: ["温度传感器","光照传感器","压力传感器","加速度传感器"]
        },
        yAxis: {},
        //配置项
        series: [{
            name: '销量',
            //指定图表的类型 柱状图、散点图、等等
            type: 'bar',
            //对应X轴上的数据
            data: [10, 9, 8,7]
        }]
    });

    //这部分用来产生随机数(我这里用的最大值、最小值,看个人需要哪种,一搜就有关于产生随机数的)
    var max = 100;
    var min = 0;
    var datay = [];

	
	//定时渲染的函数,名字自拟
    function fetchData() {
		
		//因为图表里是四个数据,所以这里只产生了四个随机数,可根据需要更改
        for (i = 0;i<4;i++){
            datay[i] = Math.floor(Math.random()*(max-min+1)+min);
        }


		//开始渲染
        myChart.setOption({
			//这里只需要放上数据相关的配置项,当然其它有的图表放的不只是数据,比如用到自定义图形的
            series: [{
                data: datay
            }]

        });
    }


</script>

<script>
    clearInterval(fetchData());    //先随机产生数字当作初始化的值

    setInterval(fetchData, 3000);   //每隔3s执行一次,以实现动态效果
</script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值