div自适应布局宽高 控制div显隐

实现效果

注意观察各个图表的大小变化

ui1.PNG ui2.PNG ui3.PNG
ui4.PNG

tree 联动图表 各个图表 各个图表里的单项

1.通过勾选tree数据 来控制图表显示哪些内容
2.图表全部取消勾选后 其他各个图表相互适应布局

重点
1. 图表数据和tree数据 同步 （echarts图表 数据 使用 dataset 利用scource 可以和tree数据同步）
2. 各个图表自适应 其实也就是外层容器 自适应 （利用 css样式 + vue2 中 watch监听 tree数据某个图表被勾
选的数组长度）

样式代码

template

   <div class='a'      v-show="setAllTreeKeys.rede.length>0||setAllTreeKeys.bluee.length>0">
      <div class='box'    v-show='setAllTreeKeys.rede.length>0'>
      </div>
      <div class='box'  v-show='setAllTreeKeys.bluee.length>0'>
      </div>
    </div>
    <div class='b' v-show='setAllTreeKeys.redr.length>0'>
    </div>
    <div class='c'  v-show="setAllTreeKeys.redd.length>0||setAllTreeKeys.blued.length>0">
      <div class='box'   v-show="setAllTreeKeys.redd.length>0">
      </div>
      <div class='box' v-show="setAllTreeKeys.blued.length>0">
      </div>
    </div>

css样式

重点：
1. 是 class a,b,c 以及 box都是 flex:1 这样才能自适应
2. 注意 在tree勾选时候 数据setAllTreeKeys里面数据有变化(此数据是 每个tree选中node的keys集合)
监听setAllTreeKeys数据变化 从而重新绘制echarts图表

bug
问题：echarts在 resize()时候 有时候图表不显示 排查原因 大概是因为 容器的宽高没有立即显示
解决方法： 给容器 加上 如下 css样式 ::v-deep 这一段

    .a,
    .b,
    .c {
      flex: 1;
      display: flex;

        ::v-deep.box {
          flex: 1;

          div {
            &:nth-child(1) {
              width: 100% !important;
              height: 100% !important;

              canvas {
                width: 100% !important;
                height: 100% !important;
              }
            }
          }
        }
    }

监听数据改变

重点 resize()方法 这样图表可以根据外容器大小自适应

    watch: {

      //监听所有属性
      setAllTreeKeys: {
        //  immediate: true,//初始化的时候让handler调用一下
        deep: true,//开启深度监听
        handler(newValue,oldValue) {

          setTimeout(() => {
            myChartRede.resize();
            myChartBluee.resize();
            myChartRedr.resize();
            myChartRedd.resize();
            myChartBlued.resize();
          },10);

        }
      }
    },