当前位置：首页 > VUE

vue实现水球图

2026-03-29 17:47:50VUE

实现水球图的方法

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

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

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

vue实现水球图

安装依赖：

vue实现水球图

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>