Vue使用echarts随浏览器自适应放大缩小

最近项目要用到echarts画图，踩了个自适应的坑，在这里总结一下，首先看bug图：

分析一下：左边的盒子，也就准一等品花颜色得分情况没有出来是因为我最外边的盒子设置的固定宽，如果设置固定宽 echarts是能够自适应的，但是页面会挤在一起，也就是左边 中间 右边的盒子间隔会随着浏览器窗口放大，放大的结果就是浏览器窗口宽度变小了，而盒子固定宽度不变，导致盒子会挤压在一起，布局就不美观了。所以为了自适应，我把盒子的宽都设成百分比了；

中间和右边的div盒子我就是设置百分比宽，这样设置页面是不会挤在一起了，但是echarts无法自适应，大小固定不变，导致图形超出盒子，也就是现在见到的样子。

这里是解决方法：

1、前提：画布外部的盒子宽和画布的宽都需要设置百分比宽，如果画布还是设置了固定宽，即使加了方法还是不会自适应的

2、下面就是方法了

加我所注释说明的那段代码就行

效果：

现在就不会挤出去了。

下面是写的一个小demo，可以参考一下：

————————————————

版权声明：本文为CSDN博主「听听那晚风」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/GongWei_/article/details/107732516