vue-循环样式

最近在改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>

至此,问题解决.