echarts 图表和字体自适应浏览器窗口

echarts 图表和字体自适应浏览器窗口

在使用echarts做图表的时候，更换设备或者缩放浏览器窗口大小时，需要自适应浏览器窗口。

1.自适应浏览器窗口，在setOption后引入下边window.onresize…即可。
代码如下：

//根据窗口的大小变动图表
   window.onresize = function () {
     myChart.resize();
     //myChart1.resize();    //若有多个图表变动，可多写
   };

2.echerts字体自适应浏览器。
首先获取到body的大小 ：document.body.clientWidth；
在设置x轴y轴样式时，使用fontSize：e/1920 *10 乘以对应的字体像素即可。
例如：在1920 * 1080的设计图，文字为18px；乘以18即可。
代码如下：

   initChart(month, value, index) {
      var myChart= document.getElementsByClassName("myChart");
      var e = document.body.clientWidth;   
      myChart.setOption({  
       tooltip: {
         ...
         textStyle: {
            color: "rgba(255, 255, 255, 0.8)",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: (e / 1920) * 10,
            lineHeight: (e / 1920) * 18,
          },
          ...
        },
        ...
    })
    //根据窗口的大小变动图表
      window.onresize = function () {
        myChart.resize();
        //myChart1.resize();    //若有多个图表变动，可多写
      };
  }