echarts生成图表超出父容器问题解决

1. 问题描述：
    前端开发在使用echarts图表时，偶尔会出现超出父级容器宽度或高度的情况。
    情景：给echarts设置了100%宽高，父容器设置了固定的宽高，出现图表占满不了父容器或者溢出容器的情况。
2. 原因：
    一般不是因为图表绘制的方法调用问题，而是绘制渲染时机出现了问题，我们知道，vue渲染页面需要时间，要在页面调用echarts.init()，并且给图表设置配置项chart.setOption(option)。
    调用echarts api生成图表的时机发生在mounted这个生命周期。在页面echarts绘制完成之后进行操作，发现有可能会出现元素虽然挂载了，但是布局还未完成的情况。这就导致图表元素显示超出父级容器很多，同时地，F12可以看到echarts元素的宽高度发生了明显的变化。
    为什么会出现这种情况？父级元素还没有layout的时候，图表就开始生成，这个时候宽度和高度就不受默认布局的影响，而是会找到一个已经布局的大的父级元素作为父级，等真正的父级layout完毕，就超出了图表本身的父级容器。
3. 解决：
    这其实是一个异步问题通过延迟加载来解决，可设置一个简单的超时函数setTimeOut(callback,timeout)，等父容器设置完宽高布局完成之后图表加载。

  export default {
    
    
    name: 'ehlPie',
    data() {
    
    
      return {
    
    
        echart: null,
        options: {
    
    
          //省略。。。。
        },
      }
    },
    mounted() {
    
    
        setTimeout(() => {
    
    
          this.init()
        }, 20)
    },
    methods: {
    
    
      init() {
    
    
        this.echart = this.$echarts.init(document.getElementById(this.tag))
        this.echart.setOption(this.change(), {
    
     lazyMode: true })
        window.addEventListener(
          'resize',
          () => {
    
    
            setTimeout(() => {
    
    
              this.echart && this.echart.resize()
            }, 100)
          },
          false,
        )
      },
    },
</script>

 一般而言，在使用vue或者react都会容易出现这个问题，原因是我们的模板文件不是一开始就生在html页面中，而是需要经过人为渲染，渲染需要时间，图表生成的时机有可能会早于父级元素layout的时机，尤其当我们使用自适应布局的时候会出现。