vue-plotly 自定义交互事件

在 `vue-plotly` 中，可以通过绑定 `@plotly\_event` 属性来实现自定义交互事件。下面以自定义点击事件为例，介绍该如何实现：

首先，需要在 `template` 中定义一个 `plotly` 组件，并绑定要绘制的图表数据和布局信息：

<template>
  <plotly :data="data" :layout="layout" @plotly_event="onPlotlyClick"></plotly>
</template>

<script>
import Plotly from 'plotly.js';

export default {
  data() {
    return {
      data: [{
        x: [1, 2, 3],
        y: [4, 5, 6],
        mode: 'markers'
      }],
      layout: {
        title: 'My Chart',
        xaxis: { title: 'X Axis' },
        yaxis: { title: 'Y Axis' }
      }
    };
  },
  methods: {
    onPlotlyClick(event) {
      console.log('Clicked on point:', event.points[0]);
    }
  },
  mounted() {
    Plotly.newPlot(this.$el, this.data, this.layout);
  }
};
</script>

上述代码创建了一个散点图，并在 `plotly` 组件上绑定了 `@plotly\_event` 事件，当用户点击散点图上的点时，会触发 `onPlotlyClick` 方法。

接下来，可以在 `onPlotlyClick` 方法中添加自定义逻辑，例如弹出一个提示框或者修改图表的状态等。需要注意的是，事件对象 `event` 包含了事件的相关数据，其中 `event.points` 属性是一个数组，包含了所有被点击的点的信息。

onPlotlyClick(event) {
  var point = event.points[0];
  alert('Clicked on point (' + point.x + ', ' + point.y + ')');
}

上述代码修改了事件监听器的逻辑，当用户点击散点图上的点时，会弹出一个提示框，显示该点的横纵坐标。