1.用到了Echarts图表自带的dataZoom组件
2.使用定时器定时刷新数据
效果图
关键代码
dataZoom: [
{
xAxisData: 0,//这里是从X轴的0刻度开始
show: false,//是否显示滑动条
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 4 // 一次性展示5个。
}
], setInterval(function () {
if (xAxisData.length < 4) { return } else {
// 每次向后滚动一个，最后一个从头开始。
if (option.dataZoom[0].endValue == xAxisData.length) {
option.dataZoom[0].endValue = 4;
option.dataZoom[0].startValue = 0;
}
else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
if (option.dataZoom[0].endValue == xAxisData.length) {
option.dataZoom[0].endValue = 4;
option.dataZoom[0].startValue = 0;
}
}
myChart.setOption(option);
}
}, 5000);以下是全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图表</title>
</head>
<body>
<div>
<div id="container" style="height:700px;width: 700px;background-color: black;"></div>
</div>
</body>
</html>
<script src="./echarts.min.js"></script>
<script>
var chartDom = document.getElementById('container');
var myChart = echarts.init(chartDom);
var option;
var xAxisData = ["01-01","01-02","01-03","01-04","01-05","01-06","01-07","01-08","01-09","01-10"]
var zongchang = 10
var zongce = 5
var data1 = [10,20,30,40,0,5,40,3,2,50]
var data2 = [10,20,10,40,0,10,20,30,40,50]
option = {
legend: {
y: 'bottom',
x: 'center',
data: ['在册人数5人', '在场人数10人',],
textStyle: {
color: "#fff"
}
},
tooltip: {},
xAxis: {
data: xAxisData,
axisLabel: {
textStyle: {
fontSize: 15
},
},
axisLine: {
lineStyle: {
color: '#19ECFF',
},
}
},
dataZoom: [
{
xAxisData: 0,//这里是从X轴的0刻度开始
show: false,//是否显示滑动条
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 4 // 一次性展示5个。
}
],
yAxis: {
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: '#19ECFF',
}
}
},
grid: {
bottom: 50
},
series: [
{
name: '在册人数' + zongce + '人',
type: 'bar',
data: data1,
barWidth: 20,
itemStyle: {
normal: {
color: "#ffac36",
barBorderRadius: [15, 15, 0, 0],
}
}
},
{
name: '在场人数' + zongchang + '人',
type: 'bar',
data: data2,
barWidth: 20,
itemStyle: {
normal: {
color: "#00a0e9",
barBorderRadius: [15, 15, 0, 0]
}
}
},
]
};
option && myChart.setOption(option);
setInterval(function () {
if (xAxisData.length < 4) { return } else {
// 每次向后滚动一个，最后一个从头开始。
if (option.dataZoom[0].endValue == xAxisData.length) {
option.dataZoom[0].endValue = 4;
option.dataZoom[0].startValue = 0;
}
else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
if (option.dataZoom[0].endValue == xAxisData.length) {
option.dataZoom[0].endValue = 4;
option.dataZoom[0].startValue = 0;
}
}
myChart.setOption(option);
}
}, 5000);
</script>
