Question

我想在Vue JS中有一个简单的迷你图。但是我不确定如何在迷你图中使用标签和值参数。我想要一个图表，显示按年注册的用户数，因此我有2个字段“ year” 和“ count” 。我无法获得年份并直接计数...

火花线;

<v-sparkline :value="countByYears.count" :labels="countByYears.year" color="rgba(255, 255, 255, .7)" height="100" padding="24" stroke-linecap="round" smooth>
</v-sparkline>

数据；

data: () => ({
  countByYears: [
     {year : 2020, count : 50},
     {year : 2019, count : 32},
     {year : 2018, count : 51},
     {year : 2017, count : 16}
  ],
})

有没有一种方法可以直接获得年份并在对象列表中对对象进行计数而无需计算它们？

Answer 1

我认为您只需要计算两个不同的数组：

computed: {
 values() {
   return this.countForYears.map(x=>x.count);
 },
labels() {
  return this.countForYears.map(x=>x.year);
}
}

<v-sparkline :value="values" :labels="labels" color="rgba(255, 255, 255, .7)" height="100" padding="24" stroke-linecap="round" smooth>
</v-sparkline>

并使用这些值作为迷你图上的值和标签props。

完整示例：

https://codepen.io/sbosell/pen/VwvrMPW?editors=1010

Vue JS-将v-sparkline与对象列表一起使用

1 个答案: