您的位置：首页 > 数码常识数码常识
echarts高度自适应（echarts图表自适应div大小）
2025-05-12人已围观
echarts高度自适应（echarts图表自适应div大小）
分享了如何利用ECharts创建图表，但是在生成图表之后可能我们可能会遇到这样的问题。页面渲染后显示正常，但是当我们调整页面大小时会发现图表部分被遮挡（或者说溢出）没有随窗口大小改变而自动调整到最佳视觉效果。这里我们可以看到显示的区域只有650px多像素点，但是我们通过【开发者工具】可以看到该canvas容器实际长度有1016px像素。
echarts图表自适应div大小
不响应的原因
首先我们要知道Eechart绘制需图表时必须提供宽和高，所以我们在初始div时必须有指定高度和宽度。当我们在组件中通过mounted初始化Eechart图表，就会在页面中渲染出我们需要的图表。但是钩子函数mounted在Vue生命周期中默认只会在html和模板渲染之后执行一次，所以当我们调整页面大小时图表并不会再次进行渲染（除非我们重新加载该页面）。
resize方法
为了应对这个问题Eechart提供了一个resize方法来改变图表尺寸，但是该方法需要在容器大小发生改变时需要手动调用。因为有时候图表会放在多个标签页里，当标签中存在隐藏的标签时初始化图表的时候会因为获取不到容器的实际高宽。这时候就容易导致绘制图表失败，所以在切换到该标签页时需要手动调用resize方法。resize方法在获取到正确的高宽时会重新刷新canvas画布，所以我们可以通过监听窗口变化来触发resize方法来自动调整canvas画布大小达到自适应的效果。
resize使用
这里我通过父div的高来定义Echarts的宽高，然后通过window.onresize来监听窗口变化。如果想要有个过度效果，那可以利用setTimeout来设置一个定时效果在来执行resize方法。如果window.onresize不行的话可以利用 window.addEventListener('resize', this.Screen)添加监听事件来窗口变化，然后再调用函数Screen执行resize方法。
resize不存在
今天在做Echarts自适应浏览器时发现拖动窗口进行缩放时会出现一个问题：Cannot read property ‘resize’ of undefined，这个后来发现时因为初始化echart的时候把setOption属性接在ECharts对象的初始化init后面了。属性后面当然找不到resize方法了....！
Echarts响应异常
还遇到一个问题就是当设置了resize之后还是遇到响应异常，当调整窗口大小的时候发现放大时Echart会随着窗口变大，但是当缩小窗口时Echart却不会被改变..。当点击收起参数栏的时候图表放大，但是再次展开参数栏偶图表就会溢出屏幕。这个是因为布局时使用了flex属性导致的，后来改成float就好了。
总结：
这里需要注意的是当一个项目中用到多个Echarts图表时，如果每个图表后面都使用window.onresize事件可能会遇到只有最后一个图表被触发。这是因为多个组件使用window.onresize容易出现冲突，导致window.onresize失效。以上内容是小编给大家分享的【Vue实战092：Echarts图表宽度自适应】。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：
为了方便学习，下面附上本文用到的源码：
上面就是小居数码小编今天给大家介绍的关于（echarts图表自适应div大小）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
如何做出漂亮的excel图表（excel图表制作技巧图文）
Excel这样做图表，简单、实用又直观（怎么用excel做图表）
excel对比分析图怎么做教程（excel怎么做比较图表）
excel数据透视表怎么做图表（数据透视表做动态图）
153449
分享了如何利用ECharts创建图表，但是在生成图表之后可能我们可能会遇到这样的问题。页面渲染后显示正常，但是当我们调整页面大小时会发现图表部分被遮挡（或者说溢出）没有随窗口大小改变而自动调整到最佳视觉效果。这里我们可以看到显示的区域只有650px多像素点，但是我们通过【开发者工具】可以看到该canvas容器实际长度有1016px像素。
echarts图表自适应div大小
不响应的原因
首先我们要知道Eechart绘制需图表时必须提供宽和高，所以我们在初始div时必须有指定高度和宽度。当我们在组件中通过mounted初始化Eechart图表，就会在页面中渲染出我们需要的图表。但是钩子函数mounted在Vue生命周期中默认只会在html和模板渲染之后执行一次，所以当我们调整页面大小时图表并不会再次进行渲染（除非我们重新加载该页面）。
resize方法
为了应对这个问题Eechart提供了一个resize方法来改变图表尺寸，但是该方法需要在容器大小发生改变时需要手动调用。因为有时候图表会放在多个标签页里，当标签中存在隐藏的标签时初始化图表的时候会因为获取不到容器的实际高宽。这时候就容易导致绘制图表失败，所以在切换到该标签页时需要手动调用resize方法。resize方法在获取到正确的高宽时会重新刷新canvas画布，所以我们可以通过监听窗口变化来触发resize方法来自动调整canvas画布大小达到自适应的效果。
resize使用
这里我通过父div的高来定义Echarts的宽高，然后通过window.onresize来监听窗口变化。如果想要有个过度效果，那可以利用setTimeout来设置一个定时效果在来执行resize方法。如果window.onresize不行的话可以利用 window.addEventListener('resize', this.Screen)添加监听事件来窗口变化，然后再调用函数Screen执行resize方法。
resize不存在
今天在做Echarts自适应浏览器时发现拖动窗口进行缩放时会出现一个问题：Cannot read property ‘resize’ of undefined，这个后来发现时因为初始化echart的时候把setOption属性接在ECharts对象的初始化init后面了。属性后面当然找不到resize方法了....！
Echarts响应异常
还遇到一个问题就是当设置了resize之后还是遇到响应异常，当调整窗口大小的时候发现放大时Echart会随着窗口变大，但是当缩小窗口时Echart却不会被改变..。当点击收起参数栏的时候图表放大，但是再次展开参数栏偶图表就会溢出屏幕。这个是因为布局时使用了flex属性导致的，后来改成float就好了。
总结：
这里需要注意的是当一个项目中用到多个Echarts图表时，如果每个图表后面都使用window.onresize事件可能会遇到只有最后一个图表被触发。这是因为多个组件使用window.onresize容易出现冲突，导致window.onresize失效。以上内容是小编给大家分享的【Vue实战092：Echarts图表宽度自适应】。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：
为了方便学习，下面附上本文用到的源码：
上面就是小居数码小编今天给大家介绍的关于（echarts图表自适应div大小）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
如何做出漂亮的excel图表（excel图表制作技巧图文）
Excel这样做图表，简单、实用又直观（怎么用excel做图表）
excel对比分析图怎么做教程（excel怎么做比较图表）
excel数据透视表怎么做图表（数据透视表做动态图）
153449
很赞哦！ ()
上一篇：手把手教你卸载安卓手机内置无用软件（手机插件怎么卸载）
下一篇：返回列表
相关文章
- echarts高度自适应（echarts图表自适应div大小）
- 手把手教你卸载安卓手机内置无用软件（手机插件怎么卸载）
- 可用于压缩和加密的软件使用步骤（免费解压软件哪个好用）
- win10无法安装.net3.5的解决办法（win10安装不了.net3.5）
- iPhone密码忘了解锁恢复方法（苹果手机忘记密码了怎么办）
- excel怎么输入数据有效性（如何在excel中提高输入效率）
- 一千五左右性价比高的手机推荐（千元四款手机性价比超高）
- 无线宽带路由器的正确安装（如何安装路由器连接宽带上网）
- 什么是固态硬盘和机械硬盘的区别（移动固态硬盘和机械硬盘的区别）
- 空调外机不转是什么原因（空调外机风扇不转的原因）