vue生成多个水球图

要在Vue中生成多个水球图，你可以使用一个循环来遍历多个数据并为每个数据生成一个水球图。

为了生成水球图，你可以使用一个第三方库，比如 `vue-waterfall`。该库提供了一个 `Waterfall` 组件，你可以将其放置在循环中，并为每个组件传递不同的数据。

以下是一个示例代码：

<template>
  <div>
    <Waterfall :data="waterfallData" v-for="(item, index) in items" :key="index" />
  </div>
</template>

<script>
import Waterfall from 'vue-waterfall'

export default {
  components: {
    Waterfall
  },
  data() {
    return {
      items: [
        { value: 50, color: '#ff0000' },
        { value: 80, color: '#00ff00' },
        { value: 30, color: '#0000ff' }
      ]
    }
  },
  computed: {
    waterfallData() {
      return this.items.map(item => ({ value: item.value, color: item.color }))
    }
  }
}
</script>

在这个例子中，我们使用 `v-for` 循环遍历 `items` 数组，并为每个项目生成一个 `Waterfall` 组件。每个组件的数据都不同，由 `value` 和 `color` 属性决定。在 `waterfallData` 计算属性中，我们将 `items` 数组转换为一个只包含 `value` 和 `color` 属性的新数组，以便将其传递给 `Waterfall` 组件。