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

jerryloveemily 发布于2019-08-23 14:38 / 794人阅读

摘要：在使用时为了兼容移动端使用了布局出现超出父盒子宽度的问题可以看出来溢出了父盒子一下问题相似在了解绘制机制图形只绘制一次且绘制时自动获取父级大小填写宽度考虑让延迟绘制使用原先代码修改后配置效果图关于自适应的问题首先要明白只绘制一次理清思路适应

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

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

一下问题相似

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

在了解echarts绘制机制

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

考虑让echarts延迟绘制使用setTimeout

原先代码


    mounted(){
        this.myMap()
    }

修改后

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

配置`

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

效果图:

关于自适应的问题

首先要明白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框架.使用其他技术的同学也可以参考一下,求赞
有不对的地方欢迎指正.代码还有优化点

容器云 html的宽度自适应的解决办法 html超出宽度换行微软的解决办法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100906.html

微信小程序开发中遇到的问题及解决办法：微信小程序ad自适应布局（二）

摘要：问题添加微信广告的小程序在正式上线并且通过审查后，如果有除了纯展示的其他需求，比如需要点击观看广告秒才能领取奖励。场景：微信小程序中添加广告，可以是微信广告和自定义广告的自适应布局；问题：微信广告在小屏（比如：320）手机上或是设置ad组件父组件宽度小于300px，内容会超出布局范围；截图效果：showImg(https://segmentfault.com/img/bVbq...

Freeman 2019-08-02 16:11 评论0 收藏0
微信小程序开发中遇到的问题及解决办法：微信小程序ad自适应布局（二）

摘要：问题添加微信广告的小程序在正式上线并且通过审查后，如果有除了纯展示的其他需求，比如需要点击观看广告秒才能领取奖励。场景：微信小程序中添加广告，可以是微信广告和自定义广告的自适应布局；问题：微信广告在小屏（比如：320）手机上或是设置ad组件父组件宽度小于300px，内容会超出布局范围；截图效果：showImg(https://segmentfault.com/img/bVbq...

tanglijun 2019-08-23 16:46 评论0 收藏0
移动端样式小技巧

摘要：平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机样式显示效果不一致造成的。五左右宽度自适应第四个小技巧结尾，图中的布局实际上是分左右两块的，依照的需求，文案是要左对齐，数字是要右对齐的。平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！本文只针对两大手机阵营 Andr...

lufficc 2019-08-20 10:14 评论0 收藏0