【前端】【Echarts】【Liquidfill 水球图】深入理解 ECharts Liquidfill 水球图：从入门到进阶

效果

💧深入理解 ECharts Liquidfill 水球图：从入门到进阶

在可视化数据展示中，水球图（Liquidfill）是一种极具表现力的图表。它形象地用"水位高低"表示某个百分比或完成度，非常适合展示指标进度、占比、加载状态等。

本文将结合实际 HTML 示例，带你全面掌握如何使用 ECharts + echarts-liquidfill 插件绘制水球图，并通过多个实例逐步讲解配置技巧。

📦 准备工作

在 HTML 中使用水球图，需要引入两个 JS 库：

html 复制代码

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@3/dist/echarts-liquidfill.min.js"></script>

这两个脚本一个是 ECharts 核心库，另一个是专门用于支持 liquidfill 类型的插件。

🌊 示例一：基础水球图（快速上手）

js 复制代码

series: [{
  type: 'liquidFill',
  data: [0.5],
  radius: '80%',
  label: { formatter: '50%' },
  itemStyle: { color: '#00c9ff' }
}]

🎯说明：

type: 'liquidFill' 是必须的类型声明。
data: [0.5] 表示水位高度为 50%。
label.formatter 是中心文字内容。
itemStyle.color 决定水的颜色。

适合用于快速展示"当前进度"或"完成率"。

🌈 示例二：进阶美化配置（多层波浪 + 富文本标签 + 背景边框）

js 复制代码

data: [0.7, 0.65, 0.6]

✨ 使用多个数值可叠加多层波浪，让效果更有层次感。

js 复制代码

label: {
  formatter: '{a|完成率}\\n{b|70%}',
  rich: {
    a: { fontSize: 14, color: '#555' },
    b: { fontSize: 26, fontWeight: 'bold', color: '#ff5722' }
  }
}

🎨 使用富文本（rich）可以设置多行文字、大小、颜色等个性样式。

js 复制代码

backgroundStyle: {
  borderColor: '#ff5722',
  borderWidth: 2,
  shadowBlur: 10
},
outline: {
  show: true,
  borderDistance: 5,
  itemStyle: {
    borderColor: '#ff9800',
    borderWidth: 4
  }
}

🧱 以上配置用于美化水球的边框、阴影，适合用于正式仪表盘展示场景。

🔄 示例三：动态水位更新（实时图表）

js 复制代码

let value = 0.3;
setInterval(() => {
  value = (Math.random() * 0.9 + 0.1).toFixed(2);
  chart.setOption({
    series: [{
      data: [value],
      label: { formatter: () => Math.round(value * 100) + '%' }
    }]
  });
}, 2000);

⚡ 每隔两秒生成一个随机水位，实现动态水球效果。这种方式适合展示：

实时系统资源使用情况
服务器负载
传感器水位数据

🛠️ 更多配置选项速览

属性名	功能说明
`radius`	设置水球大小，如 `'80%'` 或 `150`（像素）
`center`	设置水球在容器中的位置，如 `['50%', '50%']`
`label.formatter`	设置中间文本内容
`itemStyle`	设置水波颜色和透明度
`backgroundStyle`	设置背景边框、阴影效果
`outline`	设置外部描边效果

🧪 使用建议与拓展思路

结合后端接口实时展示 KPI 数据。
嵌入仪表盘与其他图表联动使用。
支持响应式显示与点击事件监听（配合 ECharts 事件 API）。

✅ 小结

Liquidfill 水球图虽然属于 ECharts 的扩展插件，但配置方式与普通图表非常类似，借助直观的"水位"视觉表达，在很多场景下都能让数据传达更加清晰有力。

你可以通过不断调整配置参数、颜色、字体、波层，打造出富有表现力的视觉图表。

源码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>ECharts Liquidfill 水球图全面示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f9f9f9;
      padding: 20px;
    }
    h2, p {
      text-align: center;
    }
    .section {
      max-width: 1200px;
      margin: 0 auto 40px;
      padding: 20px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    .chart-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
    }
    .chart-box {
      width: 300px;
      height: 300px;
      position: relative;
    }
    .desc {
      font-size: 14px;
      color: #555;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

<h2>💧 ECharts Liquidfill 水球图全方位示例</h2>
<p>本页面展示了多个水球图的实际应用，并详细解释了每个配置项的含义。</p>

<div style="display:flex">
<div class="section">
  <div class="desc">
    <strong>示例 1：基础水球图</strong><br>
    使用最简配置，仅包含一个水波层，展示 50% 的值，适合快速上手。
  </div>
  <div class="chart-container">
    <div class="chart-box" id="chart1"></div>
  </div>
</div>

<div class="section">
  <div class="desc">
    <strong>示例 2：多层波浪 + 自定义文本 + 背景边框</strong><br>
    展示多个水波层，使用富文本显示标签，同时增加边框和阴影增强视觉效果。
  </div>
  <div class="chart-container">
    <div class="chart-box" id="chart2"></div>
  </div>
</div>

<div class="section">
  <div class="desc">
    <strong>示例 3：动态水球图</strong><br>
    每 2 秒随机变更水位，适合展示实时数据（如内存占用、CPU 使用率等）。
  </div>
  <div class="chart-container">
    <div class="chart-box" id="chart3"></div>
  </div>
</div>

</div>
<!-- 引入 ECharts 核心库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- 引入 ECharts LiquidFill 插件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@3/dist/echarts-liquidfill.min.js"></script>

<script>
  // 示例1：基础水球图
  const chart1 = echarts.init(document.getElementById('chart1'));
  chart1.setOption({
    series: [{
      type: 'liquidFill',
      data: [0.5],
      radius: '80%',
      label: { formatter: '50%' },
      itemStyle: { color: '#00c9ff' }
    }]
  });

  // 示例2：多层波浪 + 自定义文本 + 背景
  const chart2 = echarts.init(document.getElementById('chart2'));
  chart2.setOption({
    series: [{
      type: 'liquidFill',
      data: [0.7, 0.65, 0.6],
      radius: '80%',
      label: {
        formatter: '{a|完成率}\n{b|70%}',
        rich: {
          a: { fontSize: 14, color: '#555' },
          b: { fontSize: 26, fontWeight: 'bold', color: '#ff5722' }
        }
      },
      itemStyle: { color: '#ff5722', opacity: 0.7 },
      backgroundStyle: {
        borderColor: '#ff5722',
        borderWidth: 2,
        shadowColor: 'rgba(0,0,0,0.2)',
        shadowBlur: 10
      },
      outline: {
        show: true,
        borderDistance: 5,
        itemStyle: {
          borderColor: '#ff9800',
          borderWidth: 4
        }
      }
    }]
  });

  // 示例3：动态水球图
  const chart3 = echarts.init(document.getElementById('chart3'));
  let value = 0.3;
  chart3.setOption({
    series: [{
      type: 'liquidFill',
      data: [value],
      radius: '80%',
      label: { formatter: () => Math.round(value * 100) + '%' },
      itemStyle: { color: '#67e0e3' }
    }]
  });

  setInterval(() => {
    value = (Math.random() * 0.9 + 0.1).toFixed(2);
    chart3.setOption({
      series: [{
        data: [value],
        label: { formatter: () => Math.round(value * 100) + '%' }
      }]
    });
  }, 2000);
</script>

</body>
</html>