echarts图表自适应resize问题，div大小改变触发事件

最新推荐文章于 2025-07-17 17:03:45 发布

原创最新推荐文章于 2025-07-17 17:03:45 发布 · 1w 阅读

10 ·

CC 4.0 BY-SA版权

JavaScript 同时被 3 个专栏收录

6 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

ECharts

1 篇文章

订阅专栏

本文介绍了如何使ECharts图表具备响应式功能，包括使用resize函数应对浏览器窗口大小变化，以及通过监听div元素大小变化来调整图表尺寸的方法。推荐一篇关于使用JQuery扩展div大小改变触发事件的文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts官网的实例都具有响应式功能

echart图表本身是提供了一个resize的函数的。

用于当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。

多个图表可以使用addEventListener

window.addEventListener("resize", () => { 
    this.myChart.resize();  
    this.myChart2.resize();  
    this.myChart3.resize();
});

上面问题解决了浏览器窗体改变大小问题

假设某个DIV改变大小呢？

推荐你这篇优秀的文章：

JQuery扩展 — div大小改变触发事件

https://blog.youkuaiyun.com/qq_33257711/article/details/81504104

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序员_胡子

关注关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue中监听div大小解决echarts 的resize问题

weixin_42432439的博客

10-22

4642

1、安装element-resize-detector依赖 2.新建chart.resize.js文件，添加下面代码 import echarts from 'echarts'; import Vue from 'vue'; import elementResizeDetectorMaker from "element-resize-detector" export var version = ...

Echarts图表根据DIV和窗口大小自适应容器

Be_A_Master

08-30

3261

项目场景： vue单页面项目新增一个首页，内容主要为数据展示，包括饼图、折线图、柱状图，通过echarts图表库开发页面。 #实现：普通页面会展开左侧菜单，但首页是全屏展示，需要在打开首页的同时隐藏菜单并使首页宽度100%，图表根据容器宽度自适应 问题描述：一般echart图通过监听window窗口大小并使用this.myChart.resize() 重新调整尺寸来自适应容器的大小。但目前遇到一个问题，#question：首页的左侧菜单栏属于document内容，不触发窗口监听，所以需要#监.

1 条评论您还未登录，请先登录后发表或查看评论

echarts中resize事件监控实例入门redux

weixin_43443341的博客

04-20

996

react+redux入门实例背景实现redux，react-reduxactionsreducerstorestore注入项目派发事件dispatch监听store中值背景项目背景是通过react+redux完成不同组件之间的通信。左侧导航栏有收缩时候右侧内容中echarts图表能监测到此动作，并做resize动作，具体实现效果我们知道监听echarts的resize()方法可以通过w...

解决 dom节点宽度变化时ECharts 的 Resize 问题

最新发布

weixin_43692224的博客

07-17

298

加完发现浏览器窗口放大缩小的时候可以，但是针对那种右侧边栏推出来DOM宽度变化的情况它好像不起作用，其实onresize事件本身并不直接提供监听单个DOM元素尺寸变化的能力。性能考虑：虽然 ResizeObserver 非常强大，但频繁的大小变化可能会引起性能问题，尤其是在复杂或频繁更新的页面上。刚开始写的时候想着这不很简单直接监听浏览器窗口大小不就可以所以加了如下代码。通过使用 ResizeObserver，你可以有效地监听任何DOM元素的大小变化，而不仅仅是整个浏览器窗口。

怎样给div增加resize事件

weixin_34344403的博客

11-01

295

当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件,这个事件在window上面触发,那么如何给div元素增加resize事件，监听div的高度或宽度的改变呢？先来回答另一个问题，监听div的高度变化又有什么用呢？一般而言div的高度是随着内容的增加而自适应的，对于ajax请求的数据还没有加载时，此时div的内容为空，在ajax数据返回后，div的高度就自然会自适应内容而增高了，监...

echarts使用问题：echarts的图表自适应resize问题

那一日面朝大海的博客

04-17

2504

最近需要在vue中用echarts弹窗展示表格数据，ele弹窗可自适应,但echarts会随着滚动而变乱，看文档找方法，发现： echart图表本身是提供了一个resize的函数的。于是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。单个图表，用window.onresize = myChart.resize; 可以完成自适应，就是把...

echarts resize问题终极解决

haohaohaowa的博客

03-15

851

1.安装："element-resize-detector": "^1.2.4",2.utils封装：resizeEcharts.js。表中不需要再额外监听window.resize。3.echarts表中使用。

