div中 echart图表自适应

实现效果

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

图11.png
图1.png

显隐控制div

图表全部取消勾选后 其他各个图表相互适应布局

重点
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(() => {
            myCharta.resize();
            myChartb.resize();
            myChartc.resize();

          },10);

        }
      }
    },