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

Echarts简介

准备工作

程序的编写

utils类app类index页面类

代码解析

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放置一些页面的文件

查看所需要的数据文件

数据下载路径:点击下载
跳转顶部

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

导入库

import pandas as pd
import pymysql

连接数据库

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

对数据来进行处理

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

跳转顶部

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

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)

跳转顶部

页面的展示

跳转顶部

结果展示

如果出现下列报错，则需要查看文件路径的电脑名是否包含中

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

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

    xAxis: {
        {#插入数据#}
      data: {{ picl[0] | safe }},
      axisLabel:{
            interval:0
      }
    }

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

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

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

上面定义的是标题，在图像中的位置如下

        tooltip: {},

这个是指示器，就是当鼠标放到图上是会反馈一些信息
这是由指示器的图

这是没有指示器的图

        legend: {
          data: ['销量']
        },

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

        xAxis: {
            {#插入数据#}
          data: {{ picl[0] | safe}},
          axisLabel:{
                interval:0
          }
        },
        yAxis: {},

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

        series: [
          {
            name: '销量',
            type: 'bar',
            data:data
          }
        ]
      }

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

      myChart.setOption(option);

将option插入myChart所选择的模块

跳转顶部