用flask+echarts打造一个数据可视化大屏幕

作者：AllinToyou | 2024-04-17 19:03:57

踩

flask+echarts

文章目录

1. big_screen项目说明
2. big_screen项目文件布局
3. 四大模块核心代码分析
4. 总结

1. big_screen项目说明

源自github上逛到的一个项目，用flask和echarts实现了一个大屏幕显示，运行app.py后，在网页上输入如下url地址就能看到效果，如图。

项目地址：https://github.com/xiaokai1996/big_screen

在这里插入图片描述

经过自己的研究分析，发现网页最底下一层是一个蓝色的背景，带有一个跟随鼠标的粒子动态特效，接着在这个上面叠加了一个table。

table的布局如下所示，首先是一个标题，标题的右侧是天气和时间。接着是分为三列，左侧三列显示3个图表，中间一列显示两个类似数字时钟的数据和文字说明，右边一列显示3个图表。其中左下角的图表由3个小的图表组合而成。

在这里插入图片描述

2. big_screen项目文件布局

项目主要由4个部分组成，data部分是数据准备，app部分是flask服务，templates部分控制网页的显示，这三者正好对应MVC的设计模式。最后的static里面主要保存一些网页元素，例如字体格式、图片等等，以及必要的一些js函数库。下面就这四个部分做一个简要的注释。

在这里插入图片描述

3. 四大模块核心代码分析

3.1 数据准备模块

这里有3个数据，以data.py为例，文件中，定义了一个数据类，初始化的时候产生详细的数据，然后定了一个函数返回格式化的数据。

图表的数据用json格式保存，在返回给pyecharts的时候用get函数组装成数组的形式。

class SourceDataDemo:
    
	def __init__(self):
        # 整个网页的标题
        self.title = '大数据可视化展板通用模板'
        # 总共是6个图表，数据格式用json字符串，这是第1个图标的数据
        self.echart1_data = {
   
            'title': '行业分布',
            'data': [
                {
   "name": "商超门店", "value": 47},
                {
   "name": "教育培训", "value": 52},
                {
   "name": "房地产", "value": 90},
                {
   "name": "生活服务", "value": 84},
                {
   "name": "汽车销售", "value": 99},
                {
   "name": "旅游酒店", "value": 37},
                {
   "name": "五金建材", "value": 2},]}
        
    @property
    def echart1(self):
        data = self.echart1_data
        echart = {
   
            'title': data.get('title'),
            # 第一次get获取到的是许多键值对，所以需要对每个键值对再次get
            'xAxis': [i.get("name") for i in data.get('data')],
            'series': [i.get("value") for i in data.get('data')]
        }
        # 返回的是标题和对应的数据，并没有说用什么方式展现！
        return echart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

3.2 flask网页服务模块

准备好了数据之后，就可以把数据放到html中调用pyecharts进行渲染，这里使用flask服务，将URL根目录和index.html绑定。

# 新建一个flask服务
app = Flask(__name__)

# 建立一个URL连接
@app.route('/')
def index():
    # 新建一个实例
    data = SourceData()
    # 在这里传入数据，发送给index进行渲染
    return render_template('index.html', form=data, title=data.title)

# 运行flask
if __name__ == "__main__":
    app.run(host='127.0.0.1', debug=False)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.3 网页视图模块

首先是jquery和css文件的加载，jquery是js的一个函数库，css决定了整个网页的字体字号颜色等风格。

然后是一个加载动画，这个加载动画使得网页加载具有淡入的效果，并且确保了网页在拉伸的时候能自适应调整布局，关于这个函数后面再详细解释。

最后是echarts的函数库和中国地图的函数库。

<head>
    <meta charset="utf-8">
    <title>刘凯凯的大屏幕</title>
    <script 1
2
3

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/441786