vue实现水球图
Vue 实现水波球图（水球图）
水波球图（Liquid Fill Gauge）是一种动态展示百分比数据的可视化图表，常用于展示进度或完成率。以下是基于 Vue 和 ECharts 的实现方法：
安装依赖
需要安装 ECharts 和 ECharts 水波球图插件：
npm install echarts echarts-liquidfill基础实现代码
在 Vue 组件中引入并初始化图表：
<template>
<div ref="liquidChart" style="width: 300px; height: 300px"></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);
const option = {
series: [{
type: 'liquidFill',
data: [0.6], // 水波高度比例（0-1）
radius: '80%',
outline: {
show: false
},
backgroundStyle: {
color: '#E8F7FF'
},
label: {
position: ['50%', '50%'],
formatter: '{c}%', // 显示百分比
fontSize: 24,
color: '#1890FF'
}
}]
};
chart.setOption(option);
}
}
}
</script>高级配置选项
可以通过以下参数自定义水波球图：
option = {
series: [{
type: 'liquidFill',
data: [0.5, 0.4, 0.3], // 多个波浪层
color: ['#294D99', '#156ACF', '#1598F2'], // 波浪颜色
amplitude: 10, // 波浪振幅
waveLength: '50%', // 波浪长度
phase: 0, // 波浪相位
period: (val, i) => 2000 * (i + 1), // 动画周期
direction: 'right', // 波浪方向
shape: 'circle', // 容器形状（circle/rect/roundRect/triangle/diamond/pin/arrow）
itemStyle: {
opacity: 0.8 // 透明度
}
}]
}动态更新数据
可以通过方法动态更新水波高度：
updateLiquidLevel(newValue) {
const chart = echarts.getInstanceByDom(this.$refs.liquidChart);
chart.setOption({
series: [{
data: [newValue]
}]
});
}注意事项
- 确保容器有明确的宽高尺寸
- 多波浪层时data数组值应递减（如[0.6, 0.5, 0.4]）
- 在组件销毁时调用dispose()方法清除实例：
beforeDestroy() { echarts.dispose(this.$refs.liquidChart); }
通过调整这些参数可以实现不同风格的水波球图效果，包括波浪数量、颜色、运动方向等视觉元素。
