1、前言

提示：Flask是一个用python语言基于Werkzeug工具箱编写的轻量级web开发框架，它主要面向需求简单，项目周期短的小应用。

Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。Flask使用 BSD 授权。

4、Flask测试网页（统计图表）

4.1 基于echarts的统计图的网页

https://echarts.apache.org

• ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

• ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

• test_echarts.py:

#***************************************************************
#   Purpose:   基于echarts的统计图的网页(Flask的web服务器)
#   Author:    爱看书的小沐
#   Date:      2022-5-29
#   Languages: python
#   Platform:  python 3.9 win64
#   OS:        Win10 win64
# **************************************************************

from flask import Flask, Response, request
from flask import render_template, make_response, jsonify, send_from_directory
from io import FileIO
import os
import mimetypes
from flask_cors import CORS, cross_origin

app = Flask(__name__)
# cors = CORS(app)
CORS(app, supports_credentials=True)
# CORS(app, resources=r'/*')
# cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

# 跨域支持
@app.after_request
def af_request(resp):     
    """
    #请求钩子，在所有的请求发生后执行，加入headers。
    :param resp:
    :return:
    """
    resp = make_response(resp)
    resp.headers['Access-Control-Allow-Origin'] = '*'
    resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'
    resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
    return resp

# 只允许路径为'/login'跨域！
@app.route('/login')
@cross_origin()
def data():
    return jsonify({'name':'tomcat'})

@app.route('/test')
@cross_origin(supports_credentials=True)
def hello():
    name = request.args.get("name", "World")
    return f'Hello, {name}!'

@app.route('/')
def index():
    return render_template('test_echarts.html')

@app.route("/<path>")
def get_cesiumfile(path):
    directory = os.getcwd() + "/static/echarts-5.3.2/package/dist/"
    response = make_response(send_from_directory(directory, path.encode('utf-8').decode('utf-8'), as_attachment=False))
    mime_type = mimetypes.guess_type(path)[0]
    if path.endswith(".js") :
       mime_type = "application/javascript"
    response.headers['Content-Type'] = mime_type
    print(directory, path, mime_type)
    return response

@app.route('/favicon.ico')
def favicon():
    return send_from_directory(os.path.join(app.root_path, 'static'), 'favicon.ico'
        , mimetype='image/vnd.microsoft.icon')

if __name__ == '__main__':
   app.run(debug = True)

• 运行结果：

4.2 基于Highcharts.js的统计图的网页

https://www.highcharts.com.cn/

Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且提供给个人学习、个人网站和非商业用途使用。

Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

• 开源 Highcharts 最重要的特点之一就是：你都可以下载源码并可以对其进行编辑。基于开源社区我们可以第一时间获取用户的需求、及时的 Bug 修复及吸收社区贡献。
• 纯 JavaScript Highcharts 完全基于 HTML5 技术，不需要再客户端安装任何插件，如 Flash 或 Java。此外你也不用配置任何服务端环境，不需要 PHP、Tomcat、ASP.NET 等，只需要两个 JS 文件即可运行。
• 丰富的图表类型 Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。
• 支持多坐标轴 多个数据进行对比这是非常常见的需求，Highcharts 可以让你为每个类型的数据添加坐标轴，每个轴可以定义放置的位置，所有的设置都可以独立生效，包括旋转、样式设计和定位，当然也支持多个数据共用一个坐标轴。

• test_echarts.py:

#***************************************************************
#   Purpose:   基于Highcharts.js的统计图的网页(Flask的web服务器)
#   Author:    爱看书的小沐
#   Date:      2022-5-29
#   Languages: python
#   Platform:  python 3.9 win64
#   OS:        Win10 win64
# **************************************************************
from flask import Flask, Response, request
from flask import render_template, make_response, jsonify, send_from_directory
from io import FileIO
import os
import mimetypes
from flask_cors import CORS, cross_origin

app = Flask(__name__)
cors = CORS(app)
# CORS(app, supports_credentials=True)
# CORS(app, resources=r'/*')
# cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

@app.route('/')
def index():
    return render_template('test_Highcharts.html')

@app.route("/<path:path>")
def get_staticfile(path):
    directory = os.getcwd() + "/static/"
    print(directory)
    response = make_response(send_from_directory(directory, path.encode('utf-8').decode('utf-8'), as_attachment=False))
    mime_type = mimetypes.guess_type(path)[0]
    if path.endswith(".js") :
       mime_type = "application/javascript"
    response.headers['Content-Type'] = mime_type
    print(directory, path, mime_type)
    return response

@app.route('/favicon.ico')
def favicon():
    return send_from_directory(os.path.join(app.root_path, 'static'), 'favicon.ico'
        , mimetype='image/vnd.microsoft.icon')

if __name__ == '__main__':
   app.run(debug = True)

• 运行结果：

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭ 如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O??? 如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡) 感谢各位童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！