教育类型网站简单建设一个网站的过程

教育类型网站,简单建设一个网站的过程,wordpress图片站优化,西安网站建设怎样引言#xff1a; 用 Python 做可视化大屏不用复杂框架#xff01;这篇教程以2021 年气象监测数据#xff08;风速、波高、气温等#xff09;为案例#xff0c;教你用 Flask 快速搭建 Web 可视化大屏 —— 代码简约如 app.py#xff0c;步骤详细到小白能上手#xff0c;功…引言用 Python 做可视化大屏不用复杂框架这篇教程以2021 年气象监测数据风速、波高、气温等为案例教你用 Flask 快速搭建 Web 可视化大屏 —— 代码简约如 app.py步骤详细到小白能上手功能实用到同行会点赞核心干货直接复制就能跑通目录引言工具准备安装环境核心结构核心代码程序运行完整资源总结用 Flask 搭大屏简约而不简单工具准备类别具体内容作用说明基础环境Python 3.8推荐 3.9兼容性最优避免低版本缺少 Flask 新特性高版本可能有依赖冲突代码编辑器PyCharm社区版即可/ VS CodePyCharm 自带 Flask 插件新手调试更方便VS Code 轻量配插件也能快速开发核心 Python 库FlaskWeb 框架、pandas数据处理、openpyxl读取 ExcelFlask 负责搭 Web 服务pandas 处理气象数据openpyxl 解决 Excel 读取报错问题可视化工具ECharts 5.x无需安装CDN 引入生成柱状图、折线图、散点图等比 matplotlib 更适合 Web 端交互数据文件20212.xlsx气象数据含风速、有效波高、气温等 16 个指标实战数据源需提前放到指定文件夹避免路径错误安装环境# openpyxl用于读取Excelpip install flask pandas openpyxl -i https://pypi.tuna.tsinghua.edu.cn/simple/核心结构Flask_Ocean_Dashboard/ # 项目根目录├─ app.py # 核心Web服务路由调用图表逻辑├─ chart.py # 图表业务逻辑m1-m6函数处理数据生成图表├─ data/ # 数据文件夹统一管理数据源│ └─ 20212.xlsx # 气象原始数据├─ static/ # 静态资源文件夹Flask默认规范放JS/CSS/图片│ ├─ js/ # JS文件图表库、交互逻辑│ │ ├─ jquery.js # 简化DOM操作如加载动画控制│ │ ├─ echarts.min.js# ECharts核心库│ │ └─ js.js # 自定义图表逻辑可选│ ├─ css/ # 样式文件│ │ └─ comon0.css # 通用样式如头部标题样式│ └─ images/ # 图片资源│ └─ loading.gif # 页面加载动画图片└─ templates/ # 模板文件夹Flask默认规范放HTML页面├─ index.html # 大屏主页面整合所有图表├─ bar2.html # 柱状图页面被index.html引入├─ line.html # 折线图页面温度最大值趋势├─ bar3.html # 另一类柱状图页面├─ scatter.html # 散点图页面├─ line2.html # 第二类折线图页面└─ pie.html # 饼图页面五个指标平均值 简约设计思路无多余文件核心功能集中维护成本低核心代码1. app.pyFlask 主程序简约到极致from flask import Flask, render_template from chart import m1, m2, m4, m3, m5, m6 初始化Flask应用__name__表示“以当前文件为核心自动找static/templates” app Flask(__name__) 核心路由浏览器访问“http://IP:端口/”时触发的逻辑 app.route(/) def hello_world(): # put applications code here m1() # 对应bar2.html的图表数据比如某类气象指标柱状图 m2() # 对应line.html的“2021年不同月份各温度最大值”折线图 m3() # 对应bar3.html的图表数据 m4() # 对应scatter.html的散点图数据比如风速与波高的关系 m5() # 对应line2.html的折线图数据 m6() # 对应pie.html的“五个平均值饼图”数据 return render_template(index.html) if __name__ __main__: app.run(debugTrue, host0.0.0.0, port5000) # port5000是默认端口图表逻辑模块化将m1~m6共 6 个图表的生成逻辑含数据处理、图表配置封装在chart.py中app.py仅通过from chart import...导入调用不掺杂任何图表细节代码。避免app.py代码冗余若将所有图表逻辑写在 app.py会导致文件臃肿难维护后续新增图表如 m7、修改图表样式如改折线图为柱状图只需在chart.py中调整对应函数无需动app.py的路由逻辑符合 “单一职责” 原则团队协作或后续迭代时效率更高。渲染流程极简仅 1 个核心路由/逻辑仅 2 步①调用m1~m6生成图表资源如图表图片、ECharts 配置②渲染index.html返回页面无复杂中间件、无多余分支判断完整流程 “浏览器请求→Flask 调用图表函数→返回可视化页面” 一目了然新手能快速对应代码与实际效果无冗余逻辑符合 Flask “微框架” 的轻量特性避免过度设计开发效率高。2.index.html可视化大屏页面!-- 华丽转身的程序喵 https://m.tb.cn/h.SxeNlci?tkubC5fNmxP5x -- !doctype html html head meta charsetutf-8 titleindex/title !-- 1. 引入静态资源按“JS→CSS→自定义样式”顺序避免加载冲突 -- script typetext/javascript src../static/js/jquery.js/script !-- 简化DOM操作 -- link relstylesheet href../static/css/comon0.css !-- 通用样式如头部标题 -- style typetext/css /* 自定义布局解决多图表排版问题小白可直接复制 */ *{ margin: 0; padding: 0; }/* 清除默认边距避免布局错乱 */ .main{ width: 100%; height: 100%; position: absolute; } .quarter-div{ height: 40%; float: left; } .blue{ } .green{ } .orange{ } .red{ } /style /head body !-- 加载动画提升体验避免用户等半天以为卡了 -- div classloading div classloadbox img src../static/images/loading.gif 页面加载中... /div /div 头部标题实时时间用户一眼知道大屏主题和当前时间 -- div classhead h1海洋数据可视化大屏/h1 div classtime idshowTime2019年12月05日16时16分54秒/div /div !-- 上半区图表用quarter-div容器include引入单独图表页面 -- div classmain !-- 第一个图表bar2.html柱状图 -- div classquarter-div green;width: 400px; h22021年各月风速最大值/h2 {% include bar2.html %} !-- 引入图表页面模块化核心改bar2不用动index -- /div /div !-- 第二个图表line.html温度最大值折线图 -- div classquarter-div red;width: 420px; h22021年不同月份各温度最大值/h2 {% include line.html %} /div div classquarter-div orange;width: 650px; h2/h2 {% include bar3.html %} /div /div div classmain2 stylewidth: 100%;height: 500px;position: absolute;margin-top: 420px div stylefloat: left;width: 37%;height: 100% {% include scatter.html %} /div div stylefloat: left;width: 37%;height: 100% {% include line2.html %} /div div stylefloat: left;width: 26%;height: 100% h2五个平均值饼图/h2 {% include pie.html %} /div /div !--实时时间JS可直接复制无需搞懂原理 -- script var t null; t setTimeout(time, 1000);//開始运行 function time() { clearTimeout(t);//清除定时器 dt new Date(); var y dt.getFullYear(); var mt dt.getMonth() 1; var day dt.getDate(); var h dt.getHours();//获取时 var m dt.getMinutes();//获取分 var s dt.getSeconds();//获取秒 var t null; document.getElementById(showTime).innerHTML y 年 Appendzero(mt) 月 Appendzero(day) 日 Appendzero(h) 时 Appendzero(m) 分 Appendzero(s) 秒; function Appendzero(obj) { if (obj 10) return 0 obj; else return obj; } t setTimeout(time, 1000); //设定定时器循环运行 } /script /div script $(document).ready(function () { var arr []; var max; $(.paim li i).each(function () { arr.push($(this).text()); }) //alert(arr) max Math.max.apply(null, arr); $(.paim .pmbar span).each(function () { var i $(this).parents(li).index() w arr[i] / max * 100; sw w.toFixed(0) % $(this).css({ width: sw }) }) }) /script !-- 引入图表核心JSECharts库自定义图表逻辑 -- script typetext/javascript src../static/js/echarts.min.js/script script languageJavaScript src../static/js/js.js/script /body /html{% include %} 模块化比如 line.html 是 “月份温度最大值折线图”想改这个图表的样式直接改 templates/line.html 就行不用在几百行的 index.html 里找代码 —— 这种 “页面拆分” 能大幅降低维护成本实时时间组件几行 JS 实现时间自动更新大屏显示实时时间更专业直接复制就能用加载动画很多新手忽略这个细节大屏加载图表需要时间尤其数据多的时候loading.gif 能让用户知道 “正在加载不是卡了”提升体验CSS 布局容错用 float 和 position 避免图表重叠复制这段样式也能保证大屏在不同浏览器里排版正常。3.chart.py 逻辑数据处理核心# chart.py每个m函数对应一个图表的数据处理ECharts配置生成 import pandas as pd from pyecharts.charts import Bar, Line, Pie, Scatter from pyecharts import options as opts # 图表样式配置 from pyecharts.globals import ThemeType # 图表主题 # 先写一个通用数据加载函数处理Excel异常值避免重复代码同行认可的复用思路 def load_data(): # 读取Excel数据需指定sheet_nameopenpyxl为引擎 df pd.read_excel(data/20212.xlsx, sheet_nameSheet1, engineopenpyxl) # 处理异常值Excel中99/999是无效值替换为NaN后删除 df df.replace([99, 999], pd.NA).dropna(subset[风速, 有效波高, 气温, 水温, 大气压力]) # 提取月份用于line.html的“不同月份温度最大值” df[月份] df[月].astype(str).str.zfill(2) # 补01→01 return df # m2()对应line.html的“2021年不同月份各温度最大值”折线图 def m2(): df load_data() # 计算每个月份的气温最大值核心业务逻辑 month_temp_max df.groupby(月份)[气温].max().reset_index() # 生成折线图保存到templates/line.html让index.html能include line_chart ( Line(init_optsopts.InitOpts(themeThemeType.LIGHT, width100%, height90%)) .add_xaxis(month_temp_max[月份].tolist()) # X轴月份 .add_yaxis(气温最大值(℃), month_temp_max[气温].tolist(), is_smoothTrue) # Y轴温度 .set_global_opts( title_optsopts.TitleOpts(title2021年不同月份各温度最大值), # 图表标题 xaxis_optsopts.AxisOpts(name月份), # X轴名称 yaxis_optsopts.AxisOpts(name气温(℃)) # Y轴名称 ) ) # 保存图表到templates文件夹必须和index.html同目录include才能找到 line_chart.render(templates/line.html) # m6()对应pie.html的“五个平均值饼图”风速、气温、水温、有效波高、大气压力 def m6(): df load_data() # 计算五个指标的平均值保留2位小数 avg_wind round(df[风速].mean(), 2) avg_temp round(df[气温].mean(), 2) avg_water_temp round(df[水温].mean(), 2) avg_wave round(df[有效波高].mean(), 2) avg_pressure round(df[大气压力].mean(), 2) # 生成饼图 pie_chart ( Pie(init_optsopts.InitOpts(themeThemeType.LIGHT, width100%, height90%)) .add( 指标平均值, [ (风速(m/s), avg_wind), (气温(℃), avg_temp), (水温(℃), avg_water_temp), (有效波高(m), avg_wave), (大气压力(hPa), avg_pressure) ], radius[40%, 75%] # 环形饼图更美观 ) .set_global_opts(title_optsopts.TitleOpts(title五个气象指标平均值)) .set_series_opts(label_optsopts.LabelOpts(formatter{b}: {c})) # 显示指标名数值 ) pie_chart.render(templates/pie.html) # 其他m1/m3/m4/m5函数逻辑类似m1对应bar2.htmlm3对应bar3.htmlm4对应scatter.htmlm5对应line2.html # 可以参考m2/m6的逻辑替换指标如风速→有效波高、图表类型Line→Bar即可 #华丽转身的程序喵 #https://m.tb.cn/h.SxeNlci?tkubC5fNmxP5x通用数据加载函数load_data () 处理 Excel 读取和异常值m1-m6 都调用它避免重复代码如果每个函数都写一次读 Excel改路径要改 6 次pyecharts 生成 HTML直接把图表渲染成 HTML 文件index.html 用 include 引入不用在 HTML 里写复杂的 ECharts 配置前后端分离更彻底业务逻辑清晰每个函数只负责一个图表m2 管温度折线图m6 管饼图符合 “单一职责”后期改某个图表只需动对应函数。程序运行准备数据把 20212.xlsx 放到 data 文件夹确认文件名和路径正确如果报错 “找不到文件”检查路径是否是 “data/20212.xlsx”启动服务在 PyCharm 中右键运行 app.py看到终端输出 “Running on http://0.0.0.0:5000/” 表示成功访问大屏打开浏览器输入 “http://127.0.0.1:5000”完整资源通过网盘分享的文件海洋数据链接:https://pan.baidu.com/s/1G-dJd8o5z4nSuhZmokFyDw?pwd0331 提取码: 0331--来自百度网盘超级会员v4的分享总结用 Flask 搭大屏简约而不简单数据分析与可视化的核心魅力从来不是 “画出多精致的图表”而是把 “藏在 Excel 格子里的冰冷数字”变成 “能被理解、能落地的信息线索”。就像这次用到的 2021 年气象数据最初只是一堆包含 “风速、波高、气温” 的原始记录没有标题没有注释甚至夹杂着无效值。但当我们用 Flask 搭起服务用图表把 “月份温度变化”“风速与波高的关联” 拆解开时这些数字突然有了意义它不再是枯燥的监测记录而是能帮人直观看到 “某段时间海洋环境趋势” 的素材。很多时候技术像是工具数据更像是线索真正重要的应该是把线索串成能看懂的逻辑。我一直觉得不是只有复杂框架、海量代码才能做可视化大屏。就像这次的教程app.py15 行核心代码index.html 用模块化拼出大屏chart.py 专注数据处理没有花里胡哨的特效却能让小白跟着步骤摸到 “数据→处理→可视化” 的全流程。有句话说得好好的技术分享是把‘自己踩过的坑’变成‘别人少走的路’也别把技术架得太高能让更多人用起来能解决实际问题才是真的有用。这也许就是技术分享中的难能可贵把自己的收获变成别人的起点把数据里的洞察变成能上手的实操让更多人感受到 “数据不只是数字技术也不只是代码”。注本文仅用于技术交流与学习请勿用于商业用途或违规操作。欢迎大家交流不同思路若有疏漏比如大屏排版问题也请多多包涵