vue通过echarts生成多个水球图

要在 Vue 中使用 Echarts 生成多个水球图，你需要先安装 Echarts：

npm install echarts --save

然后在 Vue 组件中引入 Echarts：

import echarts from 'echarts'

接下来，你需要创建一个包含多个水球图的容器，在 Vue 的 `mounted` 钩子函数中使用 Echarts 渲染水球图：

<template>
  <div class="container">
    <div class="chart" ref="chart1"></div>
    <div class="chart" ref="chart2"></div>
    <!-- 其他水球图的容器 -->
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    // 使用 Echarts 渲染水球图
    this.renderChart(this.$refs.chart1, 50) // 第一个水球图，进度为 50%
    this.renderChart(this.$refs.chart2, 80) // 第二个水球图，进度为 80%
    // 渲染其他水球图
  },
  methods: {
    renderChart(container, percent) {
      const chart = echarts.init(container)
      chart.setOption({
        series: [
          {
            type: 'liquidFill',
            data: [percent / 100],
            color: ['#00a6ff', '#71c9ff', '#c7e1ff'],
            // 其他配置项
          }
        ]
      })
    }
  }
}
</script>

在这个例子中，我们创建了多个水球图的容器，并在 `mounted` 钩子函数中使用 `renderChart` 方法来渲染每个水球图。在 `renderChart` 方法中，我们使用 Echarts 提供的 `liquidFill` 类型来绘制水球图，通过传递不同的进度值来生成多个水球图。

当然，你还可以根据自己的需求来调整代码，比如使用 Vue 组件来封装水球图，或者将数据传递给组件来动态生成水球图等。