Echarts图表自适应窗口或者盒子变化大小

实现这个效果之前我们先来看一个onresize事件

onresize 事件会在窗口或框架被调整大小时发生。

• 拓展下
  当浏览器窗口大小改变的时候将会触发onresize事件。

    window.onresize(function(){
        //code
    })
  

接下来，我们直接上代码

    <template>
      <div
        class = "test_box"
        id    = "main"
        style = "width:80%;height:80%;"
      >Test page</div>
    </template>

    <script>
    export default {
      name: "test",
      data() {
        return {};
      },
      mounted() {
        this.drawBar();
      },
      methods: {
        drawBar: function() {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("main"));
          let option  = {
            xAxis: {
              type: "category",
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
            },
            yAxis: {
              type: "value"
            },
            series: [
              {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: "bar"
              }
            ]
          };
          //  使用刚指定的配置项和数据显示图表
          myChart.setOption(option);
          //  当窗口或者大小发生改变时执行resize，重新绘制图表
          window.onresize = myChart.resize;
        }
      }
    };
    </script>
    <style scoped>
    .test_box {
      background-color: #beb9b9;
      margin          : 10px auto;
    }
    </style>

重点是window.onresize

这个是在vue的一个组件中实现的，窗口大小发生改变的时候，承载图表的盒子也会发生变化，从而触发onresize事件。

这里卿洋
愿喜❤️