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]