ECharts LiquidFill 水球图插件使用指南

原创于 2025-06-29 09:21:17 发布 · 644 阅读

5 ·

CC 4.0 BY-SA版权

ECharts LiquidFill 水球图插件使用指南

什么是 ECharts LiquidFill

ECharts LiquidFill 是基于 ECharts 的一个扩展插件，专门用于创建精美的水球图（Liquid Fill Chart）。水球图是一种数据可视化形式，通过液体填充效果直观展示百分比数据，常用于展示进度、完成率等场景。

基础使用方法

要使用 ECharts LiquidFill，首先需要在 HTML 中引入必要的资源：

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

然后创建一个容器元素用于显示图表：

<div class="chart" style="width: 100%; height: 400px;"></div>

基本配置示例

最简单的配置只需要指定图表类型为 liquidFill 并提供数据：

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3]
    }]
};

核心配置参数详解

1. 数据配置

data 属性可以接受多种形式：

数字数组：[0.6, 0.5, 0.4, 0.3]

对象数组，可配置波浪方向、振幅等：

data: [0.6, {
    value: 0.5,
    direction: 'left'
}, {
    value: 0.4,
    amplitude: 15
}]

2. 外观配置

radius: 控制水球大小，如 '70%'
outline: 控制外边框显示
backgroundStyle: 背景样式配置
itemStyle: 波浪样式配置

3. 动画效果

waveAnimation: 是否启用波浪动画
amplitude: 波浪振幅
waveLength: 波浪长度
phase: 波浪相位
period: 波浪周期

4. 形状配置

通过 shape 属性可以自定义水球形状：

内置形状：'circle'(默认)、'rect'、'diamond'、'triangle'、'pin'
自定义 SVG 路径：'path://M367.855,428.202...'

高级功能示例

1. 自定义形状水球

shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794...'

2. 动态更新数据

setInterval(function() {
    var data = [];
    var last = 1;
    for (var i = 0; i < 4; ++i) {
        last = Math.floor(last * (Math.random() * 0.5 + 0.5) * 100) / 100;
        data.push(last);
    }
    chart.setOption({
        series: [{
            data: data
        }]
    });
}, 3000);

3. 响应式设计

chart.setOption({
    baseOption: option,
    media: [{
        query: {
            maxWidth: 300
        },
        option: {
            series: [{
                label: {
                    fontSize: 26
                }
            }]
        }
    }]
});