<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let chartInstance = null;

// 1. 定義具名回調(diào)函數(shù)（確保引用唯一）
function handleChartClick(params) {
  console.log('圖表點(diǎn)擊：', params);
}

function handleLegendChange(params) {
  console.log('圖例變化：', params);
}

// 2. 統(tǒng)一存儲(chǔ)事件配置：[事件類型, 回調(diào)函數(shù), 庫(kù)特定選項(xiàng)]
// 數(shù)組元素順序需與庫(kù)的 on/off 方法參數(shù)順序一致
const chartEvents = [
  ['click', handleChartClick], // ECharts click 事件：無額外選項(xiàng)
  ['legendselectchanged', handleLegendChange] // 圖例變化事件
];

onMounted(() => {
  chartInstance = echarts.init(chartRef.value);
  // 3. 批量綁定：遍歷配置，展開參數(shù)調(diào)用 on 方法
  chartEventss.forEach((event) => {
    chartInstance.on(...event); // 等價(jià)于 chartInstance.on('click', handleChartClick)
  });
});

onUnmounted(() => {
  if (chartInstance) {
    // 4. 批量移除：遍歷同一配置，展開參數(shù)調(diào)用 off 方法
    chartEvents.forEach((event) => {
      chartInstance.off(...event); // 參數(shù)與綁定完全一致
    });
    chartInstance.dispose(); // 銷毀實(shí)例，徹底清理資源
  }
});
</script>

<script setup>
import { onMounted, onUnmounted, ref, useCallback } from 'vue';
import * as echarts from 'echarts';

const activeSeries = ref('sales'); // 響應(yīng)式數(shù)據(jù)
const chartRef = ref(null);
let chartInstance = null;

// 用 useCallback 緩存回調(diào)，依賴 activeSeries 變化時(shí)才更新
const handleChartClick = useCallback((params) => {
  console.log(`點(diǎn)擊 ${activeSeries.value} 系列：`, params);
}, [activeSeries]); // 依賴數(shù)組：僅當(dāng) activeSeries 變化時(shí)，函數(shù)才重新創(chuàng)建

// 事件配置：復(fù)用緩存后的回調(diào)
const chartEvents = [
  ['click', handleChartClick]
];

onMounted(() => {
  chartInstance = echarts.init(chartRef.value);
  chartEvents.forEach((event) => {
    chartInstance.on(...event);
  });
});

onUnmounted(() => {
  if (chartInstance) {
    chartEvents.forEach((event) => {
      chartInstance.off(...event); // 回調(diào)引用與綁定一致
    });
    chartInstance.dispose();
  }
});
</script>