1. In recent pc projects, multiple echerts charts have been used in the pages, requiring adaptive browser windows.

Reason: Because charts don't resize adaptively to the browser's window size.

Solution: Introduce window.addventListener... below setOption.

    drawLine(month, value, index) {
      var a = document.getElementsByClassName("myChart");

      var e = document.body.clientWidth;  
   
      let myChart2 = this.$echarts.init(a[index]);
    
      myChart2.setOption({
         // xxxxxxxxx
      });

     
        window.addEventListener("resize",function(){
          console.log("222222222")
          myChart2.resize();   //myChart2 refers to the echartsDom object defined by oneself

  });
     
}, 

2. echerts font adaptive browser.

First, get the size of body: document.body.clientWidth;

In setting the x-axis y-axis style, you can multiply font Size: e/1920*11 by the corresponding font pixels, such as: in my 1920*1080 design, the x-axis text is 8px; multiply by 8.

   drawLine(month, value, index) {
      var a = document.getElementsByClassName("myChart");

      var e = document.body.clientWidth;   
    
      let myChart2 = this.$echarts.init(a[index]);

      myChart2.setOption({
        grid: {
          left: "1%",
          right: "15%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: month[0],
          name: "date",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff"
            }
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: e/1920*11
          },
          splitNumber: 4,
          axisTick: {
            //x-axis calibration line
            show: false,
            color: "#58f3e1"
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: e/1920*11
            }
          }
        },
        yAxis: {
          type: "value",
          show: true,
          max: 2000,
          min: 0,
          splitNumber: 5,
          nameTextStyle: {
            color: "#fff",
            fontSize: e/1920*11,
            padding: [-5, 30, 5, 0]
          },
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value}%",
            margin: 2
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff"
            }
          },
          axisTick: {
            //y-axis scale line
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              opacity: 0.2
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: e/1920*11
            }
          }
        },
        series: [
          {
            data: value[0],
            type: "line",
            itemStyle: {
              normal: {
                color: "#58f3e1",
                width: 6,
                height: 6,
                lineStyle: {
                  color: {
                    type: "linear",
                    color: "#E47B35"
                  }
                },
                label: {
                  show: true,
                  position: "top",
                  color: "#fff",
                  fontSize: e/1920*11
                  //  formatter:'{c}%'
                }
              }
            }
          }
        ]
      });
        window.addEventListener("resize",function(){
          console.log("222222222")
          myChart2.resize();   //myChart refers to the echartsDom object defined by oneself

  });
},