实验作业：Python中Flask的调用（Echart）

【实验名称】 实验四：Flask中使用Echarts

【实验目的】

1. 完成python操作Echarts

【实验原理】

使用 render_template() 方法可以渲染模板，只要提供模板名称和需要作为参数传递给模板的变量。 通过Echarts网站下载可视化图表，并且可以通过Flask去修改数据，在网页端更新可视化中数据。

【实验环境】

Echarts：https://echarts.apache.org/examples/zh/editor.html?c=bar-simple Python3.9

【实验步骤】 【实验步骤】 准备内容：下载基础柱状图html文件、jquery.js文件             在.py文件同目录下建立两个文件夹static，template             static下放置jquery.min.js文件 ， template放置你调用的html文件。

题目一：编写python程序 from flask import Flask, render_template from flask_pymongo import PyMongo from pymongo import MongoClient from flask import Flask, render_template, request, Response, redirect, url_for from flask import jsonify import json app = Flask(__name__) app.config['JSON_AS_ASCII'] = False app.config[     'MONGO_URI'] = 'mongodb+srv://alva:594104@cluster0.5hyy21w.mongodb.net/?retryWrites=true&w=majority'  # "mongodb+srv://admin:admin@cluster0.wkfvd.mongodb.net/coronavirus?retryWrites=true&w=majority" mongo = PyMongo(app) @app.route("/") def hello_world():     return "<p>Hello, Echart!</p>" @app.route("/bar-download") def bar_old():     return render_template("bar-simple-download.html") @app.route("/bar-new") def bar_new():     return render_template("bar-simple-new.html") @app.route("/chinaprovicne_data_jsonify") def chinaprovince_data_jsonify():     client = MongoClient("mongodb+srv://alva:594104@cluster0.5hyy21w.mongodb.net/?retryWrites=true&w=majority")     db = client.coronavirus     collection = db.chinaprovince     chinaprovincecusor = collection.find({"date": '20200702'})     data_list = {}     ##for i in ['name', 'confirm']:     outputapp = []     """for s in chinaprovincecusor: outputapp.append(s['confirm']) ##data_list[i] = outputapp data_list['confirmcount'] = outputapp"""     outputapp2 = []     for s in chinaprovincecusor:         outputapp.append(s['confirm'])         outputapp2.append(s['name'])     ##data_list[i] = outputapp     data_list['confirmedCount'] = outputapp     data_list['provinceShortName'] = outputapp2     return jsonify(data=data_list) @app.route("/chinaprovicne_data") def chinaprovince():     client = MongoClient("mongodb+srv://alva:594104@cluster0.5hyy21w.mongodb.net/?retryWrites=true&w=majority")     db = client.coronavirus     collection = db.chinaprovince     chinaprovincecusor = collection.find({"date": '20200702'})     outputapp = []     for s in chinaprovincecusor:         outputapp.append({"data": s['date'], 'provinceShortName': s['name'], 'confirmedCount': s['confirm']})     return Response(json.dumps(outputapp, ensure_ascii=False), mimetype='application/json') if __name__ == "__main__":     app.run(debug=True) 首先下载基础柱状图的html文件，并进行添加和修改： 添加：（1）<script type="text/javascript" src="../static/jquery.min.js"></script>    （2）$.ajax({     type:'GET',     url:"http://127.0.0.1:5000/pie_nest_data",//修改到自己json文件的url     dataType:'json',     success:function(data){           console.log(data);           //html原本的js代码     } });   //放在该</script>标签前   修改（图表参数数据）： 注：如果你return jsonify(data=data_list)（你route（）的返回）的话,则需要命名一个 data =data[‘data’] ；xAxis,yAxis中的data数据也需要按自己的需求进行更改。 ！！！你得在前面写上app.config['JSON_AS_ASCII'] = False解决中文乱码问题   当然你也可以选择通过 return Response(json.dumps(outputapp, ensure_ascii=False), mimetype='application/json') #outputapp为你传入的json数据，ensure_ascii=False解决中文乱码问题 创建python文件，命名为flask_echarts.py 在flask_echarts.py中编写如上代码 执行py代码，并点击url查看/bar-new如下： ##解决x轴数据显示不全问题：：设置xAxis.axisLabel.rotate旋转//你修改的htmi文件位置： axisLabel: {      interval:0,  //让所有标签全部显示    rotate:40  //让标签旋转一定的角度 }