echarts 模拟时间轴播放效果

使用echarts柱状图模拟时间轴播放控制。开始/暂停/快进/慢进/点选

在这里插入图片描述

代码可直接放echart官方示例执行

let start = +new Date('2024-01-01');
let end = +new Date('2024-01-10');
let diff = end - start;
let dotLen = 200;let data = [start, end];
option = {color: ['#3398DB'],tooltip: {trigger: 'axis',showContent: false,axisPointer: {type: 'line'}},grid: {top: '8%',bottom: '90%'},xAxis: [{type: 'value',axisLabel: {formatter: (i) => {return new Date(start + (i * diff) / dotLen).toLocaleDateString();}},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},{name: 'back',type: 'bar',barWidth: '5',itemStyle: { color: 'rgba(0,0,0,0)' },data: Array(dotLen).fill().map((it, i) => [i, 1]),animation: false}]
};
let index = 0;
let btn = null;
let timerId = null;
let speed = 200;
const play = () =>setInterval(() => {const temp = index++ % dotLen;myChart.setOption({series: [{name: 'x',data: Array(dotLen).fill().map((it, i) => {return [i, i === temp];})}]});}, speed);const initControl = () => {// 慢进let slow = document.createElement('button');slow.appendChild(document.createTextNode('slow'));document.body.prepend(slow);slow.onclick = () => {if (timerId) {speed = 1.1 * speed;clearInterval(timerId);timerId = play();}};// 快进let quick = document.createElement('button');quick.appendChild(document.createTextNode('quick'));document.body.prepend(quick);quick.onclick = () => {if (timerId) {speed = 0.9 * speed;clearInterval(timerId);timerId = play();}};// 播放/暂停btn = document.createElement('button');btn.appendChild(document.createTextNode('play'));document.body.prepend(btn);btn.onclick = () => {if (timerId) {btn.innerText = 'play';clearInterval(timerId);timerId = null;} else {btn.innerText = 'stop';timerId = play();}};
};initControl();myChart.on('click', (evt) => {if (timerId) btn.click();index = evt.dataIndex;myChart.setOption({series: [{name: 'x',data: Array(dotLen).fill().map((it, i) => {return [i, i === index + 1];})}]});index++;
});