前言:
在日常开发中有时遇到同数据相关的业务可能会用到echarts插件。一般在封装echarts组件的时候大家可能都会通过windows对象监听浏览器窗口大小的改变动态渲染echarts,这样当echarts窗口改变导致echarts画布元素大小改变的同时,就能调用相关api进行重绘。这样统计图就能一直充满canvas画布了,并能适配尺寸的电脑屏幕。
但是在有些业务场景下,对于同一台电脑而言,窗口大小不会改变,但是会动态修改echarts绑定的dom元素的宽高。这个时候通过Windows对象监听resize事件就不符合当前业务要求了。
此时可以通过ResizeObserve对象监听echarts绑定元素,一旦绑定元素尺寸改变,就可以调用相关api 重新进行绘制了。
一:相关API
ResizeObserver.disconnect()
取消特定观察者目标上所有对 Element 的监听。
ResizeObserver.observe()。
开始对指定 Element 的监听。
ResizeObserver.unobserve().
结束对指定 Element 的监听。
二:局部代码示例
// mychart.vue
<template>
<div
ref="container"
class="idata-multi-y-axis"
></div>
</template>
<script lang="ts" setup>
import {
onUnmounted,
watch,
reactive,
ref,
toRefs,
PropType,
shallowRef,
defineComponent,
nextTick,
onMounted,
} from 'vue';
import { PageList } from '@/types/smart/report/idata-table';
import { SheetResource, SheetFilter, SheetOrder, SheetStyle } from '@/types/smart/report/report';
import { debounce, cloneDeep, uniq, merge } from 'lodash';
import * as echarts from 'echarts/core';
import {
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
GraphicComponent,
TitleComponent,
} from 'echarts/components';
import { BarChart, PieChart, LineChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import 'echarts/lib/component/dataZoom';
echarts.use([
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
LabelLayout,
BarChart,
PieChart,
LineChart,
GraphicComponent,
CanvasRenderer,
TitleComponent,
]);
const state = reactive({
resizeObserve: null as ResizeObserver|null,
})
const container = ref(null);
const chart = shallowRef(null);
onMounted(() => {
nextTick(() => {
(chart.value as any) = echarts.init(container.value as any);
(chart.value as any).setOption(state.option);
// 对container.value dom元素的尺寸进行监听,若其尺寸发生改变,则重新渲染统计图
if (!state.resizeObserve) {
state.resizeObserve = new ResizeObserver((entires) => {
for (const entry of entires) {
if (entry.target === container.value) {
// 此时监听统计图dom尺寸的改变,重载统计图
(chart.value as any).resize();
}
}
});
}
state.resizeObserve.observe(container.value as any);
});
});
onUnmounted(() => {
if (!chart.value) {
return;
}
(chart.value as any).dispose();
if (container.value) {
state.resizeObserve?.unobserve(container.value as any);
}
});