v-for中使用v-chart，显示相同的echarts图，数值不同，均要自适应

在代码中通过v-for显示每行内容，引入v-chart时，在设置ref的值时，因为说是不能共用一个，需要唯一，

开始想着直接是:ref来动态赋值，后来发现在下面方法中写自适应方法时，取不到对应的图的ref值。

实现代码：

1.html：

　　　　　　<div class="eachPartition" v-for="(item,index) in blocks" :key="index">
        <div class="eachPartition_blocks">
          <sub-title :title="item.zone+'分区'" :importantTitle='importantTitle'></sub-title>
          <div class="blocksInformation">
            <i class="el-icon-arrow-left"></i>
            <div class="blocksInformation_imgs" v-for="(item1,index1) in item.height" :key="index1">
              <img src="../../assets/images/block6.svg">
              <p>{{ item1 }}</p>
              <img src="../../assets/images/liantiao.gif" v-show="index1 != 6">
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="eachPartition_TPS">
          <p>TPS</p>
          <div class="tps_charts">
            <v-chart  ref="tps_creditChart" class="credit-chart" :style="{width:'100%',height: '100%',}" :options="tps_options"></v-chart>
          </div>
        </div>
      </div>

2.js中的方法：

　mounted(){
    window.addEventListener("resize", this.resizeTheChart);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeTheChart);
  },
  methods: {
    resizeTheChart() {
      for(let i = 0;i<this.blocks.length;i++){
        if (this.$refs.tps_creditChart[i]) {
          this.$refs.tps_creditChart[i].resize();
        }
      }
    },
  }

解决办法：

仍然使用ref来赋值，在循环中，则会产生对应的几个相同ref值的echarts图，取值时通过数组下标来取，此时的共用的ref是一个数组。tps_creditChart[i]

v-for中使用v-chart，显示相同的echarts图，数值不同，均要自适应

推荐阅读