ECharts时间轴样式配置

 时间轴基础配置项

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' // 更改控制按钮边框颜色
        }
      }
    });
  });