Python flask+echarts实现数据可视化

发表于
缘起：最近在写论文，由于与Python Flask有关，又想要让数据库中的数据可视化，于是就尝试了echarts,其支持很多不同的数据图表，有兴趣的话可以自行学习。

本篇文章利用Python Flask框架与echarts相结合，以商品的库存量与销售量数据可视化作为示例，展示了一个从建立数据库，到Python封装数据库信息为json格式数据，前端接受json格式数据并执行响应，最终展示数据的到页面的一个完整的流程。

项目结构
Goods文件夹
|-static
||-下载的chart文件夹
||-echarts.js
||-js
|||-jquery.min.js
|-templates
||-index.html
|-Goods.db
|-view.py

1、数据库建立

由于没有太多的数据，本次就选用了轻量级的SQLite数据库，数据库可以更换为任何你想用的。

数据库Goods.db 数据表名称Goodsdata
表结构如下：
数据表

2、Python连接数据库并封装数据为json格式

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
# view.py

from flask import * # 导入flask模块下的所有元素
import sqlite3

app = Flask(__name__) # 建立Flask应用
app.secret_key = "ninsuiyi"

def get_db():
    db = sqlite3.connect('Goods.db')
    db.row_factory = sqlite3.Row
    return db

def query_db(query, args=(), one=False):
    db = get_db()
    cur = db.execute(query, args)
    db.commit()
    rv = cur.fetchall()
    db.close()
    return (rv[0] if rv else None) if one else rv

@app.route('/')
def index():
    return render_template("index.html")

@app.route("/viewdata", methods=["POST"])
def viewdata():
    if request.method == "POST":
        res = query_db("SELECT Goods_name, Goods_inventory,Goods_sales_volume FROM Goodsdata")
    return jsonify(Goods_name = [x[0] for x in res],
                   Goods_inventory = [x[1] for x in res],
                   Goods_sales_volume = [x[2] for x in res])

注：jsonify()将数据封装为json格式

3、前端页面接受并利用echarts可视化显示

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
#index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>商品与销量数据可视化</title>
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
</head>
<body>
    <!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main" style="height:550px;border:1px solid #ccc;padding:10px;"></div>

    <!--Step:2 引入echarts.js-->
    <script src="{{ url_for('static', filename='echarts.js') }}"></script>

    <script type="text/javascript">
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths: {
            echarts: './static',
        }
    });

    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',// 按需加载
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('main'));

            // 设置
            var option = {
             title: {
                    text: '商品库存与销量数据可视化示例' //图表标题
                },
                tooltip : {
                    trigger: 'axis'
                },

                legend: {
                    data:['库存量','销售量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,

                xAxis : [
                    {
                        type : 'category',
                        axisLabel:{interval:0,rotate:-45},

                        data : []

                    }

                ],
            grid: { // 控制图的大小，调整下面这些值就可以，

             y2: 90,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
         },

                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series : [
                    {
                        name:'库存量',
                        type:'bar',
                        data:[]
                    },
                    {
                        name:'销售量',
                        type:'line',
                        data:[]
                    }
                ]
            };

            $.ajax({
                cache: false,
                type: "POST",
                url: "/viewdata", //把表单数据发送到/viewdata
                data: null, // 发送的数据
                dataType : "json",  //返回数据形式为json
                async: false,
                error: function(request) {
                    alert("发送请求失败！");
                },
                success: function(result) {
                    //console.log(result);
                    for (i = 0, max = result.Goods_name.length; i < max; i++) { //注意：result.Goods_name.length
                        option.xAxis[0].data.push(result.Goods_name[i]);
                        option.series[0].data.push(parseFloat(result.Goods_inventory[i]));
                        option.series[1].data.push(parseFloat(result.Goods_sales_volume[i]));
                    };
                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
            });
            // 为echarts对象加载数据
            //myChart.setOption(option);
        }
    );
    </script>    
</body>
</html>

4、页面展示

1
不同风格显示 ▼
2

至此一个简单的数据可视化页面就制作完成了，是不是很简单☺

博主GitHub page地址：zhan123.xin
博主知乎地址：知乎

-------------本文结束感谢您的阅读-------------
世界之大，相遇是缘