在vue中实现echart自适应于父元素

在我们的Vue项目中，左右布局，左边是主要的container,右边是一个可以收缩的aside，echarts渲染一遍后固定宽高，所以想在aside收缩前后,resize Echarts。

---

• 在父元素中也就是index.vue里面的template

复制代码

• 给data中新增一个变量fullScreen

    data(){
      return {
        // 边栏是否开启
        showAside:true,
        fullScreen:false,
      }
    }
复制代码

• 在边栏的按钮点击事件中添加

    methods:{
      // 边栏开关
      asideEvent(){
        this.$refs.container.fullScreen()
        this.fullScreen = !this.fullScreen;
        //true 变 false,fasle变true
      }
    }
复制代码

---

• 在router-view中，也就是路由跳转的页面中

    props:['fullScreen'],
    watch:{
      // 是否全屏
      fullScreen(newVal){
        var _this = this;
        setTimeout(function () {
          let myChart = _this.$echarts.init(document.getElementById("barChart-1"));
          myChart.resize();
          let myChart2 = _this.$echarts.init(document.getElementById("barChart-2"));
          myChart2.resize();
          let myChart3 = _this.$echarts.init(document.getElementById("lineChart"));
          myChart3.resize();
          console.log("EnergyPlan 全屏执行");
        },400)
      }
    },
复制代码

props用来接收传过来的值
watch用来监听这个值的变化
至于为什么要设置timeout 因为aside收起时有一定的动画效果，要等动画效果结束后，再渲染。

转载于:https://juejin.im/post/5ac2186af265da238b7e2e14