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/

阅读剩余
THE END