ECharts stepping pit -- > the chart size automatically responds to changes in the browser window

preface

Continued: ECharts step pit – > error in specifying chart container size

Tip: the following is the main content of this article

1, Problems encountered

When multiple ecarts charts are used in multiple tabs, it is expected that each chart will respond automatically when the browser size changes. However, when I use the wondows.onresize method, only the last chart can adapt according to the window size chart. The size of the previous chart during initialization is as follows:

Example: when the browser window changes, the chart is not displayed in full screen according to the window size, and the chart size at initialization is maintained

2, Code display

The code is as follows (example):

<template>
  <div id="chartA" />
</template>
<script>
export default {
  name: 'ChartA',
  data() {
    return {
      myChart: null
    };
  },
  mounted() {
    this.createChart();
    window.onresize = function () {
      this.myChart && this.myChart.resize();
    };
  },
  methods: {
    createChart() {
      let option = {
        title: {
          text: 'Property example: gradient shadows'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          // type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FF5300' },
                { offset: 1, color: '#F4CC01' }
              ])
            }
          }
        ]
      };
      let chartA = document.getElementById('chartA');
      this.myChart = this.$echarts.init(chartA);
      this.myChart.setOption(option);
    }
  }                       
};
</script>
<style lang='stylus' scoped>
  #chartA
    width 750px
    height 600px
</style>

3, Problem analysis

The first step is to check the official website in case of the need to automatically respond to the chart changes according to the browser window( EChart chart container and size ), the third is to respond to the change of container size. The following code is an example on the official website

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.onresize = function() {
    myChart.resize();
  };

Obviously, we are using the official example. Why can only the last one respond to the change of container size, but the previous one can't? Here we will talk about the problem of the windows. Onresize method itself: because onresize itself is a callback, when you assign values multiple times, the previous one will be overwritten. Therefore, the windows.onresize event can only respond once. If this method is used in multiple places, the previous event will be overwritten, which leads to that only the resize() method of the last chart will be executed, so only the last chart can respond to the change of container size.

4, Solution

Here, we can use the window.addEventListener method instead of the window.onresize method. You can add event listeners multiple times through the addEventListener

mounted() {
    this.createChart();
    window.addEventListener('resize', () => {
      this.myChart && this.myChart.resize();
    });
  },

In this way, the image can automatically respond to the container size

5, Expand addEventListener

element.addEventListener(event, function, useCapture)
Event: string type, used to specify the event name, which is required.
Function: used to specify the function to be executed when the event is triggered, which is required.
useCapture: Boolean type that specifies whether the event is executed during the capture or bubbling phase.

summary

The above is the solution to the size of ECharts multi chart response container and the difference between window.onresize and window.addEventListener. I hope it can help you >_<