echarts图表盒子大小变化后，图表无法自适应

Question

如题：
项目基于bootstrap的栅格系统做的响应式

这是盒子宽度变小后图表右边明显超出盒子范围：

盒子还原后，图表正常显示

左边是一个侧边栏，有两个状态的切换，切换后，图表盒子大小会改变，问题就在这里，盒子大小改变后，图表大小并没有改变，甚至我把图表插件调用方法放到侧边栏切换的方法内从新绘制都没有效果：

function tan(){//切换方法
                if(test == 0){//状态改变
                    box.className = "box sel";
                    test = 1;
                }else{//状态改变
                    box.className = "box";
                    test = 0;
                }
                window.onresize();//图表自适应
                tubiao();//从新绘制图表
            }
window.onresize = function() {
            //重置容器高宽
            resizemyChartContainer();
            myChart.resize();
        };

debug了一下，resizemyChartContainer()方法是有效执行了的，myChart.resize()貌似没有起作用
求助该如何解决

Answer 1

找到解决方法了，其实在切换的时候方法是执行了的，但因为每次获取的宽度都是上一次的元素实际宽度，所以，每次设置方法调用的时候都是重复上一次的样式来渲染，看起来就是没渲染。故，设一个定时器，当切换状态完成后再去获取盒子的宽度，然后调用方法，就能切换了，但不足的是，明显有一个延迟，即定时器的延迟。我做了一个修改，当状态切换的时候触发一个新的定时器方法，去不断获取盒子的宽度，从而动态修改图表宽度，知道宽度不变后取消定时器

Answer 2

你都自己写了重置容器高度的代码,后面直接写echarts的resize()方法不好吗?

Answer 3

楼主找到解决的办法了吗？求助

Answer 4

楼主有找到解决办法吗？

Answer 5

我解决了,可以参考我这个文章
https://blog.csdn.net/qq_4271...