When making a large screen, our container is often adaptive to the size of the window, so the width and height of the chart chart will be scaled accordingly. Another is that the width and height of the window remain the same, but the width and height of the parent container of chart chart chart chart changes, which also needs to be adapted to. But the chart graph doesn’t actually change as the external container changes, unless you manually refresh it. Let me make a note of the two situations I encountered and the solutions.

1. Self-adaptation of chart chart for window size change

This is a common situation, very simple, just need to listen to the window resize event can be!

window.onresize = function() {
    setTimeout(function() {
      myChart.resize() 
    }, 10)
}
Copy the code
2. The size of the window remains unchanged, while the size of the parent container of chart chart chart chart chart chart chart chart chart chart chart chart chart

It took me over an hour to find the answer, but it’s easy to install a plugin. The plugin is called Element-resize-Detector.

The installation
npm install element-resize-detector
Copy the code
use

According to the need to introduce

import elementResizeDetectorMaker from 'element-resize-detector'
Copy the code
mounted() {
    const that = this
    const erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById('isEcharts'), element => {
      that.$nextTick(() => {
           myChart.resize()
      })
    })
},
Copy the code