最近在改echarts 遇到一個問題是 圖表的data可以迴圈的出來,但是原本的樣式全部丟失,並且資料都重疊在同一個位置,如下圖所示

正常圖;

經過閱讀其他元件程式碼,找到一個迴圈樣式的方法:

html:

<div class="text" :class="`per${index + 1}`" v-for="(item, index) in arrData.slice(0,7)" :key="index">
  <span>{{ item.name }}</span>
  <span>{{ item.number }}</span>人
</div>

css:

&.per1 {
  top: 215px;
  left: 50px;
}

&.per2 {
  top: 113px;
  left: 3px;
}

&.per3 {
  top: 45px;
  left: 35px;
}

但在本圖使用後卻不起效,仍然在同一位置重疊多個數據

最終發現是符號問題;

錯誤寫法:

<div class="definfo" :class="'definfo${index}'" v-for="(item,index) in arr" :key="index"><span>{{item}}</span><span></span></div>

正確寫法:

<div class="definfo" :class="`definfo${index}`" v-for="(item,index) in arr" :key="index"><span>{{item}}</span><span></span></div>

至此,問題解決.