篇首语：本文由小编为大家整理，主要介绍了echarts超出父容器范围和自适应的解决办法相关的知识，希望对你有一定的参考价值。
参考技术A 给echarts图表设置 100% 宽高，父容器动态设置一个宽高时，echarts图表会占满不了父容器或者溢出父容器范围。产生问题的原因是因为echarts图形只绘制一次,且绘制时自动获取父级大小填写宽度，然后改变容器宽高，导致echarts绑定的元素的宽度并不是最终的宽度，所以造成了获取到的结果并不是想要的。
解决办法是延迟加载，等父容器设置完宽高以后echarts再进行渲染：
vue框架下，echarts图表外部容器宽度设置为百分比时内容超出容器以及echarts图表自适应的实现方案
在vue.js框架下，创建echarts图表，当图表的外部容器的宽度设置为百分比时，出现图表内容宽度超出其外部容器的情况，几番调试，得解决方案如下：
（备注说明：问题产生的具体原因尚不清晰，后面若知晓了再补充，但是初期解决问题阶段一定不要钻牛角，不是一开始就能或者可以知道真理的）
- 在创建了echart对象之后，就调用一次echart的resize方法，同时，获取图表数据的方法应该是异步的，如果是初期调试模拟也要用setTimeout延迟一下，0秒即OK了。
methods: { ...mapActions("chartonetwo", ["getData"]), initChart() { let oChart = echarts.init(document.getElementById("chartone")); oChart.resize();//关键步骤 ......（其他代码省略） }}echart图表随窗口大小变化的自适应的实现方法
- 在渲染图表即setOption之后，添加窗口的resize方法
oChart.setOption(option);window.addEventListener("resize", function() { oChart.resize();});
- 特别注意：当项目是引用jquery框架时，此处的事件添加也一定要用原生js的方式，否则，当一个页面中有多个echart图表时，会造成事件的覆盖，即只有一个图表的resize方法生效。
以上是关于echarts超出父容器范围和自适应的解决办法的主要内容，如果未能解决你的问题，请参考以下文章
