vue-echarts: Can't get DOM width or height.

Vue-ECharts 使得我们可以在 Vue 中优雅的使用 ECharts：

<script lang="ts" setup>
import VChart from 'vue-echarts';
</script>

<template>
<v-chart ref="chartRef" :option="chartOptions" autoresize />
</template>

上述写法可能会引起控制台警告：

echarts.js:2286 Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

原因是 ECharts 初始化时宽高为 0。

这里通过给 VChart 组件设置宽高并不能消除这个警告，原因是 ECharts 初始化使用的 div 实际上是 VChart 组件的一个子元素，给 VChart 组件设置宽高并不会作用到 ECharts 初始化时使用的 div 标签。

正确写法是通过 VChart 提供的 init-options 属性设置用于 ECharts 初始化的宽高：

<v-chart ref="chartRef" :option="chartOptions" autoresize 
  :init-options="{ width: 320, height: 320 }" />

宽高可以随便写一个，启用autoresize后，浏览器会根据图形实际大小自动调整宽高。

参考资料：

• vue-echarts 组件的属性：https://github.com/ecomfe/vue-echarts#props
• echarts 的初始化选项：https://echarts.apache.org/en/api.html#echarts.init