Vue3 中使用 Echarts 遇到的问题

在nuxt中使用 Echarts 时，报错：[ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.

简单使用

创建composables/useECharts.ts。此代码中echarts会自动监听窗口大小变化。

import * as echarts from "echarts";

export function useECharts(elementRef: Ref<HTMLElement | null>) {
  const chart = ref<echarts.ECharts | null>(null);
  // 初始化图表
  const initChart = () => {
    if (!elementRef.value) return;
    chart.value = echarts.init(elementRef.value);
    // 窗口大小变化时自动调整
    window.addEventListener("resize", resizeChart);
  };
  // 调整大小
  const resizeChart = () => {
    chart.value?.resize();
  };
  // 清理资源
  const dispose = () => {
    window.removeEventListener("resize", resizeChart);
    if (chart.value) {
      chart.value.dispose();
      chart.value = null;
    }
  };
  watch(elementRef, () => {
    if (elementRef.value) {
      chart.value = echarts.init(elementRef.value);
    }
  });
  onMounted(() => {
    window.addEventListener("resize", resizeChart);
  });
  onUnmounted(dispose);
  return {
    chart,
  };
}

使用方法：

<template>
  <div>
    <div ref="chartEl" />
  </div>
</template>
<script lang="ts" setup>
const chartEl = ref<HTMLElement | null>(null);
const {chart} = useECharts(chartEl)
const chartData = computed(() => {
  return {
    // 配置项
  };
});
watch(() => [chart.value,chartData.value],() => {
  if(!chart.value ||!chartData.value) return;
  chart.value.setOption(chartData.value);
})

遇到的问题

图表区域一片空白

图表区域空白，浏览器控制台有警告：[ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.

echarts 需要目标元素的宽度和高度不能为 0。宽度一般不用设置，高度由于没有内容是0，所有需要设置一个高度。固定高度或者flex布局皆可。

但是我设置了高度还是有这个问题，尝试了Vue的nextTick，没有效果。最终方案是使用nuxt的client-only组件包裹echarts元素。我推测这是nuxt导致的。

<client-only>
  <div ref="chartEl"></div>
</client-only>

在v-for里使用

在v-for里使用上面的代码，会导致chartEl.value是一个数组，而不是一个元素。所以建议把图表元素放到v-for外面。