vue3水波柱状图 ，实现

 效果图

//引用页面
<div style="height: 60px;background-color: #fff;border-radius: 5px;width: 40px;"><WavePercentage:percentage="progress"primary-color="#ffcb7c"secondary-color="#ffcb7c"/></div>import WavePercentage from './WavePercentage.vue'
const progress = ref(60)//WavePercentage页面
<template><div ref="containerRef" class="wave-percentage-container"><canvas ref="canvasRef" class="wave-canvas"></canvas></div></template><script setup>import { ref, onMounted, onUnmounted, defineProps, withDefaults } from 'vue'class Wave {constructor(height, power = 60) {this.__force = 0this.__wavePower = powerthis.__count = 0this.__y = heightthis.__h = heightthis.__pos = 0}get height() {return this.__h}set height(value) {this.__h = Math.max(0, value)}get percent() {return (1 - this.__y / this.__h) * 100}set percent(value) {this.__y = this.__h * (1 - value / 100)}update() {// 添加一个持续的波动效果，但不改变实际百分比this.__count += 0.1this.__pos += 0.04this.__force = Math.sin(this.__count)}draw(ctx, w, h, makeGrd, percentage) {// 固定波浪高度，但添加动态波动效果const actualY = this.__h * (1 - percentage / 100)ctx.fillStyle = makeGrd(h)ctx.beginPath()ctx.moveTo(0, actualY)const p = Math.sin(this.__pos)ctx.quadraticCurveTo(w * (p + 0.25), actualY + (this.__wavePower * this.__force * 0.2), w * (p + 0.5), actualY)ctx.quadraticCurveTo(w * (p + 0.75), actualY - (this.__wavePower * this.__force * 0.2), w, actualY)ctx.lineTo(w, h)ctx.lineTo(0, h)ctx.lineTo(0, actualY)ctx.closePath()ctx.fill()}}// Props definitionconst props = defineProps({percentage: {type: Number,default: 50,validator: (value) => value >= 0 && value <= 100},wavePower: {type: Number,default: 100},primaryColor: {type: String,default: '#419dff'},secondaryColor: {type: String,default: '#66bfff'}})// Refs for canvas and containerconst containerRef = ref(null)const canvasRef = ref(null)// Animation variableslet animationFrameId = nulllet wave = nulllet ctx = null// Create gradient functionconst makeGrd = (ctx, h, primaryColor, secondaryColor) => {const g = ctx.createLinearGradient(0, 0, 0, h)g.addColorStop(0, primaryColor)g.addColorStop(1, secondaryColor)return g}// Draw functionconst draw = () => {if (!containerRef.value || !canvasRef.value) returnconst canvas = canvasRef.valueconst container = containerRef.value// Update dimensionsconst w = canvas.width = container.clientWidthconst h = canvas.height = container.clientHeight// Recreate wave if not exists or dimensions changedif (!wave || wave.height !== h) {wave = new Wave(h, props.wavePower)}// Update wave animationwave.update()ctx = canvas.getContext('2d')// Clear canvasctx.globalCompositeOperation = 'source-over'ctx.fillStyle = "rgba(255, 255, 255, 1)"ctx.fillRect(0, 0, w, h)ctx.globalCompositeOperation = 'xor'ctx.fillStyle = "rgba(0, 0, 0, 1)"ctx.fillRect(0, 0, w, h)// Draw wave with current percentagewave.draw(ctx, w, h, (h) => makeGrd(ctx, h, props.primaryColor, props.secondaryColor), props.percentage)// Draw percentage textctx.textAlign = "center"ctx.textBaseline = 'middle'ctx.font = 'bold 1rem serif'ctx.fillStyle = "rgba(0, 0, 0, 1)"ctx.fillText(`${props.percentage | 0}%`, w / 2, h / 2)// Continue animationanimationFrameId = requestAnimationFrame(draw)}// Lifecycle hooksonMounted(() => {animationFrameId = requestAnimationFrame(draw)})onUnmounted(() => {if (animationFrameId) {cancelAnimationFrame(animationFrameId)}})</script><style scoped>.wave-percentage-container {position: relative;width: 100%;height: 100%;}.wave-canvas {width: 100%;height: 100%;}</style>

直接贴代码可以直接使用，支持动态设置值，修改波纹颜色