Adaptive processing of echarts charts, including two cases of a single chart on the same page and multiple charts

One: Adaptive processing of a single chart on the same page

  // 基于准备好的dom，初始化echarts实例
  var chinaMap = echarts.init(document.getElementById("china-map"));
  window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resize

This is the case of a single chart. If there are multiple charts, you will find that this way of writing will not work.

2: Adaptive processing of multiple charts on the same page

  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("first"));
  var secondChart = echarts.init(document.getElementById("second"));
  var thirdChart = echarts.init(document.getElementById("third"));
  var fourthChart = echarts.init(document.getElementById("fourth"));
  window.addEventListener("resize", () => {
    
    
    myChart.resize();
    secondChart.resize();
    thirdChart.resize();
    fourthChart.resize();
  });

reference

• echarts use skills (1) echarts chart adaptive resize problem, single selection, zoom, etc.-Gulenjing-Blog Park https://www.cnblogs.com/goloving/p/9008165.html