python:pandas+echarts+flask框架数据可视化_python flask pandas

作者：不正经 | 2024-03-25 02:36:19

踩

python flask pandas

文章目录

前言
步骤
- 1.需要使用的库
- 2.完整代码

前言

数据可视化，做成动态图
echarts官网：这里面有很多做好了动态图模板
在这里插入图片描述
具体实施：用flask框架，用pandas库读取准备好的表格数据，将这个数据传入到动态图中，就可以了。
成品如下图：

步骤

1.需要使用的库

from flask import Flask,render_template
import pandas as pd
1
2

安装pandas：pip install pandas
安装flask：pip install flask

2.完整代码

这里选的是模板：在这里插入图片描述
数据：

代码如下（示例）：

from flask import Flask,render_template
import pandas as pd

app = Flask(__name__)

@app.route('/')
def hello():
    df = pd.read_csv("城市经济.csv", sep=',')#读取表格
    da = df.to_dict('list')形成字典
    keys = ','.join(da.keys())
    #变成列表
    p = keys.split(',')
    p0 = da["area"]
    p1 = da["GDP"]
    p2 = da["人均GDP"]
    p3 = da["工业增加值"]
    p4 = da["第三产业增加值"]
    p5 = da["固定资产投资"]
    p6 = da["基本建设投资"]
    p7 = da["社会消费品零售总额"]
    p8 = da["海关出口总额"]
    p9 = da["地方财政收入"]
    return render_template('login.html',data1=p[1:-1],data2=p0,data3=p1,data4=p2,data5=p3,
                           data6=p4,data7=p5,data8=p6,data9=p7,data10=p8,data11=p9,name1=p[1],
                           name2=p[2],name3=p[3],name4=p[4],name5=p[5],name6=p[6],name7=p[7],
                           name8=p[8],name9=p[9])#传入login网页{{}}对应的值

if __name__ == "__main__":
    app.run(port=5001)
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

templates文件下HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1-rc1/echarts-en.js"></script>
</head>
<body>
    <div id="main" style="width: 800px;height: 600px;background: pink"></div>
    <script>
        var main = echarts.init(document.getElementById("main"))
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: {{data1|tojson}}
            },
            grid: {
                left: '3%',
                right: '-4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: {{data2|tojson}}
            },
            series: [
                {
                    name: {{name1|tojson}},
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: {{data3|tojson}}
                },
                {
                    name: {{name2|tojson}},
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: {{data4|tojson}}
                },
                {
                    name: {{name3|tojson}},
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: {{data5|tojson}}
                },
                {
                    name: {{name4|tojson}},
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: {{data6|tojson}}
                },
                {
                    name: {{name5|tojson}},
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: {{data7|tojson}}
                },
                {
                    name: {{name6|tojson}},
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: {{data8|tojson}}
                },
                {
                    name: {{name7|tojson}},
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: {{data9|tojson}}
                },
                {
                    name: {{name8|tojson}},
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: {{data10|tojson}}
                },
                {
                    name: {{name9|tojson}},
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: {{data11|tojson}}
                }
            ]
        };
        main.setOption(option)


    </script>

</body>
</html>
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

可能有些麻烦，但是效果出来了

笔者也是看示例代码：示例代码网址
还有<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1-rc1/echarts-en.js"></script>中src是在https://www.bootcdn.cn/echarts/找到的

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