【前端】【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 设置外部描边效果

🧪 使用建议与拓展思路

  1. 结合后端接口实时展示 KPI 数据
  2. 嵌入仪表盘与其他图表联动使用
  3. 支持响应式显示与点击事件监听(配合 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>