Echart.js绘制时间线并绑定事件

<template>
  <div id="app">
    <!-- 定义一个具有指定宽高的容器，用于渲染图表 -->
    <div ref="timeline" style="width: 800px; height: 600px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      // 时间线数据
      timelineData: [
        { date: '2022-01-01', event: 'Event 1' },
        { date: '2022-02-01', event: 'Event 2' },
        { date: '2022-03-01', event: 'Event 3' },
        // 可以根据需要添加更多的事件数据
      ]
    };
  },
  mounted() {
    // 初始化echarts实例
    this.chart = echarts.init(this.$refs.timeline);

    // 绑定点击事件
    this.chart.on('click', this.handleClick);

    // 渲染时间线图表
    this.renderTimeline();
  },
  methods: {
    // 渲染时间线图表
    renderTimeline() {
      // 创建时间线图表配置
      const option = {
        baseOption: {
          // 设置标题
          title: {
            text: 'Event Timeline'
          },
          // 设置时间线
          timeline: {
            axisType: 'category',
            autoPlay: false,
            data: this.timelineData.map(item => item.date)
          },
          // 设置事件点
          series: [
            {
              type: 'scatter',
              symbolSize: 20,
              encode: {
                x: 'date', // 事件的日期作为X轴
                y: 'event' // 事件名称作为Y轴
              },
              data: this.timelineData
            }
          ]
        }
      };

      // 使用刚指定的配置项和数据显示图表
      this.chart.setOption(option);
    },
    // 点击事件处理函数
    handleClick(params) {
      // 获取点击的事件数据
      const eventData = this.timelineData[params.dataIndex];
      // 处理点击事件，这里可以根据需求进行具体的处理
      console.log('Clicked event:', eventData);
    }
  }
};
</script>

<style>
/* 可以添加自定义样式 */
</style>