echarts自适应屏幕大小

div部分，给定容器

<div class="panel11_data2" ref="myChartParent" :style="style2">

<div ref="myChart" class="chart" :style="style"></div>

</div>

给容器初始值

data() {

    return {

      style: {

        // 定义初始宽高

        width: document.documentElement.clientWidth * 0.72 + "px",

        height: document.documentElement.scrollHeight * 0.28 + "px"

      }

}

}

监听屏幕宽高的变化，重新加载图表

mounted() {

    let _this = this;

    window.addEventListener("resize", function windowResize() {

      let autoWidth = document.documentElement.clientWidth * 0.72

      let autoHeight = document.documentElement.clientHeight * 0.28

      if (autoWidth < 1116) { autoWidth = 1116; } //设定最小宽度

      _this.style.width = autoWidth + "px";

_this.style.height = autoHeight + "px";

      _this.$echarts .init(_this.$refs.myChart) .resize({ width: _this.style.width, height: _this.style.height });

    });

  }

这样，浏览器放大/缩小，图表可以实现自适应屏幕大小。

如果有更好的方法，欢迎留言哦。。。