一、安装pyecharts
Echarts 是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而 Python 是一门富有表达力的语言，很适合用于数据处理。当数据分析遇上数据可视化时，pyecharts 诞生了。
特性:
简洁的 API 设计，使用如丝滑般流畅，支持链式调用
囊括了 30+ 种常见图表，应有尽有
支持主流 Notebook 环境，Jupyter Notebook 和 JupyterLab
可轻松集成至 Flask，Sanic，Django 等主流 Web 框架
高度灵活的配置项，可轻松搭配出精美的图表
详细的文档和示例，帮助开发者更快的上手项目
多达 400+ 地图文件，并且支持原生百度地图，为地理数据可视化提供强有力的支持
V1:仅支持 Python3.6+
文档示例：http://pyecharts.herokuapp.com/
官网：https://github.com/pyecharts/pyecharts
二、安装PyEcharts
pip install pyecharts -U
安装组件：
Scatter3D
二、显示PyCharts
- Web直接显示
from flask import Flask
from pyecharts.charts import Bar
from pyecharts import options as opts
from flask import Markup
app = Flask(__name__)
app.config["DEBUG"] = True
# 定义条图
def bar_base() -> Bar:
c = (
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
.add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
)
return c
# 路由
@app.route("/")
def index():
c = bar_base()
return Markup(c.render_embed())
if __name__ == '__main__':
app.run() # 设置debug=True是为了让代码修改实时生效，而不用每次重启加载
Web直接显示
- Flask 前后端分离
在 templates 文件夹中新建一个 index.html 的文件，其中主要用到了 jquery 和 pyecharts 管理的 echarts.min.js 依赖。
1)前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态更新数据</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="bar" style="width:1000px; height:600px;"></div>
<script>
(function() {
var result_json = '{{ result_json|tojson }}';
// var result = JSON.parse(result_json);
var chart = echarts.init(document.getElementById('bar'), 'gray', {renderer: 'canvas'});
// ajax请求
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/barChart",
dataType: 'json',
data: {result: result_json},
success: function (result) {
chart.setOption(result);
}
});
})();
</script>
</body>
</html>
2)后端代码
from flask import Flask
from flask import render_template
# http请求库
from flask import request
# pyecharts 库
from pyecharts import options as opts
from pyecharts.charts import Bar
app = Flask(__name__)
app.config["DEBUG"] = True
# 根路径，渲染模板index.html
@app.route("/")
def index():
data = request.args.to_dict()
print(data)
return render_template("index.html", result_json=data)
# 定义标题参数绘制条图的函数
def bar_base(name,subtitle) -> Bar:
c = (
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
.add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
# 显示动态标题
.set_global_opts(title_opts=opts.TitleOpts(title=name, subtitle=subtitle))
)
return c
@app.route("/barChart")
def get_bar_chart():
# 接受请求参数
args = request.args.to_dict()
result = eval(args.get("result"))
name = result.get("name")
subtitle = result.get("subtitle")
c = bar_base(name, subtitle)
return c.dump_options_with_quotes()
if __name__ == '__main__':
app.run() # 设置debug=True是为了让代码修改实时生效，而不用每次重启加载
- 浏览测试
请求地址：http://127.0.0.1:5000/?name=test&subtitle=test
必须添加请求参数。
浏览测试
- 动态数据显示
1）前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态更新数据</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="bar" style="width:1000px; height:600px;"></div>
<script>
var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
// 每2秒更新一次
$(
function () {
fetchData(chart);
setInterval(fetchData, 2000);
}
);
// 定义函数，从后台获取数据
function fetchData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/barChart",
dataType: 'json',
success: function (result) {
chart.setOption(result);
}
});
}
</script>
</body>
</html>
2）后端代码
from flask import Flask
from flask import render_template
# 随机函数
import random
# pyecharts 库
from pyecharts import options as opts
from pyecharts.charts import Bar
app = Flask(__name__)
app.config["DEBUG"] = True
# 根路径，渲染模板index.html
@app.route("/")
def index():
return render_template("index.html")
# 随机数据条图
def bar_base() -> Bar:
c = (
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [random.randint(10, 100) for _ in range(6)])
.add_yaxis("商家B", [random.randint(10, 100) for _ in range(6)])
.set_global_opts(title_opts=opts.TitleOpts(title="", subtitle=""))
)
return c
@app.route("/barChart")
def get_bar_chart():
c = bar_base()
return c.dump_options_with_quotes()
if __name__ == '__main__':
app.run() # 设置debug=True是为了让代码修改实时生效，而不用每次重启加载
3）浏览显示
浏览显示
- 使用变量获取数据
1）html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图表示例</title>
<style>
.charts {
/*background-color: red;*/
height: 500px;
width: 600px;
}
</style>
<script src="../static/js/echarts.min.js"></script>
</head>
<body>
<div id="charts" class="charts"></div>
<div id="data" style="display: none">{{list}}</div>
<script>
var list = document.getElementById("data");
var d = document.getElementById("charts");
// 初始化图表
var chart = echarts.init(d);
option = {
title: {
text: '第一个小例子'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
// 读取后台数据转为json
data: JSON.parse(list.innerText)
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [35, 20, 56, 100, 80, 64]
}]
};
chart.setOption(option);
</script>
</body>
</html>
- python数据
from flask import Flask, url_for, request, jsonify, render_template
# json 解析
import json
app = Flask(__name__)
@app.route("/charts")
def getCharts():
data = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
# 必须使用json.dumps进行转换 json.dumps是将一个Python数据类型列表进行json格式的编码解析
# 否则双引号会转为单引号，导致前台无法解析此内容
return render_template("charts.html", list=json.dumps(data))
if __name__ == "__main__":
# 启动flask
app.run(port=9999, debug=True)
-
浏览访问
浏览访问
网友评论