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/
作者:云言
链接:https://yyink.cn/archives/349.html
声明:如无特别声明本文即为原创文章仅代表个人观点,版权归《云言博客》所有,欢迎转载,转载请保留原文链接。

小矬子