vue3 + ts + echarts图例点击事件（legendselectchanged事件）

在 ECharts 中，可以通过监听图例的点击事件来实现相应的交互。当图例被点击时，可以捕获这个事件并执行相应的操作。

在 legendselectchanged 事件上添加了一个监听器，当图例被点击时，会触发这个事件，可以获取到点击的图例信息，然后执行相应的操作。

核心代码：

// 监听图例点击事件
    myChart.on('legendselectchanged', function (params) {
        console.log(params); // 输出点击的图例信息
        // 在这里执行你想要的操作，根据点击的图例进行相应的处理
    });

点击图例，打印结果如下：

完整代码如下：

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  setup() {
    const chart = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chart.value) {
        const myChart = echarts.init(chart.value);

        const option = {
          legend: {
            data: ['A', 'B', 'C'],
          },
          xAxis: {
            type: 'category',
            data: ['January', 'February', 'March', 'April', 'May'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: 'A',
              type: 'bar',
              data: [2, 2, 1, 12, 43],
            },
            {
              name: 'B',
              type: 'bar',
              data: [2, 43, 22, 1, 12],
            },
            {
              name: 'C',
              type: 'line',
              data: [2, 1, 12, 43, 2],
            },
          ],
        };

        myChart.setOption(option);

        // 监听图例点击事件
        myChart.on('legendselectchanged', function (params) {
          console.log(params); // 输出点击的图例信息
          // 在这里执行你想要的操作，根据点击的图例进行相应的处理
        });
      }
    });

    return { chart };
  },
});
</script>