解决关于DataV内echart图表混乱(自适应)的问题

分析情况及解决思路

一、window.add....(("resize",())

之前在百度上面搜索关于（图表不能自适应、多个图表但是只resize一个图表）的问题。出来的都是关于window.add....(("resize",())之类的解决方法。尝试过，但是没解决全部问题。

解决思路：

1、给子组件内的每个echart图表添加相同的类名；

2、监听大盒子的高宽变化，如何监听可参考使用element-resize-detector监听div的高宽变化_Liuuniu的博客-CSDN博客

3、在父组件内的methods内编写一个函数，用来循环调用子组件内图表的resize方法

shuaxinFn(){
  //拿到页面内所有为itemlei类名的元素
  let arr = document.querySelectorAll(".itemlei");
  //遍历这个数组
  arr.forEach((item, index) => {
          //item项为第index各元素，拿到该元素的echart实例
          let myChart = echarts.getInstanceByDom(item);
          //进行改变图表的尺寸
          myChart.resize();
        });
}

4、将该方法写入父组件大盒子的监听方法的函数内即可

二、通过自定义的局部刷新来让图表自适应

说明：

  我这边外层盒子结构采用的是dataV内的组件，上面方法适用于普通盒子（div之类的），但是由于datav官方说明在某些情况下组件高宽会异常，所以即使遍历重新生成图表，在盒子高宽异常的情况下，图表还是会无法达到视觉上的自适应。

解决思路：

1、在父组件中，由于我子组件是循环（v-for）动态生成的，所以我可以给每一个子组件加上ref属性(唯一)和class类名(统一)，其中i类似唯一的key值。

 <component
              :is="item.i"
              :id="item.i"
              :ref="item.i"
              class="itemlei"
            ></component>

2、监听大盒子的高宽变化，如何监听可参考

使用element-resize-detector监听div的高宽变化_Liuuniu的博客-CSDN博客

3、在父组件内的methods内编写一个函数，用来循环调用子组件内局部刷新的方法

   // 刷新图表
    shuaxinFn() {
      //获取所有类名为itemlei的元素，用来判断当前父组件的页面内是否有子组件
      let arr = document.querySelectorAll(".itemlei");
      //如果有就继续
      if (arr.length) {
        // 定义一个数组，这个数组根据ref值来自定义的，就是上面说的i，[card1,card2,card3]也可以
        let list = val ? [val] : [item1, item2, item3, item4, item6];
       
        this.$nextTick(() => {
         //循环数组
          list.forEach((item) => {
            //changView()是子组件局部刷新的一个函数，每一个子组件都必须有
            this.$refs[item] && this.$refs[item].length
              ? this.$refs[item][0].changView()
              : "";
          });
        });
}




//循环内未优化的代码如下
          this.$refs.item8.length?this.$refs.item8[0].changView():"";
          this.$refs.item1.length?this.$refs.item1[0].changView():"";
          this.$refs.item6.length?this.$refs.item6[0].changView():"";
          this.$refs.item7.length?this.$refs.item7[0].changView():"";
          this.$refs.item2.length?this.$refs.item2[0].changView():"";
          this.$refs.item3.length?this.$refs.item3[0].changView():"";

4、子组件内的局部刷新

     （1）在子组件内，给外层盒子添加v-if用来刷新盒子

     （2）记得定义isReload（默认为true）

      （3）在methods内

 methods: {
   //子组件内的方法
    changView() {
      setTimeout(() => {
        this.reloadFn();
      }, 500);
    },
    // 局部刷新页面
    reloadFn() {
      this.isReload = false;
      this.$nextTick(() => {
        this.isReload = true;
      });
    },
  },

5、将该方法写入父组件大盒子的监听方法的函数内即可