x,y轴为数值轴,通过设置bar的数据模拟时间播放。标签可通过formatter自定义为时间,播放/停止/速度可通过setInterval来控制(待完善)
代码可直接放echart官方示例执行
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,100];
option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
showContent: false,
axisPointer: {
type: 'line'
}
},
grid: {
top: '8%',
bottom: '90%'
},
xAxis: [
{
type: 'value',
axisPointer: {
show: true
},
axisTick: {
inside: true
},
minorTick: {
show: true
},
splitLine:{show:false},
splitNumber:10
}
],
yAxis: [
{
type: 'value',
show: false
}
],
series: [
{
name: 'x',
type: 'bar',
barWidth: '3',
animation: false,
}
]
};
let index = 0;
setInterval(() => {
const temp = index++%Math.max(...data);
myChart.setOption({
series: [
{
name: 'x',
data: Array(Math.max(...data)).fill().map((it, i) => {
return [i, i===temp];
})
}
]
});
},200);