为了能显示真实数据,使用flask快速搭建了一个web应用,然后连接数据库,读取数据库里的数据来进行大屏可视化显示(btw:数据是从车主之家网站上爬虫爬的)
家人们!记得使用专业版的pycharm,创建flask项目后,会自动生成static、templates文件夹和app.py文件
- static:放静态文件,如css、js、images等
- templates:放html文件,默认有一个index.html,其他的根据需求自己创建
- app.py:入口文件
Flask中渲染html使用的是模板引擎,而默认配套模板引擎是Jinja2。
在app.py中有装饰器@app.route,里面的参数是url,访问某个路径时,会自动执行装饰器修饰的视图函数。视图函数使用render_template渲染index.html,可以传递参数。
python中装饰器是什么以及作用?
Jinja2里常见的三种定界符
1、语句
比如if判断、for循环等:
{% … %}
2、表达式
比如字符串、变量、函数调用等:
{{ … }}
3、注释
{# … #}
其他介绍参见:这里
可视化:echarts
前端:HTML+JavaScript+css大屏拆分
案例项目中大屏可按版块进行拆解,会发现这里大屏主要由标题、折线图、柱状图、地图、滚动图和词云等组成,整体可切分为8个版块,如下:
下方为简单演示:
我们整体布局前,先通过简单的案例了解前端布局实现方法。创建一个html文件,这里先调整标题的布局位置,代码如下:
在上面添加一些css的样式,划分相关的位置
上面就是划分位置的参数,能够帮我们快速划分好位置。
这段代码是用于对一个元素进行定位的 CSS 样
探索数据之美:基于Flask的动态数据可视化大屏实战
去发现同类优质开源项目:https://gitcode.com/
在这个信息爆炸的时代,数据的可视化呈现显得尤为重要。今天,我们为您介绍一个开源宝藏——Flask数据可视化大屏资源。这是一款结合了轻量级Web框架Flask与强大图表库pyecharts的神器,专为追求高效数据展示的开发者设计。
项目技术剖析
核心架构:Flask + pyech...