【免费下载】 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
                }
            }]
        }
    }]
});

实际应用场景

ECharts LiquidFill 适用于多种场景：

1. 项目进度展示
2. 资源使用率监控
3. 目标完成度可视化
4. 数据仪表盘
5. 交互式数据报告

最佳实践建议

1. 对于移动端展示，适当调整字体大小和容器尺寸
2. 使用合理的颜色搭配确保可读性
3. 动态数据更新时保持适当的频率
4. 复杂形状水球应考虑性能影响
5. 多水球组合时注意视觉层次

通过以上介绍，您应该已经掌握了 ECharts LiquidFill 的基本使用方法。这个插件提供了丰富的配置选项，可以创建出各种精美的水球图效果，为您的数据可视化项目增添更多可能性。