万能的vue项目中echarts图表自适应解决方法.zip

10-21

同时，我们添加了一个窗口大小变化的监听器`handleResize`，当窗口大小改变时，调用`resize()`方法使图表自适应新的尺寸。在`beforeDestroy()`钩子中，我们需要移除监听器并销毁ECharts实例，以避免内存泄漏。 ...

vue中echarts图表大小适应窗口大小且不需要刷新案例

10-15

Vue中echarts图表大小适应窗口大小而不刷新的实现方法是，通过监听DOM元素大小变化，触发echarts实例的resize方法重新计算图表的大小。为了实现上述功能，可以通过以下步骤来完成： 1. 在Vue组件中引入echarts和...

echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示...

06-06

3. 监听窗口大小改变事件，并在事件触发时调用 `resize` 方法，如： ```javascript // 监听窗口大小改变事件 window.addEventListener('resize', function() { // 调用 resize 方法 chart.resize(); }); ``` 4. ...

react-resize-aware:simple一个简单的React Hook，允许在更改大小时监听任何目标元素的resize事件

05-02

React调整大小感知它做一件事，却做得很好：侦听任何HTML元素上的调整大小的事件。 react-resize-aware为零依赖性，约600字节可用于检测调整大小的事件，而无需依赖间隔，循环，DOM操作检测或CSS重绘。它利用了HTMLObjectElement上的resize事件，可在我所知道的任何浏览器上运行，并且它是超轻量级的。此外，它不会直接更改DOM，一切都由React处理。寻找2.0文档？安装 yarn add react-resize-aware 或使用npm： npm install --save react-resize-aware 用法该API简单但功能强大， useResizeAware 返回一个您将放置在被测元素内的React节点，以及一个包含其大小的对象： import React from 'react' ; import useRe

echarts图表的自适应（当窗口发生变化时图表大小也变化）(Window：resize事件、vue2自定义指令、echarts实例的resize方法)

bushiaaa的博客

09-20

884

实现思路： 1. 通过自定义事件绑定到echarts容器，将echart实例传入到指令中， 2. 在指令中监听浏览器窗口的变化，当变化时调用resize方法。

echarts图表大小随着外部div大小变化

热门推荐

查查的前端空间

05-08

2万+

jquery有resize()事件，但直接调用没有起作用，引入jquery.ba-resize.js文件就可以了。例如： class="chart" > id="myChart" style="height:300px"> let myChart = Echarts.init(document.getElementById("myChart")); $('.chart'

echarts使用技巧echarts的图表自适应resize问题

Homer_Simpson的博客

01-23

4796

参考文章 echart图表本身是提供了一个resize的函数的。于是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。用window.onresize = myChart.resize; 可以完成自适应，就是把window的onresize事件赋值为echart的resize事件当然这是单个图表的情况，要是多个图表，发现会不起作用。多个图表可以使...

php增加div回车事件,怎样给div增加resize事件

weixin_34503235的博客

04-06

136

当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件,这个事件在window上面触发,那么如何给div元素增加resize事件，监听div的高度或宽度的改变呢？某位大神用jquery实现的方法，这样就可以 $('div').resize(fucntion(){ .. })直接使用了;(function($, h, c) {var a = $([]),e = $.resize = $....

echarts二级页面展示响应式和 resize事件报错

2301_76607997的博客

02-27

257

echarts图表实现自适应 和 resize事件报错 Cannot read properties of null (reading 'getAttribute')

echarts中resize方法使用时的问题总结，

liu_an_hao_的博客

03-06

2546

原因：resize生效是即时的，有可能你的动画时间还未结束，resize方法已经调用完了，它识别的大小是在动画过程中展示容器的大小，解决方式二：调用resize方法时，添加延时器，（也可以，记得清除就好）解决方式一，监听动画结束时，再调用resize，（较为优雅，推荐）页面表现：图表大小有变化，但是不多，达不到自己的预期，一般用来在图表容器大小改变时自适应容器大小，调用resize方法。例2：resize方法调用了，图表也缩放了，但是会溢出和不到边，例1，在侧边栏收起时，resize方法设置无效，

使用useResizeObserver 让echarts图表自适应

05-13

### 使用 `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 实例以及取消不必要的观察器绑定。 - **样式适配**：确保图表容器具有明确的高度和宽度定义（如固定高度或百分比），以便正确计算布局。 ---