Echarts （第二篇 图表自适应浏览器窗口缩放 字体自适应浏览器）

1、在最近的pc项目中，页面中用到了多个echerts图表，需要自适应浏览器窗口。

      原因：因为图表不会根据浏览器的窗口大小而进行适应性的调整大小。

      解决方案：在setOption  后引入下边window.addventListener...即可。

    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指自己定义的echartsDom对象

  });
     
}, 

2、echerts  字体自适应浏览器。

   首先获取到body的大小 ：document.body.clientWidth；

   在设置x轴y轴样式时，使用fontSize：e/1920*11    乘以对应的字体像素即可，例如：在我的1920*1080的设计图，x轴文字为8px；乘以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: "日期",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff"
            }
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: e/1920*11
          },
          splitNumber: 4,
          axisTick: {
            //x轴刻度线
            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轴刻度线
            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指自己定义的echartsDom对象

  });
},