vue3 echarts legend点击之后才更新

在 Vue3 中使用 ECharts 的 Legend 功能，并且希望只有当用户点击 Legend 时图表才会更新，你可以通过以下步骤实现：

1. 首先，确保你在组件中已经正确地初始化了 ECharts 实例并添加了 Legend 组件。例如，在 Vue 的 `setup` 函数中:

import { ref } from 'vue';
import ECharts from 'echarts';

const chartRef = ref(null);
const myChart = useECharts(); // 自定义的 ECharts 使用函数

// ...

function initChart() {
  const option = {/* ... */}; // 你的图表配置选项
  myChart.init(chartRef.value, 'chartId');
  myChart.setOption(option);

  // 添加 Legend 监听事件
  myChart.on('legendselectchanged', (params) => {
    if (params.current && params.selected.length > 0) {
      // 更新数据或配置只在Legend被选中时发生
      updateDataOrConfig(params.selected[0].name);
    }
  });
}

//...

2. 定义 `updateDataOrConfig` 函数来处理需要更新的数据或配置，这可以根据实际业务逻辑进行定制。

3. 在模板中绑定 `chartRef` 到 ECharts 的容器元素，如 `<div ref="chart"></div>`，并在适当的地方调用 `initChart()` 初始化图表。

4. 用户交互（比如按钮触发）时，可以手动调用 `myChart.dispatch('legendselect', {selected: [legendItem]})` 来模拟点击某个 Legend 项，然后图表会更新。