echarts+flask+mysql 从mysql 数据库中检索数据，进行异步报表展示

最新推荐文章于 2024-03-24 17:59:37 发布

清风幻影17

最新推荐文章于 2024-03-24 17:59:37 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.csdn.net/weixin_41021342/article/details/89176063

版权

说明

从mysql数据库中检索出数据，通过echarts 在html中进行展示。选择语言python。

实验来源：

静态Echarts

首先接触的是echarts, 可以在echarts官网中进行学习查看，根据官网给出的样例，上手一个BI展示真的不过几分钟而已，当然这是静态数据的展示，数据是写死在html代码脚本中的。只要将如下代码保存为html文件，使用浏览器打开即可展示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            title : {
                text: '人流量统计',
                subtext: '2019',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['男','女']
            },
            series : [
                {
                    name: '性别',
                    type: 'pie',
                    radius : '55%',
                    center: ['40%', '60%'],
                    data:[
                        {value:44, name:'男'},
                        {value:17, name:'女'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            color: ['rgb(131,175,155)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)',]
        };
        myChart.setOption(option);//setOption方法生成一个简单的饼状图
    </script>
</body>
</html>

异步Echarts

然后，想要尝试数据和图表的解耦，官网也是支持异步刷新操作的，代码如下，将BI中数据的获取，写在函数fetchData里面，让后建立一个空的图表，最后把数据填进去。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        function fetchData(cb) {
            // 通过 setTimeout 模拟异步加载
            setTimeout(function () {
                cb({
		            datamale: 44,
		            datafemale: 10
                });
            });
        } 
        option = {
            title : {
                text: '人流量统计',
                subtext: '2019',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['男','女']
            },
            series : [
                {
                    name: '性别',
                    type: 'pie',
                    radius : '55%',
                    center: ['40%', '60%'],
                    data:[
                        {value:[], name:'男'},
                        {value:[], name:'女'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            color: ['rgb(131,175,155)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)',]
        };
        fetchData(function (data) {
            myChart.setOption({
                
                series: [{
                    // 根据名字对应到相应的系列
                    name: '性别',
                    data: [
                        {value:data.datamale, name:'男'},
                        {value:data.datafemale, name:'女'}
                    ]  
                },]
            });
        });
        myChart.setOption(option);//setOption方法生成一个简单的饼状图
    </script>
</body>
</html>

Flask

在编程语言上选择了python，而python可以支持的echarts框架有flask 和dingo选择，由于flask的灵活性最终选择了flask。在pycharm开发环境中新建flask文件，目录结构为如下所示

三个文件：

1. echarts.min.js需要在Echarts官网进行下载，在目录static下

2. people_flow.html 在目录templates 下

3. getHistoryPeopleFlow.py在目录FlaskDemo下。

people_flow.html代码详情如下所示：从数据库中得到的数据为{{ male_num }}和{{female_num }},（数据取得过程参考下面getHistoryPeopleFlow.py的python代码），需要用两个大括号才能得到其中的值，参见flask官方文档。

特别注意，Echarts的引用写成<script src="{{ url_for('static', filename='echarts.min.js') }}"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        function fetchData(cb) {
            // 通过 setTimeout 模拟异步加载
            setTimeout(function () {
                cb({
		            datamale: {{ male_num }},
		            datafemale: {{ female_num }}
                });
            });
        }

        option = {
            title : {
                text: '人流量统计',
                subtext: '2019',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['男','女']
            },
            series : [
                {
                    name: '性别',
                    type: 'pie',
                    radius : '55%',
                    center: ['40%', '60%'],
                    data:[
                        {value:[], name:'男'},
                        {value:[], name:'女'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            color: ['rgb(131,175,155)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)',]
        };
        fetchData(function (data) {
            myChart.setOption({

                series: [{
                    // 根据名字对应到相应的系列
                    name: '性别',
                    data: [
                        {value:data.datamale, name:'男'},
                        {value:data.datafemale, name:'女'}
                    ]

                },]
            });
        });
        myChart.setOption(option);//setOption方法生成一个简单的饼状图
    </script>
</body>
</html>

getHistoryPeopleFlow.py代码详情如下，特别注意是把从数据库里得到的数据，在return函数中进行传递

#coding:utf-8

from flask import Flask,render_template,url_for
import pymysql
import json

# 生成Flask实例
app = Flask(__name__)
@app.route("/")
def my_echart():

    # 连接数据库，***的位置需要根据自己的数据库信息进行填写
    conn = pymysql.connect(host='***',user='***',password='***',db='***')
    cur = conn.cursor()

    sqlmale=' SELECT count(*) FROM  *** '# 男
    sqlfemale = ' SELECT count(*) FROM  ***'  # 女


    cur.execute(sqlmale)
    maleresult = cur.fetchall()
    cur.execute(sqlfemale)
    femaleresult = cur.fetchall()

    male_num = maleresult[0][0]
    female_num = femaleresult[0][0]

    cur.close()
    conn.close()
    # 在浏览器上渲染people_flow.html（为了查看输出的数据）
    return render_template('people_flow.html', male_num=male_num, 
        female_num=female_num)
if __name__ == '__main__':
    app.run(debug=True)

在pycharm中选择getHistoryPeopleFlow.py运行，即可输出

点击网址链接即可进行展示

清风幻影17

关注

2
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
echarts+flask+mysql 从mysql 数据库中检索数据，进行异步报表展示

说明从mysql数据库中检索出数据，通过echarts 在html中进行展示。选择语言python。实验来源：静态Echarts 首先接触的是echarts, 可以在echarts官网中进行学习查看，根据官网给出的样例，上手一个BI展示真的不过几分钟而已，当然这是静态数据的展示，数据是写死在html代码脚本中的。只要将如下代码保存为html文件，使用浏览器打开即可展示。...
复制链接

扫一扫