ECharts01 – 图表和图表容器的大小

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

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

图表及图表容器的大小

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

<!-- 图表 -->
 <div ref="el" id="chart" style="width: 100%;height: 300px;"></div>

图表响应图表容器的大小

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

//安装
npm i @vueuse/core
//使用
import { useResizeObserver } from "@vueuse/core";

const el = ref()
useResizeObserver(el, entries => {
    myChart?.resize();
});

注：这里的el为通过ref获取到的dom元素，  myChart为echarts实例

实例的销毁和重建

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

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

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

onMounted(() => {
    var chartDom = document.getElementById('chart');
    myChart = echarts.init(chartDom);
})

onBeforeUnmount(()=>{
    if(myChart) echarts.dispose(myChart)
})
</script>

Reference

echarts相关链接：

https://barwe.cc/2022/04/07/echarts-chart-container-size

https://echarts.apache.org/handbook/zh/concepts/chart-size

https://echarts.apache.org/zh/api.html#echarts.init

https://vueuse.org/core/useresizeobserver/