当前位置：首页 > VUE

vue实现水球图

2026-02-17 17:39:32VUE

实现水波球图的方法

在Vue中实现水波球图（也称为水球图或液体填充图）可以通过第三方库如echarts或antv/g2来实现。以下是基于echarts的具体实现步骤。

安装依赖

确保项目中已安装echarts和vue-echarts（可选）。若未安装，可通过以下命令安装：

npm install echarts vue-echarts

基础水波球图实现

引入ECharts和水波球图扩展
水波球图是ECharts的扩展图表，需单独引入：
```
import * as echarts from 'echarts';
import 'echarts-liquidfill';
```

在Vue组件中初始化图表
在组件的mounted钩子中初始化图表：

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chartDom);
    chart.setOption({
      series: [{
        type: 'liquidFill',
        data: [0.6], // 填充比例（0-1）
        radius: '80%',
        outline: {
          show: false
        },
        backgroundStyle: {
          color: '#E0F7FA'
        },
        label: {
          show: true,
          formatter: (value) => `${(value * 100).toFixed(0)}%`,
          fontSize: 24,
          color: '#01579B'
        }
      }]
    });
  }
};

模板中添加容器
在模板中为图表预留一个DOM元素：

<template>
  <div ref="chartDom" style="width: 300px; height: 300px;"></div>
</template>

自定义水波效果

通过调整liquidFill系列的配置项可实现动态效果：

波浪数量：通过waveCount控制（默认3条）。
动画速度：通过waveAnimation的duration调整。
颜色渐变：通过color配置数组实现多色渐变。

示例配置：

series: [{
  type: 'liquidFill',
  data: [0.5, 0.4, 0.3], // 多段波浪
  waveCount: 2,
  waveAnimation: {
    duration: 2000
  },
  color: ['#4FC3F7', '#4DD0E1', '#26C6DA']
}]

动态更新数据

通过监听数据变化动态更新图表：

watch: {
  value(newVal) {
    if (this.chart) {
      this.chart.setOption({
        series: [{ data: [newVal] }]
      });
    }
  }
}

注意事项

响应式适配
监听窗口变化时需调用chart.resize()：
```
window.addEventListener('resize', () => chart.resize());
```
SSR兼容
若使用服务端渲染（如Nuxt），需通过动态导入避免window未定义错误：
```
if (process.client) {
  import('echarts-liquidfill');
}
```

完整代码示例可参考ECharts LiquidFill官方示例。

vue实现水球图