使用useResizeObserver 让echarts图表自适应

### 使用 `useResizeObserver` 实现 ECharts 图表自适应 以下是基于 React 和 Vue 的两种方式，展示如何通过 `useResizeObserver` 来实现 ECharts 图表的自适应。 #### React 示例代码 在 React 中可以利用 `useEffect` 和 `useResizeObserver` 定制化一个图表组件： ```javascript import React, { useEffect, useRef } from 'react'; import * as echarts from 'echarts'; import useResizeObserver from './useResizeObserver'; const Chart = ({ data }) => { const chartRef = useRef(null); const dimensions = useResizeObserver(chartRef); useEffect(() => { if (chartRef.current) { const chartInstance = echarts.init(chartRef.current); const options = { xAxis: {}, yAxis: {}, series: [{ type: 'bar', data, }], }; chartInstance.setOption(options); return () => { chartInstance.dispose(); }; } }, [data, dimensions]); return ( <div ref={chartRef} style={{ width: '100%', height: '400px', border: '1px solid #ccc' }} /> ); }; export default Chart; ``` 此代码片段展示了如何使用 `useResizeObserver` 动态调整容器尺寸并触发 ECharts 更新[^1]。 --- #### Vue 示例代码 对于 Vue 用户，可以通过组合式 API 结合 `@vueuse/core` 提供的工具函数完成相同功能： ```javascript <template> <div ref="ecartRef" class="chart-container"></div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue'; import { useResizeObserver } from '@vueuse/core'; import * as echarts from 'echarts'; const ecartRef = ref(null); let chart; onMounted(() => { if (ecartRef.value) { chart = echarts.init(ecartRef.value); const option = { tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; chart.setOption(option); } // 设置 ResizeObserver useResizeObserver(ecartRef.value, () => { if (chart && chart.resize) { chart.resize(); } }); }); onBeforeUnmount(() => { if (chart && chart.dispose) { chart.dispose(); } }); </script> <style scoped> .chart-container { width: 100%; height: 400px; border: 1px solid #ddd; } </style> ``` 这段代码实现了当父级 DOM 尺寸发生变化时自动调用 `chart.resize()` 方法更新图表显示[^2]。 --- ### 关键点说明 - **动态监听**：无论是 React 还是 Vue 版本，核心逻辑均依赖于 `ResizeObserver` 对目标节点的变化进行实时监控。 - **资源释放**：为了防止内存泄漏，在组件卸载前需销毁对应的 ECharts 实例以及取消不必要的观察器绑定。 - **样式适配**：确保图表容器具有明确的高度和宽度定义（如固定高度或百分比），以便正确计算布局。 ---