echarts超出容器宽度和自适应的解决办法

2019年9月9日 624次阅读 来源: Tenno

在使用echarts时,为了兼容移动端.使用了flxe布局
出现echarts超出父盒子宽度的问题

《echarts超出容器宽度和自适应的解决办法》

可以看出来echarts溢出了父盒子

一下问题相似

https://segmentfault.com/q/10…

https://segmentfault.com/q/10…

在了解echarts绘制机制

echarts图形只绘制一次,且绘制时自动获取父级大小填写宽度

考虑让echarts延迟绘制 使用setTimeout

原先代码

 

<template>
    <div id="myMap" style="width:100%; height:500px" ></div>  
</template>
    mounted(){
        this.myMap()
    }

修改后

    mounted(){
       setTimeout(()=>{
        this.myMap()
       }
    }

配置`

myMap(){
    let myMap=echarts.init(document.querySelector('#myMap'))
    myMap.setOption({})
    }

效果图:

《echarts超出容器宽度和自适应的解决办法》

关于自适应的问题

首先要明白echarts只绘制一次,理清思路.适应大小那么echarts重绘

代码修改

    mounted(){
      const that=this
      setTimeout(()=>{
        this.myMap=echarts.init(document.querySelector('#myMap'))
        this.setMap()
      })
      window.onresize= () => {
        that.myMap.resize()
      }
    }
    //修改了配置方法的名称myMap=>setMap
    setMap(){
        this.myMap=echarts.init(document.querySelector('#myMap'))
        this.myMap.setOption({})
        }

我使用的是vue框架.使用其他技术的同学也可以参考一下,求赞
有不对的地方欢迎指正.代码还有优化点

    原文作者：Tenno
    原文地址: https://segmentfault.com/a/1190000017847667
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