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

最新推荐文章于 2024-05-01 23:15:24 发布

_一路向北_

最新推荐文章于 2024-05-01 23:15:24 发布

阅读量5.4k

点赞数 4

文章标签：数据可视化 python

本文链接：https://blog.csdn.net/weixin_49572581/article/details/108731896

版权

文章目录

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

前言

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

步骤

1.需要使用的库

from flask import Flask,render_template
import pandas as pd

安装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)

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>

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

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

_一路向北_

关注

4
点赞
踩
69

收藏

觉得还不错? 一键收藏
1
评论
python:pandas+echarts+flask框架数据可视化

文章目录前言步骤1.需要使用的库2.完整代码前言数据可视化，做成动态图echarts官网：这里面有很多做好了动态图模板具体实施：用flask框架，用pandas库读取准备好的表格数据，将这个数据传入到动态图中，就可以了。成品如下图：步骤1.需要使用的库from flask import Flask,render_templateimport pandas as pd安装pandas：pip install pandas安装flask：pip install flask2.
复制链接

扫一扫