Python 使用 PyEcharts 绘制精美动态水球图
简介
水球图(Liquid Chart)是一种非常适合展现百分比数据的图表,常用于工作汇报、数据大屏等场景。通过水球的波动效果,可以直观地展示完成率、业绩进度等指标。PyEcharts 是 Echarts 的 Python 封装库,提供了便捷的 Liquid 组件来实现这一效果。
如何使用 Python 的 PyEcharts 库绘制动态水球图。内容涵盖环境安装、基础绘图方法、形状与边框配置、多波浪效果展示以及自定义标注和颜色。此外,还讲解了如何利用 Grid 组件实现多图并列布局,并提供了关于动态数据更新、性能优化及响应式适配的实用建议。通过示例代码,读者可以快速掌握水球图的参数设置与高级定制技巧,满足工作汇报及数据大屏的展示需求。

水球图(Liquid Chart)是一种非常适合展现百分比数据的图表,常用于工作汇报、数据大屏等场景。通过水球的波动效果,可以直观地展示完成率、业绩进度等指标。PyEcharts 是 Echarts 的 Python 封装库,提供了便捷的 Liquid 组件来实现这一效果。
推荐使用 pip 进行安装,若网络较慢可指定清华源:
pip install pyecharts
# 或使用镜像源
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ pyecharts
from pyecharts import options as opts
from pyecharts.charts import Grid, Liquid
from pyecharts.commons.utils import JsCode
创建一个简单的圆形水球图,设置填充比例为 0.35。
c1 = (
Liquid()
.add(
"lq",
[0.35],
center=["30%", "50%"],
is_outline_show=False,
shape="circle"
)
.set_global_opts(title_opts=opts.TitleOpts(title="基本水球图 -1", pos_top="30", pos_left="10%"))
.render("basic_liquid.html")
)
参数说明:
center: 设置水球在容器中的位置,支持百分比或像素值。shape: 水球形状,可选 circle, rect, roundRect, triangle, diamond, pin, arrow,默认为 circle。is_outline_show: 是否显示外边框。通过配置项调整外观,使其更符合设计需求。
c2 = (
Liquid()
.add(
"lq",
[0.35],
center=["30%", "50%"],
is_outline_show=True,
shape="roundRect"
)
.set_global_opts(title_opts=opts.TitleOpts(title="基本水球图 -2", pos_top="30", pos_left="10%"))
.render("outline_liquid.html")
)
支持同时展示多个水位线,模拟不同层级的数据状态。
c3 = (
Liquid()
.add(
"lq",
[0.75, 0.5, 0.2],
center=["30%", "50%"],
is_outline_show=True,
shape="roundRect"
)
.set_global_opts(title_opts=opts.TitleOpts(title="多波浪水球图", pos_top="30", pos_left="10%"))
.render("multi_wave_liquid.html")
)
使用 JsCode 实现复杂的标签格式化,并自定义填充颜色。
c4 = (
Liquid()
.add(
"lq",
[0.6],
center=["30%", "50%"],
is_outline_show=True,
shape="diamond",
color=["#008B8B"],
label_opts=opts.LabelOpts(
font_size=30,
formatter=JsCode(
"""function (param) {
return ('完成度:'+Math.floor(param.value * 10000) / 100) + '%';
}"""
),
position="inside"
)
)
.set_global_opts(title_opts=opts.TitleOpts(title="自定义标注水球图", pos_top="30", pos_left="10%"))
.render("custom_label_liquid.html")
)
技巧:
color 参数支持列表,可为每个波浪设置不同颜色。formatter 中使用 JavaScript 代码,可调用 param.value 获取当前数值。利用 Grid 组件将多个水球图组合在同一视图中,适用于仪表盘布局。
l1 = (
Liquid()
.add(
"lq",
[0.2],
shape="circle",
center=["20%", "50%"],
label_opts=opts.LabelOpts(
font_size=20,
formatter=JsCode(
"""function (param) {
return ('完成度:'+Math.floor(param.value * 10000) / 100) + '%';
}"""
),
position="inside"
)
)
)
l2 = (
Liquid()
.add(
"lq",
[0.5, 0.3],
shape="diamond",
center=["50%", "50%"],
label_opts=opts.LabelOpts(
font_size=20,
formatter=JsCode(
"""function (param) {
return ('完成度:'+Math.floor(param.value * 10000) / 100) + '%';
}"""
),
position="inside"
)
)
)
l3 = Liquid().add(
"lq",
[0.85, 0.5, 0.2],
shape="roundRect",
center=["80%", "50%"],
label_opts=opts.LabelOpts(
font_size=20,
formatter=JsCode(
"""function (param) {
return ('完成度:'+Math.floor(param.value * 10000) / 100) + '%';
}"""
),
position="inside"
)
)
grid = Grid().add(l1, grid_opts=opts.GridOpts()).add(l2, grid_opts=opts.GridOpts()).add(l3, grid_opts=opts.GridOpts())
grid.render("grid_liquid.html")
虽然 PyEcharts 主要用于静态渲染,但结合前端 JS 可实现动态刷新。建议在生成 HTML 后,通过轮询接口更新数据并重新渲染图表。
当页面包含大量水球图时,建议减少波浪数量(如不超过 3 层),并限制 shape 复杂度,以避免浏览器卡顿。
使用 center 百分比定位可确保在不同屏幕尺寸下保持相对位置。若需绝对定位,请配合 CSS Media Query 调整。
PyEcharts 的 Liquid 组件为 Python 开发者提供了强大的数据可视化能力。通过灵活配置形状、颜色、标注及布局,可以轻松制作出专业的动态水球图。在实际应用中,注意控制复杂度以保证渲染性能,并结合业务需求选择合适的展示形式。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online
基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具,curl 转代码在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online