Gausst松鼠会

这个屌丝很懒，什么也没留下！

热门标签

【Flask+Echarts】使用Flask框架可视化的案例_flask echarts

作者：Gausst松鼠会 | 2024-02-25 23:21:35

踩

flask echarts

可视化的基本案例

Echarts简介
准备工作
程序的编写
代码解析

Echarts简介

Echarts 缩写来自 Enterprise Charts（商业级数据图表），是百度的一个开源的数据可视化工具
Echarts 能够绘制 2D 和 3D 的饼状图、柱状图、折线图等几乎所有我们能够见到的图形
Echarts 能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器
Echarts 是一个纯 JavaScript 的图表库，底层依赖轻量级的 Canvas 库 ZRender
官网: https://echarts.apache.org/zh/index.html

准备工作

下载所需要的库
若下载的速度太慢可以换源下载

清华源:https://pypi.tuna.tsinghua.edu.cn/simple/

创建Flask工程，这边可以直接创建Flask工程，也可以先创建一个普通的Python项目，然后创建以下几个文件夹即可

在这里插入图片描述

static目录放置静态文件
templates放置一些页面的文件

查看所需要的数据文件
在这里插入图片描述
数据下载路径:点击下载
跳转顶部

程序的编写

utils类

在这文件里主要需要做的任务就是连接数据库，然后再处理数据，将梳理好的数据发送给app

导入库

import pandas as pd
import pymysql
1
2

连接数据库

def connFun():
    conn = pymysql.connect(host="localhost"
                           , user="root"
                           , password="123456"
                           , port=3306
                           , db="dataView")
    sql = "select * from night"
    data = pd.read_sql(sql, conn)
    return data
1
2
3
4
5
6
7
8
9

对数据来进行处理

def analysisFun():
    value = connFun()
    value['Night'] = value['Night'].astype("float")
    df = value.groupby("City", as_index=False)['Night'].mean()
    city = df.City.tolist()
    night = df.Night.tolist()
    return city, night
1
2
3
4
5
6
7

跳转顶部

app类

这里就是将数据传输到前端页面

from flask import Flask, render_template
import utils

app = Flask(__name__)
picl = utils.analysisFun()


@app.route("/")
def index():
    # 渲染模板的同时将数据传输进去
    return render_template("index.html", picl=picl)


if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

跳转顶部

index页面类

页面的展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var data = [{% for item in picl.1 %}{{ item }},{% endfor %}];
      // 指定图表的配置项和数据
      var option = {
      //标题
        title: {
          text: 'ECharts 入门示例'
        },
        //指示器
        tooltip: {},
        //图列，动态效果
        legend: {
          data: ['销量']
        },
        xAxis: {
            {#插入数据#}
          data: {{ picl[0] | safe }},
          axisLabel:{
                interval:0
          }
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: data
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.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

跳转顶部

结果展示
在这里插入图片描述
如果出现下列报错，则需要查看文件路径的电脑名是否包含中

代码解析

将处理好的数据传输到前端时有两种方法

一种：直接再需要数据的地方放置数据即可

        xAxis: {
            {#插入数据#}
          data: {{ picl[0] | safe }},
          axisLabel:{
                interval:0
          }
        }
1
2
3
4
5
6
7

其中safe是让输入的数据不转意，要是不加的话，可能会出现下面的情况而导致图像显示不出
在这里插入图片描述

var myChart = echarts.init(document.getElementById('main'));:这是将后面option的内容插入到所选定的内容内

        title: {
          text: 'ECharts 入门示例'
        },
1
2
3

上面定义的是标题，在图像中的位置如下
在这里插入图片描述

        tooltip: {},
1

这个是指示器，就是当鼠标放到图上是会反馈一些信息
这是由指示器的图
在这里插入图片描述

这是没有指示器的图

在这里插入图片描述

        legend: {
          data: ['销量']
        },
1
2
3

这是图例，但是当你点击图例时也会出现动态效果

在这里插入图片描述

        xAxis: {
            {#插入数据#}
          data: {{ picl[0] | safe}},
          axisLabel:{
                interval:0
          }
        },
        yAxis: {},
1
2
3
4
5
6
7
8

上面时插入x，y轴的内容，若没有写那么就是默认，其中axisLabel部分是无论怎样都养完全输出内容

        series: [
          {
            name: '销量',
            type: 'bar',
            data:data
          }
        ]
      }
1
2
3
4
5
6
7
8

上面就是所要输出的值，type就是显示图的类型

      myChart.setOption(option);
1

将option插入myChart所选择的模块

跳转顶部

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