vue实现水球图

实现水球图的方法

在Vue中实现水波球图（水球图）可以通过第三方库或手动绘制实现。以下是两种常见方法：

使用第三方库（如echarts-liquidfill）

echarts-liquidfill是基于ECharts的水波球图插件，专为展示百分比数据设计。

安装依赖：

npm install echarts echarts-liquidfill --save

Vue组件示例：

<template>
  <div ref="liquidChart" style="width: 400px; height: 400px"></div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.liquidChart);
      chart.setOption({
        series: [{
          type: 'liquidFill',
          data: [0.6, 0.5, 0.4], // 水波高度（0-1）
          radius: '80%',
          outline: {
            show: false
          },
          backgroundStyle: {
            color: '#E6F7FF'
          },
          label: {
            fontSize: 28,
            color: '#1890FF'
          }
        }]
      });
    }
  }
};
</script>

使用SVG手动绘制

通过SVG和CSS动画实现基础水波效果：

<template>
  <div class="liquid-container">
    <svg viewBox="0 0 100 100" class="liquid-svg">
      <path :d="wavePath" fill="#1890FF" class="liquid-wave" />
      <circle cx="50" cy="50" r="45" fill="none" stroke="#E6F7FF" stroke-width="2"/>
    </svg>
    <div class="liquid-value">{{ percentage }}%</div>
  </div>
</template>

<script>
export default {
  props: {
    percentage: { type: Number, default: 60 }
  },
  computed: {
    wavePath() {
      const y = 50 - (this.percentage / 100 * 40);
      return `M0,${y} Q25,${y-10} 50,${y} T100,${y} L100,100 L0,100 Z`;
    }
  }
};
</script>

<style>
.liquid-container {
  position: relative;
  width: 200px;
  height: 200px;
}
.liquid-svg {
  width: 100%;
  height: 100%;
}
.liquid-wave {
  animation: wave 3s linear infinite;
}
.liquid-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #1890FF;
}
@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50px); }
}
</style>

关键参数说明

1. 数据范围：水波高度应为0-1之间的值，对应0%-100%
2. 样式配置：
   • radius 控制水球大小
   • outline 设置边框样式
   • backgroundStyle 定义背景色
3. 动画效果：可通过CSS或ECharts内置动画调整波动速度

两种方法分别适用于快速集成和自定义需求场景，根据项目复杂度选择即可。