目录
Flask框架源码解析
🔹 Flask应用初始化
Flask应用的初始化是整个应用的核心,它包含了应用配置、路由注册等多个重要步骤。
from flask import Flask
app = Flask(__name__)
if __name__ == '__main__':
app.run(debug=True)
🔹 通过查看Flask
类的源码,我们可以发现它的构造方法主要用于设置应用的配置文件、蓝图注册等。
🔹 路由与视图函数
路由是Flask处理URL的核心,它将URL映射到视图函数上。
@app.route('/')
def home():
return "Hello, Flask!"
@app.route('/user/<name>')
def user(name):
return f"Hello, {name}!"
🔹 route
装饰器将URL映射到视图函数上,视图函数处理请求并返回响应。
🔹 请求与响应
Flask中的请求与响应对象分别封装了HTTP请求和响应的数据。
from flask import request, jsonify
@app.route('/data', methods=['POST'])
def data():
data = request.json
return jsonify(data)
🔹 request
对象包含了客户端发送的所有数据,而jsonify
方法将Python字典转换为JSON格式的响应。
🔹 中间件
中间件是在请求处理过程中添加自定义功能的方式。
@app.before_request
def before_request():
print("Before request")
@app.after_request
def after_request(response):
print("After request")
return response
🔹 before_request
和after_request
装饰器分别在请求处理前后执行自定义逻辑。
ECharts可视化精讲
🔹 ECharts安装与配置
ECharts是一个强大的可视化库,支持多种图表类型。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: { text: 'ECharts 示例' },
tooltip: {},
xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] },
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
🔹 引入ECharts库后,通过简单的配置即可创建基本的柱状图。
🔹 基本图表类型
ECharts支持多种基本图表类型,如柱状图、折线图、饼图等。
var option = {
title: { text: '销量情况' },
tooltip: {},
legend: { data: ['销量'] },
xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] },
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
🔹 将图表类型更改为line
即可创建折线图。
🔹 图表样式与交互
通过配置项可以自定义图表的样式和交互行为。
var option = {
title: { text: '销量情况' },
tooltip: { trigger: 'axis' },
legend: { data: ['销量'] },
xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] },
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
itemStyle: {
normal: {
color: 'rgba(0,0,255,0.5)'
}
}
}]
};
myChart.setOption(option);
🔹 通过itemStyle
可以自定义数据项的颜色和透明度。
🔹 高级图表配置与数据动态更新
ECharts支持复杂的图表配置和数据动态更新。
var option = {
title: { text: '实时数据更新' },
tooltip: {},
xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] },
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
// 动态更新数据
setInterval(function () {
var newData = option.series[0].data.map(v => v + Math.round(Math.random() * 10));
myChart.setOption({ series: [{ data: newData }] });
}, 2000);
🔹 使用setOption
方法可以实时更新图表数据。
🔹 实战:结合Flask与ECharts展示爬取数据
结合Flask和ECharts实现数据展示的实战案例。
Flask后端代码
from flask import Flask, jsonify, render_template
import requests
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/data')
def get_data():
data = {'labels': ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], 'values': [5, 20, 36, 10, 10, 20]}
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
index.html前端代码
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
fetch('/data')
.then(response => response.json())
.then(data => {
var option = {
title: { text: '爬取数据展示' },
tooltip: {},
xAxis: { data: data.labels },
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: data.values
}]
};
myChart.setOption(option);
});
</script>
</body>
</html>
🔹 通过Flask提供数据接口,前端ECharts动态获取数据并展示。
总结
🔹 通过本次学习,我们详细解析了Flask框架的源码和ECharts的可视化技术。掌握了如何初始化Flask应用、配置路由与视图函数、处理请求与响应、使用中间件。同时,深入学习了ECharts的安装与配置、基本图表类型、样式与交互、数据动态更新等内容。
🔹 最后,通过结合Flask与ECharts,我们实现了数据爬取后的可视化展示,为数据分析提供了强有力的工具。希望这些内容能够帮助大家更好地理解和应用Flask与ECharts,实现高效的数据展示!🚀