javascript Echarts柱状图1.0（横向无限加载）

方法一：直接替换原有的数据，缺点：当替换到最后一条数据时，会从头开始加载，视觉体验不好。

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);

预览图：

参考文章