DataV border12渲染 echarts适应屏幕

使用DataV组件—dv-border-box-12作为容器渲染echarts未自适应

<div
      class="grid-content bg-purple"
      ref="pie2"
      :key="key"
      style="height: 100%"
    >
复制代码

首先dv-border-box-12绑定key，如果为栅格布局可以绑定在外层div上

    <div
      class="grid-content bg-purple"
      ref="pie2"
      :key="key"
      style="height: 100%"
    ></div>
复制代码

监听界面容器高度宽度的变化改变key，触发容器再次渲染

    window.addEventListener("resize", function (e) {
    this.$nextTick(() => {
      _this.key++;
    });
  });  
复制代码

如果el-menu组件缩进情况，导致界面容器变化无法被监听

computed: {
listData() {
  return this.$store.state.isCollapseVal;
}
}，
watch: {
listData(val) {
  if (val == false) {
    this.fontsizeTrue = true;
  } else {
    this.fontsizeTrue = false;
  }
  var chart_1 = echarts.init(document.getElementById("main2"));
  chart_1.resize();
  this.key++;
}
}




上述代码通过监听store声明的变量isCollapseVal的变化，来触发key变化达到容器再次渲染，echarts也在同时适应渲染
复制代码