数据可视化用于成都某大型地下商场雨水收集池信息展示

数据可视化用于成都某大型地下商场雨水收集池信息展示

刘 浩

（华东建筑设计研究院有限公司 上海 200011）

摘要 基于Python+Echarts的大数据可视化系统，利用Python的数据获取技术（爬虫技术），获取历年降雨量详细信息。后台采用基于Python 的 Flask 框架实现数据接口功能，综合使用HTML、CSS、JavaScript等技术，结合Echarts 数据可视化组件，进行数据配置管理，快速实现大屏数据可视化的应用表达,满足行业用户进行数据可视化表达时低成本,高效率的需求，为决策者提供科学化的决策辅助。给排水基础数据必将孪生出数字化给排水。

关键字 Python Echarts 数据可视化 地下商场 数字化给排水

0. 引言

Python编程语言效率高，代码简洁易懂，并且可集成数据获取（爬虫Web Scrapy），数据挖掘及数值分析，可作为数据可视化的基础。所以，使用Python处理较大的数据，能够在短时间内将数据可视化^[1]。通过可现化后的数据能够及时制定处理手段和合理策略。除此之外，数据可视化还可以帮助管理者监测突发事件，及时制足相关应急处理方案和后续事宜，提高管理能力。结合项目，运用数据监测降雨量情况，并后续可加入报警等功能，实现应急安全管理。

数据可视化常见工具包括 Arbor.js、D3.js、Data.js、Google Chart Tools、HighCharts、Echarts、iCharts、R、Tableau Public、Visual.ly、Python ( 如Plotly 包 ) 等^[2]。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），开源，直观，生动，可交互，可高度个性化定制的数据可视化图表。

近些年的元宇宙的爆火发展，以及数字孪生的大热，亟待需要各个领域的技术协同发展，尤其是数字化底层技术的迭代和联接，整合数字化的实时连接、沉浸互动、多模态模拟及连接现实世界等方面^[3]。数字化即是数据对决策的影响力。随着联网设备升级、联网成本降低，数字空间的丰富将为物理世界拓展新的维度，为生产、生活更方面提高效率、创造新需求。元宇宙是一个包罗万象、极为宏大且无限逼近真实的虚拟世界。除了资本助力外，更需要区块链、芯片、云计算、海量存储、低延迟网络、VR、AI等技术的飞跃来支持。而“工业版元宇宙”的必经之路，正是数字孪生。

最早提出Digital Twin（数字孪生）概念的Michael Grieves教授认为，数字孪生概念，与现实环境相关联，甚至能实现实时监控与控制；具备高交互性，能够评估可能会发生的情况。现有的给排水设计依托于理论，在数据的支撑下实现项目的完成，未来，数字孪生用于给排水设计，即数字化给排水，也就是数据对给排水设计全过程的监测和预警，是可实现的必然的趋势。数字城市，智慧城市等理念近年来也得到一定的发展和落地，同样今后也一定会出现稳定成熟的数字化给排水以及智慧给排水。

0. 地下商场雨水收集池设计

1.1 位于成都的某商场（简称SKP）建筑均位于地面以下，地面为景观公园，地面有少量地下室出地面通道以及设备机房出屋面井道及设备。地下空间共五层（带有局部夹层），-13米以上部分主要为商业，局部为机动车库，-13米以下部分主要为机动车库，局部为商业。SKP商场总用地面积126759.77平方米。以-13m所在楼层作为1F，-7m所在楼层作为2F,2F屋顶即为景观公园层。-13m以下楼层分别为B1F,B2F,B3F。因为项目主体建筑位于地面以下，总用地面积中约42035平方米位于市政雨水系统标高以下，需压力排水排出，即如图1所示：2F屋面小于±0.000部分，标高-7.00，以及标高-13.00三部分。

图1：不同标高的汇水范围示意

1.2 无法重力排至市政雨水系统的雨水，如下图所示，先收集至B1层的雨水收集池，经提升泵提升至地面，经弃流后，再一次排入雨水回用系统，处理后回用于绿化灌溉等。如图2.

图2：雨水提升原理示意

1.3本项目根据建筑特点，于B1层设置11个雨水收集池。图3所示位置。

图3：雨水收集池的位置示意

根据《建筑给水排水设计标准》 GB 50015-2019按照下沉广场来考虑可取重现期50年，本项目提高标准至100年，并初步计算出泵房内雨水集水池的有效容积，本建筑项目的雨水收集池数量多，且分散，适合用于数据可视化大屏展示信息。各集水池统计如下表1所示：

表1：雨水集水池容积

0. 数据可视化

2.1 总览

2.1.1 数据可视化效果呈现出SKP-雨水收集池信息展示,截图如图4：

图4：大屏展示效果截图

整个大屏呈现出动态刷新展示效果，还可以实时更新数据。根据降雨量自动更新面板内的历年降雨数据，小时强降雨，水球图，以及历年最大月降雨量。

