V-Vのためのチャートで使用する、図のechartsは同じ、異なる値に適応されている表示します

 

それは一つの固有のニーズ前記ためのコードのVのVチャートの導入によるディスプレイの各行、設定値REF、および共有することができません、

ダイレクトスタート思考です：後の次のプロセスで見つかった適応方法を記述するとき、REF動的に割り当てられ、それは図2に対応する参照値未満になります。

　　　　<DIV CLASS = "eachPartition" V- 用 = "ブロックで（アイテム、インデックス）"：キー= "インデックス">
        <DIV CLASS = "eachPartition_blocks">
          <サブタイトル：タイトル= "item.zone + '分区'"：importantTitle = 'importantTitle'> </サブタイトル>
          <DIV CLASS = "blocksInformation">
            <Iクラス=「エル・アイコン・矢印・左」> </ I>
            <DIV CLASS = "blocksInformation_imgs" V- について "item.height中（ITEM1、index1の）" =：キー= "index1の">
              <IMG SRC = "../../資産/画像/ block6.svg">
              <P> {{ITEM1}} </ P>
              <IMG SRC = "../../資産/画像/ liantiao.gif" V-ショー= "index1の！= 6">
            </ div>
            <Iクラス=「エル・アイコン矢印右」> </ I>
          </ div>
        </ div>
        <DIV CLASS = "eachPartition_TPS">
          <P> TPS </ P>
          <DIV CLASS = "tps_charts">
            <V-チャートREF = "tps_creditChart" クラス= "クレジット・チャート"：スタイル= "{幅： '100％'、高さ： '100％'}"：オプション= "tps_options"> </ V-チャート>
          </ div>
        </ div>
      </ div>

　{）（マウント
    window.addEventListener（ "サイズ変更する"、この.resizeTheChart）。
  }、
  beforeDestroy（）{
    window.removeEventListener（ "サイズ変更する"、この.resizeTheChart）。
  }、
  方法：{
    resizeTheChart（）{
      ため（LET I = 0; I < 本 .blocks.length; iは++ ）{
         場合（この$ refs.tps_creditChart [I]）{
           この$ refs.tps_creditChart [I] .resize（）。
        }
      }
    }、
  }

溶液：同じREF対応する値にechartsグラフが生成され、ループ内で、まだ割り当てられてREFを使用して、

この場合、一般的refは配列である場合、我々は、アレイインデックス値を介して取り込まれます。tps_creditChart [I]