echarts超出父容器范围和自适应的解决办法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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超出父容器范围和自适应的解决办法的主要内容,如果未能解决你的问题,请参考以下文章

echarts 设置最小高度超出容器解决方法

echart3怎么让图表自动适应

ECharts 高度宽度自适应(转载)

echarts柱状图使用v-show切换显隐时容器宽高变小

Echarts图标宽度变成100px,让图表宽度随着父元素自动适应,Vue实时监听宽度的变化,这可能是史上最好的解决方案!

右边高度自适应