时间轴基础配置项
const option = {
timeline: {
data: [],
axisType: 'category',
show: true,
autoPlay: false,
playInterval: 2000, //播放速度
checkpointStyle: { //播放时圆点样式
color: 'red',
borderColor: 'red'
},
label: {
color: '#ff0000' // 这里设置时间轴标签的颜色为红色
},
lineStyle: { // 轴线样式
color: 'red'
},
controlStyle: { //前进后退按钮
show: true,
showPrevBtn: false,
showNextBtn: false,
color: 'red',
borderColor: "red" // 播放按钮边框样式
},
progress: { //播放后时间轴线颜色
itemStyle: { // 进度按钮的样式
color: 'green'
},
lineStyle: { // 进度线的样式
color: 'green',
width: 2
},
},
itemStyle: {
color: "red", //轴上圆点样式
},
}
};
监听时间轴点击时间改变样式
myChart.on('timelinechanged', function (event) {
//可通过索引做对应操作
var currentIndex = event.currentIndex;
console.log('当前时间轴索引:', currentIndex);
//监听点击播放后改变时间轴样式
myChart.setOption({
timeline: {
lineStyle: {
color: 'green' // 更改时间轴线条颜色
},
itemStyle: {
color: "green", //轴上圆点样式
},
label: {
color: 'green' // 这里设置时间轴标签的颜色为红色
},
controlStyle: {
color: 'green', // 更改控制按钮颜色
borderColor: 'green' // 更改控制按钮边框颜色
}
}
});
});