项目场景:
vue+echarts中 图表容器无法自适应
问题描述:
在做项目时,遇到问题,百度了很多都无法实现,解决之后总结一下,方便下次参考。
设置图表宽度为百分比,不生效,无法随着外层父容器大小自适应
补充:项目页面中加入左侧折叠菜单,点击折叠后,父容器百分比自适应浏览器,但是图表大小无法自适应父容器的调整。
原因分析:
调试发现 width:100%,变成了width:100px。并没有按照百分比实现自适应。
解决方案:
利用resize()方法来解决该问题。
leftMenu.vue折叠按钮事件添加发射事件resize
method:{
clickButton:function(){
....
//新的界面要添加该事件,最好更名事件名(resize1...)
添加到延时事件
setTimeout(this.$root.eventHub.$emit('resize'),200);
}
main.vue
<template>
<div style="width:60%;height:30%;">
//此处我只改变图表宽度自适应,高度固定
<div id="demoChart" style="width:100%;height:300px;"&g