Echarts 时间轴监听事件

2023/08/30 15:25:20

Echarts 时间轴监听事件

1. 背景

• 需求：通过页面某个组件内时间轴的变化控制其他组件的echarts的数据变化；

2. 解决方法

• vue监听代码

this.myChart_3.on("timelinechanged", function (params) {
  console.log(params);
  if (params.type === "timelinechanged") {
   console.log(params.currentIndex);
  }
 });

• 网页监听：可监听到自动切换、点击事件；

• 时间轴配置项

timeline: {
  tooltip: {
   show: false, // 播放和前进后退去掉
  },
  data: years,
  axisType: "category",
  autoPlay: false, // 自动播放
  triggerEvent: true, // 事件捕捉
  playInterval: 5000,
  left: "10%",
  right: "10%",
  bottom: "2%",
  width: "80%",
  // height: null,
  label: {
   normal: {
    textStyle: {
     color: "#ddd",
    },
   },
   emphasis: {
    textStyle: {
     color: "#fff",
    },
   },
  },
  symbolSize: 10,
  lineStyle: {
   color: "#555",
  },
  checkpointStyle: {
   borderColor: "#777",
   borderWidth: 2,
  },
  controlStyle: {
   showNextBtn: true,
   showPrevBtn: true,
   normal: {
    color: "#666",
    borderColor: "#666",
   },
   emphasis: {
    color: "#aaa",
    borderColor: "#aaa",
   },
  },
 }