方法一：直接替换原有的数据，缺点：当替换到最后一条数据时，会从头开始加载，视觉体验不好。
let xData = []
let seriseData = []
let testEcharts; // 定义定时器
clearInterval(testEcharts); // 清除定时器
let index = 5; // 初始展示5条
let realXData = []
let realSeriseData = []
for (let i = 0; i < 10; i++) {
xData.push(i)
seriseData.push(i + 10)
if (i < index) {
realXData.push(i)
realSeriseData.push(i + 10)
}
}
option = {
tooltip: {
trigger: 'axis'
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
data: realXData
}
],
yAxis: [
{
type: 'value',
name: 'Price'
}
],
series: [
{
name: 'Dynamic Bar',
type: 'bar',
data: realSeriseData
}
]
};
testEcharts = setInterval(function () {
console.log('index',index, xData.length)
realXData = xData.slice(index - 5, index)
realSeriseData = seriseData.slice(index - 5, index)
option.xAxis[0].data = realXData
option.series[0].data = realSeriseData
myChart.setOption(option); // 设置配置项
index += 1;
// 如果超出，就从第一个开始，实现轮播效果
if (index > xData.length) {
index = 5;
}
}, 2000);
方法二：直接筛选数据，会一直往数组里面添加数据，视觉体验好。
let xData = []
let seriseData = []
let testEcharts; // 定义定时器
clearInterval(testEcharts); // 清除定时器
let index = 5; // 初始展示5条
let realXData = []
let realSeriseData = []
for (let i = 0; i < 10; i++) {
xData.push(i)
seriseData.push(i + 10)
if (i < index) {
realXData.push(i)
realSeriseData.push(i + 10)
}
}
option = {
tooltip: {
trigger: 'axis'
},
xAxis: [
{
type: 'category',
data: realXData
}
],
yAxis: [
{
type: 'value',
name: 'Price'
}
],
series: [
{
name: '横向动态柱状图',
type: 'bar',
data: realSeriseData
}
]
};
testEcharts = setInterval(function () {
// 如果超出，就从第一个开始，实现轮播效果
if (index >= xData.length) {
index = 0;
}
realXData.shift()
seriseData.shift(); // 把数组的第一个元素从其中删除
realXData.push(xData[index])
seriseData.push(seriseData[index]); // 把下一条数据插入到数组中
index += 1;
myChart.setOption(option); // 设置配置项
}, 2000);
预览图：
柱状图