Echarts简介
官网介绍
1.官网地址：
2.介绍下官网：
看文档
知道如何下载
通过github下载
在dist目录下 echarts.js
示例 https://echarts.apache.org/examples/zh/index.html
gallery资源 https://www.makeapie.com/explore.html#s
Echarts案例
https://echarts.apache.org/zh/tutorial.html
1.下载echarts.js到本地
2.然后在html文件中通过如下引入
<script src="echarts.min.js"></script>
或通过cdn免下载引入
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js"></script>
3.使用
初始化一个具有宽和高的容器
<div id="main" style="width: 600px ;height:600px;"></div>
在script中进行如下操作
初始化e’charts,绑定容器
<script> // init echarts var myid = document.getElementById("main"); var myecharts = echarts.init(myid); // define option // invoking function </script>
设置option,这里包括我们想要绘制的图形类型，数据，x,y轴信息等
在官网示例中找
// define option var option = { title:{ text:"echarts 标题" }, xAxis:{ data:['food','digital','dress','bags'] }, yAxis:{ }, series:{ type:"bar", data:[100,120,90,150] }, }
将option传给myecharts实例就可以了
//Call the function and pass the arguments myecharts.setOption(option);
展示如图
Echarts 前后端交互
1. 安装flask
pip install flask==2.0.3
2. 创建appweb.py
并初始化appweb.py
from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' @app.route('/hello') def hello(): return 'Hello2' # app.run(host, port, debug, options) app.run("0.0.0.0",5000,debug=True,)
必须在项目中导入Flask模块。 Flask类的一个对象是我们的WSGI应用程序。
Flask构造函数使用当前模块（__name __）的名称作为参数。
Flask类的route()函数是一个装饰器，它告诉应用程序哪个URL应该调用相关的函数。
测试
http://localhost:5000/hello
http://localhost:5000/hello
3. flask返回json数据+中文显示
app.config['JSON_AS_ASCII'] = False # 随便定义个json字典 dic={"a":1,"b":2,"c":"你好"} @app.route('/jsonify') def jsonifys(): # Content-Type: application/json return jsonify(dic) @app.route('/jsondumps') def jsondumps(): # Content-Type: text/html; charset=utf-8 return json.dumps(dic,ensure_ascii=False)
测试：
http://localhost:5000/jsonify
http://localhost:5000/jsondumps
使用jsonify方法是需要添加一句 app.config[‘JSON_AS_ASCII’] = False
而json.dumps方法需要添加参数 ensure_ascii=False
这样做可以避免显示中文乱码。
4. flask读取数据库返回json数据
SQL文件：
/* Navicat Premium Data Transfer Source Server : localhost Source Server Type : MySQL Source Server Version : 50723 Source Host : localhost:3306 Source Schema : weblogs Target Server Type : MySQL Target Server Version : 50723 File Encoding : 65001 Date: 14/04/2022 12:54:40 */ SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for dw_pvs_everyhour_oneday -- ---------------------------- DROP TABLE IF EXISTS `dw_pvs_everyhour_oneday`; CREATE TABLE `dw_pvs_everyhour_oneday` ( `month` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '月份', `day` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '日期', `hour` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '小时', `pvs` int(11) NULL DEFAULT NULL COMMENT '每天浏览量' ) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic; -- ---------------------------- -- Records of dw_pvs_everyhour_oneday -- ---------------------------- INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 07', 13); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 08', 11); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 09', 14); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 10', 3); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 11', 2); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 12', 4); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 13', 5); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 14', 1); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 15', 2); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 16', 1); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 17', 4); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 19', 1); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 22', 1); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 23', 1); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '19', ' 00', 4); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '19', ' 02', 2); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '19', ' 03', 5); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '19', ' 04', 1); INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '19', ' 05', 1);
Python web代码：
在工程目录下创建static和templates目录，如下：
在工程目录下创建webapp.py文件，内容如下：
from flask import Flask,render_template,url_for import pymysql import json #生成Flask实例 app=Flask(__name__) @app.route("/") def hello(): return render_template('my_template.html') #/test路由 接收前端的Ajax请求 @app.route('/test',methods=['POST','GET']) def my_echart(): #连接数据库 conn=pymysql.connect(host='127.0.0.1',user='root',password='111111',db='weblogs') cur=conn.cursor() sql='SELECT t.hour,t.pvs from dw_pvs_everyhour_oneday t' cur.execute(sql) u=cur.fetchall() #转换成json格式 jsonData={} xhour=[] ypvs=[] for data in u: xhour.append(data[0]) ypvs.append(data[1]) print(xhour) print(ypvs) jsonData['xdays']=xhour jsonData['yvalues']=ypvs #json.dumps()用于将dict类型的数据转换成str,因为如果直接将dict类型的数据写入json会报错，因此将数据写入时需要用到此函数 j=json.dumps(jsonData) cur.close() conn.close() #在浏览器上渲染my_template.html模板（为了查看输出数据) return (j) if __name__ == '__main__': app.run(debug=True)
测试：
在templates文件夹下创建my_template.html，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>炫酷的ECharts</title> </head> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 800px;height:500px;margin: 0 auto;"></div> <!--引入jquery.js--> <script src="../static/js/jquery.js"></script> <!--引入echarts.js--> <script src="../static/js/echarts.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var app = { xday:[], yvalue:[] }; // 发送ajax请求，从后台获取json数据 $(document).ready(function () { getData(); console.log(app.xday); console.log(app.yvalue) }); function getData() { $.ajax({ url:'http://localhost:5000/test', data:{}, type:'GET', async:false, dataType:'json', success:function(data) { app.xday = data.xdays; app.yvalue = data.yvalues; myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: app.xday }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: app.yvalue }] }) }, error:function (msg) { console.log(msg); alert('系统发生错误'); } }) }; </script> <body> </body> </html>
测试：
返回截图如下：
5. flask返回pandas读取的数据
数据样例：
后端代码：
import pandas as pd df = pd.read_csv("DataAnalyst.csv") @app.route('/detail') def get_detail(): # 省略df的创建过程 jdata = df.to_json(orient='records', force_ascii=False) # 返回值为一个字符串 return jdata @app.route('/detailjson') def get_detail_json(): # 省略df的创建过程 jdata = df.to_json(orient='records', force_ascii=False) # 返回值为json数据 return jsonify(json.loads(jdata))
前端代码：
<div id="main2" style="width: 800px;height:500px;margin: 0 auto;"></div> <script type="text/javascript"> var myChart2 = echarts.init(document.getElementById('main2')); var app2 = { xday:[], yvalue:[] }; // 发送ajax请求，从后台获取json数据 $(document).ready(function () { getData(); console.log(app.xday); console.log(app.yvalue); getDfData(); }); var city_list = []; var city_company_list = []; var dict1 = {}; function getDfData() { $.ajax({ //url:'http://localhost:5000/detail', url:'http://localhost:5000/detailjson', data:{}, type:'GET', async:false, dataType:'json', success:function(data) { data.forEach((item, index) => { if (dict1.hasOwnProperty(item.城市)) { dict1[item.城市] += 1; } else { dict1[item.城市] = 1; } }); for(var key in dict1){ city_list.push(key) city_company_list.push(dict1[key]) } app2.xday = city_list; app2.yvalue = city_company_list; console.log(app2) myChart2.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: app2.xday }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: app2.yvalue }] }) }, error:function (msg) { console.log(msg); alert('系统发生错误'); } }) }; </script>
6. flask解决CORS跨域问题
如果前端代码不在flask工程下，或是直接打开html，会出现无法前端无法获得数据的情况，这时可以配置跨域请求
什么是跨域？
