ECharts水球图实战：从基础配置到动态交互全解析

原创

于 2026-02-27 01:27:49 发布 · 1.7k 阅读

标签

1. 从零开始：认识ECharts水球图

如果你正在寻找一种既美观又能直观展示百分比或进度数据的可视化方案，那么ECharts的水球图（Liquid Fill Chart）绝对值得你花时间研究。我第一次在项目里用上它，是为了展示一个知识掌握度的仪表盘，当时就觉得，比起干巴巴的进度条，这种带有波浪起伏动效的“液体”填充效果，视觉冲击力强太多了，用户一眼就能抓住重点。简单来说，水球图就是用动态的液体填充效果，来形象地表示一个0到1之间的比例值，比如任务完成度、内存使用率、满意度评分等等。

它的核心原理并不复杂，你可以把它想象成一个透明的容器，里面装着有颜色的“水”。这个“水”的高度就对应着你设置的数据值（比如0.7就代表70%的填充度）。更妙的是，这“水”不是静止的，它表面会有模拟真实水波的波浪在缓缓移动，让整个图表瞬间“活”了起来。这种动态效果对于需要实时或周期性更新数据的场景特别友好，比如服务器监控大屏，看着波浪随着CPU使用率起伏，那种感觉比看数字直观多了。

ECharts-liquidfill 是一个专门为ECharts提供水球图类型的扩展插件。这意味着，你无法在基础的ECharts包里直接找到它，需要额外安装。但别担心，安装和引入过程非常简单。它完美继承了ECharts强大的配置能力和交互特性，你可以轻松地调整颜色、形状、波浪动画，甚至响应点击事件。无论是简单的单数据展示，还是复杂的多波浪、动态交互仪表盘，它都能胜任。接下来，我就带你从最基础的安装配置开始，一步步玩转这个酷炫的图表。

2. 实战第一步：环境搭建与基础绘制

2.1 安装与版本兼容性：避开第一个大坑

万事开头难，但水球图的开头，你只要注意一个关键点，就能避开90%的报错：版本兼容性。这是我踩过的第一个坑，当时折腾了好久。

ECharts-liquidfill 的版本必须和你的 ECharts 主版本严格对应。通常的对应关系是：

ECharts 4.x 对应 echarts-liquidfill 2.x
ECharts 5.x 对应 echarts-liquidfill 3.x

如果你装错了，浏览器控制台就会给你抛出一个让人摸不着头脑的错误，比如 Component series.liquidFill not exists. Load it first.。这意思就是ECharts根本找不到“水球图”这个系列类型，因为你引入的扩展版本不对。

所以，正确的安装姿势是这样的。首先，在你的项目目录下（确保有package.json），用npm或yarn安装核心库和扩展库。我以目前更常用的 ECharts 5 和 liquidfill 3 为例：

# 安装 ECharts 5.x
npm install echarts@5
# 安装对应的 liquidfill 3.x
npm install echarts-liquidfill@3

如果你还在维护一个使用 ECharts 4 的老项目，那么应该安装对应的 2.x 版本：

# 安装 ECharts 4.x
npm install echarts@4
# 安装对应的 liquidfill 2.x
npm install echarts-liquidfill@2

安装好后，在你的Vue组件或JavaScript模块中引入它们。注意，必须先引入ECharts核心库，再引入水球图扩展，顺序不能错。

// 正确引入方式
import * as echarts from 'echarts';
// 这行导入会向 echarts 中注册 ‘liquidFill’ 系列类型
import 'echarts-liquidfill';

2.2 5分钟画出第一个水球图

环境配好了，我们来画一个最简单的。原理很简单：准备一个有宽高的DOM容器，用ECharts初始化它，然后给一个包含 series.type: 'liquidFill' 的配置项。

下面是一个最精简的HTML示例，你甚至可以直接复制到一个 .html 文件里用浏览器打开看效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的第一个水球图</title>
    <!-- 引入 ECharts 和 liquidfill 的CDN链接，注意版本匹配 -->
    <script src="https://webproxy.poorya-velaei-d67.workers.dev/https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script src="https://webproxy.poorya-velaei-d67.workers.dev/https://cdn.jsdelivr.net/npm/echarts-liquidfill@3/dist/echarts-liquidfill.min.js"></script>
</head>
<body>
    <!-- 图表容器，必须指定宽度和高度 -->
    <div id="liquidChart" style="width: 400px; height: 300px;"></div>
    <script>
        // 基于准备好的DOM，初始化ECharts实例
        var myChart = echarts.init(document.getElementById('liquidChart'));
        // 指定图表的配置项和数据
        var option = {
            series: [{
                type: 'liquidFill', // 系列类型指定为水球图
                data: [0.6] // 数据，0.6代表填充60%
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

保存并用浏览器打开这个文件，你应该能看到一个蓝色的、填充了60%空间、并且带有波浪动画的圆形水球图了！是不是很简单？data 数组里的数字就是填充比例。这个 0.6 就是水球图的灵魂，改变它，液面就会动画式地升降。

3. 深度定制：让你的水球图与众不同

基础图形有了，但默认的蓝色圆球可能满足不了你的设计需求。别急，水球图提供了极其丰富的配置项，让你可以玩出各种花样。我们来一个个拆解。

3.1 玩转多波浪与颜色

一个水球里可以不止一层波浪。通过给 data 数组设置多个值，就能创建出多层波浪叠加的效果，不仅信息量更丰富，视觉效果也更有层次感。

option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3], // 四个数据值，产生四层波浪
        color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'] // 为每一层波浪指定颜色
    }]
};

这段代码会生成一个从深蓝到浅蓝渐变、拥有四层波浪的水球。data 数组中的值 [0.6, 0.5, 0.4, 0.3] 分别代表从底层到顶层波浪的静止液面高度。color 数组则按顺序指定每一层波浪的颜色。如果你希望单独定制某一层波浪的样式，可以把 data 中对应的数字换成一个配置对象：

option = {
    series: [{
        type: 'liquidFill',
        data: [
            0.6,
            {
                value: 0.5, // 数值
                direction: 'left', // 这一层波浪向左移动
                itemStyle: {
                    color: 'red', // 这一层波浪是红色
                    opacity: 0.7  // 设置透明度
                }
            },
            0.4,
            0.3
        ]
    }]
};

3.2 改变形状：从圆形到任意SVG

谁说水球一定是圆的？通过 shape 属性，你可以轻松改变它的容器形状。

1. 内置基础形状： shape 属性可以直接使用一些预设值，比如 'circle'（圆形，默认）、'rect'（矩形）、'roundRect'（圆角矩形）、'triangle'（三角形）、'diamond'（菱形）、'pin'（水滴形）、'arrow'（箭头形）。

最低0.47元/天解锁文章