一、原理
通过 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>