vue动态渲染echarts,以及多次调用组件数据更新时组件无法同步刷新详解

数据在vue中是被灵活操作的

当遇到如图这种echarts的数据需要通过接口获取,并且进行相应的删除和添加操作时,echarts的数量与数据要与数据同步刷新

想要独立的echarts动态渲染,我想到通过封装echarts组件通过props传递接口数据来实现

import yearCom from "./yearCom.vue";//在父组件中引入封装好的echarts组件
export default {
  components: { yearCom },//注册组件
  data() {}
  }

我们在父组件获取到接口数据时,将接口返回数组(此图以数组为例)的总数count或通过.length获取该数据的长度,在data中定义一个变量dataCount将数组长度存起来

export default {
  components: { yearCom },//注册组件
  data() {
dataCount:[],
}
  }
 async getData() {
      const { data } = await this.$post(url);//这里我直接用了封装好的axios
      this.dataCount = Object.keys(data.data);//将对象的key值转存在数组中
      }

这里接口返回的数据的格式为

可以看到数据的格式为数组嵌套数组每个二级数组中有一个对象 我们用到对象中的name作为echarts的title value的值作为series的数据. 每个echrts中需要的数据格式是

arrList: [
        { value: 123, name: "辣椒酱" },
        { value: 102, name: "豆瓣酱" },
      ],

所以我们将接口返回的数据进行处理

 async getData() {
      const { data } = await this.$post(url);//这里我直接用了封装好的axios
      this.dataCount = Object.keys(data.data);//获取到数组的长度
      this.dataList = [];
      for (var key in datass) {
        datass[key].forEach((val) => {
          val.value = val.type;
        });
        this.dataList.push(datass[key]);//将对象中value push到一个空的新数组
      }
      }

最后得到名称数组:dataCount 数据数组:dataList和的数据格式为

处理好了数据,接下来就可以使用了

通过循环种类数组来控制组件需要被调用的次数,同时item可以用做无数据时的提示信息,这样就可以根据数组的长度动态渲染出组件的个数了(注意:echarts的组件容器必须要有高度),因为组件是被循环渲染的,所以即使是组件共用一个id也不会有问题,也就是说虽然在一个页面多次出现,但是组件之间是相互独立的!

<div v-for="(item, index) in dataCount" :key="index">
            <div v-if="dataList[index] != ''">
              <year-com
                v-if="hackReset"
                :opinionData="dataList[index]"
              ></year-com>
            </div>
            <div v-else>{{ item }}暂无数据</div>
          </div>

效果已经初步实现

但是在测试中我发现当反复请求接口时,虽然数据发生了变化,但是echarts并没有实时刷新,传过去的数据也和获取到的不一致,而通过echarts组件中每次执行前销毁echarts这个方法是不能实现的,原因是我们是多次调用组件而并非只是简单执行echarts函数 [奉上echarts销毁方法 this.$echarts.init(this.$refs.yearHasDatas).dispose();] yearHasDatas为echarts容器的ref

为了解决这个问题,我想到了通过watch监听要传给组件的数据的变化,一旦数据发生变化,我们就将组件全部销毁,然后重新建立,再传入新值

hackReset 用于组件销毁与重建,与定义变量相似,但是值为true,或false,同样也是在data()中定义

 <year-com
 v-if="hackReset"
:opinionData="dataList[index]"
></year-com>

export default {
  components: { yearCom },
  data() {
    return {
      hackReset: false,
      }
      },
  watch: {
    dataList(newVal, oldVal) {
      this.hackReset = false; //销毁组件
      this.$nextTick(() => {
        this.hackReset = true; //重建组件
      });
      this.dataList = newVal;//传入新值
    },
  },
  }

通过这些方法vue动态渲染echarts的各种问题就迎刃而解了