Vue3使用Echart实现图表自适应无效？

Question

定义useEchart hook，里面定义图表初始化、配置、自适应和移除自适应函数，当Chart组件调用并渲染后，图表自适应无效。
hook

chart组件

父组件

Answer 1

addEventListener 和 removeEventListener 必须绑定同一个函数引用，否则无法正确解绑。
不要在 resizeChart 里直接 addEventListener。
resizeChart 应该是执行 resize，而不是绑定 resize 事件。
我帮你修改了下：

const instance = ref<echarts.ECharts | null>(null);
const chartDom = ref<HTMLElement | null>(null);

// resize 事件处理函数
function handleResize() {
  if (instance.value) {
    instance.value.resize();
  }
}

function initChart() {
  if (chartDom.value) {
    instance.value = echarts.init(chartDom.value);
    window.addEventListener("resize", handleResize); // ✅正确绑定
  }
}

function setOption(option: echarts.EChartsOption) {
  if (instance.value) {
    instance.value.setOption(option);
  }
}

function removeEvent() {
  window.removeEventListener("resize", handleResize); // ✅正确移除
  if (instance.value) {
    instance.value.dispose();
  }
  instance.value = null;
}

Answer 2

你这是指的改变窗口大小不发生变化的吗，我这里使用起来没有任何问题，可以从你的样式去看一下宽高，或者使用这种方法也可以，

const chartRef = ref(null);
let chartInstance = null;
let resizeObserver = null;
 
onMounted(() => {
  chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption({ /* ECharts 配置项 */ });
  resizeObserver = new ResizeObserver((entries) => {
    for (let entry of entries) {
      if (chartInstance != null) {
        chartInstance.resize(); // 调整图表大小以适应容器大小变化
      }
    }
  });
  resizeObserver.observe(chartRef.value); // 开始观察元素大小变化
});