【Flask+Echarts】使用Flask框架可视化的案例
赞
踩
可视化的基本案例
Echarts简介
-
Echarts 缩写来自 Enterprise Charts（商业级数据图表），是百度的一个开源的数据可视化工具
-
Echarts 能够绘制 2D 和 3D 的饼状图、柱状图、折线图等几乎所有我们能够见到的图形
-
Echarts 能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器
-
Echarts 是一个纯 JavaScript 的图表库，底层依赖轻量级的 Canvas 库 ZRender
准备工作
- 下载所需要的库
- 若下载的速度太慢可以换源下载
清华源:https://pypi.tuna.tsinghua.edu.cn/simple/
- 创建Flask工程，这边可以直接创建Flask工程，也可以先创建一个普通的Python项目，然后创建以下几个文件夹即可
- static目录放置静态文件
- templates放置一些页面的文件
程序的编写
utils类
在这文件里主要需要做的任务就是连接数据库，然后再处理数据，将梳理好的数据发送给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
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所选择的模块
