// directives.js
import { onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
 
export const useEchartsResize = (el) => {
  let chartInstance = null;
 
  const createChart = () => {
    chartInstance = echarts.init(el);
  };
 
  const resizeChart = () => {
    if (chartInstance) {
      chartInstance.resize();
    }
  };
 
  onMounted(() => {
    createChart();
    window.addEventListener('resize', resizeChart);
  });
 
  onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    chartInstance && chartInstance.dispose();
  });
};