The problem of chart generated by echarts exceeding the parent container is solved

1. Problem description:
    When using echarts charts in front-end development, the width or height of the parent container will occasionally exceed the width or height.
    Scenario: echarts is set to 100% width and height, and the parent container is set to a fixed width and height. However, the chart cannot fill the parent container or overflows the container.
2. Reason:
    Generally, it is not because of the problem of calling the chart drawing method, but because of the problem of drawing and rendering timing . We know that it takes time for Vue to render the page. You need to call echarts.init() on the page and set the configuration item chart.setOption() for the chart. option).
    The timing of calling echarts api to generate charts occurs in the mounted life cycle. After the page echarts is drawn, you will find that although the elements are mounted, the layout has not yet been completed. This causes the chart element to display much beyond the parent container. At the same time, F12 can see that the width and height of the echarts element have changed significantly.
    Why does this happen? When the parent element has no layout, the chart starts to be generated. At this time, the width and height are not affected by the default layout. Instead, a large parent element that has been laid out will be found as the parent, and the real parent layout will be found. Once completed, it exceeds the parent container of the chart itself.
3. Solution:
    This is actually an asynchronous problem that can be solved by lazy loading. You can set a simple timeout function setTimeOut(callback,timeout)to wait for the chart to load after the parent container has set the width and height layout.

  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>

 Generally speaking, this problem will easily occur when using Vue or React. The reason is that our template file is not generated in the HTML page from the beginning, but needs to be manually rendered. Rendering takes time, and the timing of chart generation may be early. Depending on the layout timing of the parent element, it will appear especially when we use adaptive layout.