图表容器 指的是 echarts.init 绑定的 DOM 元素，一般提供一个 id 属性与 ECharts 实例绑定。
图表 指的是 SVG 容器或者 Canvas 容器。

图表容器 一般需要手动设置高度，块级容器宽度默认占满可不设置。
图表 一般默认占满图表容器，也可以单独设置大小。

图表及图表容器的大小

使用 echarts.init 方法绑定一个 ECharts 实例到一个 DOM 容器上，一般是一个 div 标签，而且要显式指定它的高度，宽度默认占满父容器的宽度：

<template>
    <div id="heatmap" h="500px"></div>
</template>

这里的 h 属性是 windicss 提供的属性样式的写法。

echarts.init 方法的一个使用例子：

echarts.init(document.getElementById('heatmap'), undefined, {
    renderer: 'svg',
    // 指定 svg/canvas 容器的大小，区别于 div#heatmap 容器
    // width: 300,
    // height: 300,
})

该方法返回一个 ECharts 实例，实例有一些实用方法：

• resize() 根据浏览器窗口大小重设图标容器大小
• resize({ width: 400, height: 200 }) 指定容器大小

图表响应图表容器的大小

结合 vueuse 提供的 useResizeObserver 可轻松实现图表大小自适应图表容器大小：

<template>
  <div ref="hmContainer" id="heatmap" h="500px"></div>
</template>

<script setup lang="ts">
import { useResizeObserver } from "@vueuse/core";

const hmContainer = ref<HTMLElement>();
let echart: Nullable<echarts.ECharts> = null;

useResizeObserver(hmContainer, (entries) => {
  const entry = entries[0];
  const { width, height } = entry.contentRect;
  echart?.resize({ width, height });
});
</script>

实例的销毁和重建

假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页时，其他标签页中的 DOM 节点都被移除了，但是创建的 ECharts 实例仍然存在。当再次选中这些标签页时，虽然会重新生成绘图的 DOM 节点，但是这个节点并是当初 ECharts 实例绑定的那个节点了（内存地址变了），同时因为上次的 ECharts 实例没有被销毁，所以再次进入标签页时不会创建新的 ECharts 实例了。这样导致的结果就是：切回某标签页时，该标签页原本显示的图表消失了。

解决办法是，在进入组件时初始化 ECharts 实例，在销毁组件时也同时销毁 ECharts 实例。

<script setup lang="ts">
onMounted(() => {/* 在这里创建实例 */})
onUnmounted(() => {/* 在这里销毁实例 */})
</script>

Reference

👉 echarts 图表容器及大小
👉 echarts.init
👉 vueuse.useResizeObserver