2.1.2 数据可视化封装采用Python调用flask以及app运行代码如下：

from flask import Flask,render_template,request#pip install flask

app = Flask(__name__)#固定写法
@app.route("/")#路由
def index():#定义一个
return render_template("index.html")
if __name__ == '__main__': #程序入口
app.run(debug=True)#启动一个flask

2.1.3 综合运用HTML，CSS，JS等将body分为：header，mainbox两部分。

header：SKP-雨水收集池信息展示

mainbox：用类来定义，部分代码如下：

<p class="column">

2.1.4 数据刷新通过设置meta，部分代码如下：

<meta http-equiv="refresh" content="10">

2.2 雨水收集池信息

动态绘制基本的雨水收集池容积，通过柱状图（图5）和南丁格尔玫瑰图（图6），可详尽体现出11个雨水收集池的容积信息。

图5：柱状图展示收集池信息 图6：玫瑰图展示收集池信息

2.2.1 柱状图部分代码如下：

// 柱状图模块 11个雨水收集池容积

(function() {
// 实例化对象

charts.init(document.querySelector(".bar .chart"));
// 指定配置和数据
var option = {
color: ["#2f89cf"],// 指定配置和数据

tooltip: {···},

trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
} },

grid: {···}, // 方格网配置

xAxis: {···},// x轴配置

yAxis: {···},// y轴配置

series: {···},// 配置，数据，以及显示效果等，黄色字体

}

// 把配置给实例对象
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});

2.2.2 南丁格尔玫瑰图部分代码如下

// 南丁格尔玫瑰图定制 水池容积分析

series: [{ ··· },

// 修饰饼形图文字相关的样式 label对象
label: { fontSize: 15, show:true, normal: { formatter: '{b}:{c}' + '\n\r' + '({d}%)', ]

2.3 降雨量数据

利用Python爬虫Web Scrapy技术，可自动获取中国气象网的降雨量信息，按照年份获取2017年~2021年降雨量数据。降雨量数据经后台融合计算，并展示为图7和图8：

图7：历年降雨数据汇总截图 图8：历年最大月降雨量截图

并且可以自动更新新的年份，待2022年降雨量获取后，便可增加至历年降雨数据中。同时，继承上述折线图的最大月数据，可进一步描绘出最大月的详细至每日的数据，标注和计算出最大日降雨量231.39，和本月的平均降雨量24.15mm。获取历年的最大月数据亦可以更新。

2.4 复核与监控

按照规范计算建筑屋面5min降雨量，本次展示60min降雨量，全部收集至蓄水池，来衡量安全性。假设在不启动排水泵的前提下，雨水池均可依靠自身容积承纳小时强降雨的雨水量，安全性可靠，仅2020年开启水泵排水。如图9和图10.

图9：小时降雨量占比集水池容积 图10：水球图展示占比信息

图10水球图展示的部分代码如下：

//水球图部分代码如下，于html内实现

var chart_lhao = echarts.init(document.getElementById('lhao'), 'white', {renderer: 'canvas'});

const ColorList = ['#E8FF94', '#89FEBA', '#5EDCEB', '#57A4FF', '#8E87FF'] // 链群颜色值
var arrayTemp = [***];
var titleData =[]
var series =[]
arrayTemp.forEach((item, index) => {
const color = ColorList[index];
titleData.push({··· });
series.push({type: 'liquidFill', name: item.name, radius: '32%',center: [`${18 * (index + 1)}%`, '50%'],
// shape: 'roundRect',
data: [··· ], option = {··· }); chart_lhao.setOption(option);

数据可视化的动态展示屏可封装，随时随地可在手机上展示，尤其暴雨过程中，可实时查看降雨量灌满集水池的状态。

2. 5. 数据可视化延展

除了对历年数据进行展示以外，还可实现对未来降雨量的记录展示。位于水池内的液位传感器通过信号线将降雨厚度传送至后台数据处理中心，累计迭代后可于图9和图10中增加柱状和水球图。后台可增加多个动态水球图，做到“降雨即可视”的效果。直观性和动态性决定了数据可视化后续的延展。

2. 结论

数据可视化用于展示雨水收集池的实时动态，是作为传统给排水技术迈向数字孪生和元宇宙的一小步尝试，未来，将会协同完善智慧建筑管网，智慧园林管网，智慧市政管网等一系列领域，为数字化给排水的普及拉开序幕。

参考文献：

1. 韦依洋 吴一凡 李永远 Python 技术在数据可视化中的应用研究 福建电脑2022,38(01):27-31

2. 贾利娟 , 刘娟 , 等．基于 PyEcharts 的全球玉米贸易数据可视化系统建设及应用展望 [J] 农业展望 2019,15 (3):46-54.

3. 吴 巍 元宇宙背后的数字化基础建设

4. 魏一雄 基于实时数据驱动的数字孪生车间研究及实现［Ｊ］ 计算机集成制造系统 2121.2（2）：352-363

5