pyecharts Sanic
2023-02-17 11:12 更新
本指南介紹了如何在 Sanic 中使用 pyecharts。
Sanic 前后端分離
前后端分離可以使用動(dòng)態(tài)更新數(shù)據(jù)，增量更新數(shù)據(jù)等功能。
Step 0: 安裝 Sanic 的依賴
$ pip install SanicStep 1: 新建項(xiàng)目和 HTML 文件
新建一個(gè)項(xiàng)目文件夾(空的即可)，新建 app.py、templates 文件夾以及在 templates 文件夾中新建 index.html。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div id="bar" style="width:1000px; height:600px;"></div>
<script>
var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
$(
function () {
fetchData();
}
);
function fetchData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/barChart",
dataType: 'json',
success: function (result) {
chart.setOption(JSON.parse(result));
}
});
}
</script>
</body>
</html>Step 2: 編寫 Sanic 和 pyecharts 的代碼
注: 目前由于 json 數(shù)據(jù)類型的問題，無法將 pyecharts 中的 JSCode 類型的數(shù)據(jù)轉(zhuǎn)換成 json 數(shù)據(jù)格式返回到前端頁面中使用。因此在使用前后端分離的情況下盡量避免使用 JSCode 進(jìn)行畫圖。
示例代碼
from random import randrange
from sanic import Sanic
from sanic.response import json, html
from pyecharts import options as opts
from pyecharts.charts import Bar
# 初始化 Sanic
app = Sanic(__name__)
def bar_base() -> Bar:
c = (
Bar()
.add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
.add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])
.add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副標(biāo)題"))
)
return c
@app.route("/barChart", methods=["GET"])
async def draw_bar_chart(request):
c = bar_base()
return json(c.dump_options_with_quotes())
@app.route("/", methods=["GET"])
async def index(request):
return html(open("./templates/index.html").read())
if __name__ == '__main__':
app.run()Step 3: 運(yùn)行項(xiàng)目
$ python app.py使用瀏覽器打開 http://127.0.0.1:8000 即可訪問服務(wù)
定時(shí)全量更新圖表
前端主動(dòng)向后端進(jìn)行數(shù)據(jù)刷新
定時(shí)刷新的核心在于 html 的 ?setInterval ?方法。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div id="bar" style="width:1000px; height:600px;"></div>
<script>
var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
$(
function () {
fetchData();
setInterval(fetchData, 2000);
}
);
function fetchData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/barChart",
dataType: "json",
success: function (result) {
chart.setOption(JSON.parse(result));
}
});
}
</script>
</body>
</html>定時(shí)增量更新圖表
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div id="bar" style="width:1000px; height:600px;"></div>
<script>
var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
var old_data = [];
$(
function () {
fetchData();
setInterval(getDynamicData, 2000);
}
);
function fetchData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/lineChart",
dataType: "json",
success: function (result) {
chart.setOption(JSON.parse(result));
old_data = chart.getOption().series[0].data;
}
});
}
function getDynamicData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/lineDynamicData",
dataType: "json",
success: function (result) {
old_data.push([result.name, result.value]);
chart.setOption({
series: [{
data: old_data
}]
});
}
});
}
</script>
</body>
</html>后端代碼也需要相應(yīng)的改變
from random import randrange
from sanic import Sanic
from sanic.response import json, html
from pyecharts import options as opts
from pyecharts.charts import Line
# 初始化 Sanic
app = Sanic(__name__)
def line_base() -> Line:
line = (
Line()
.add_xaxis(list(range(10)))
.add_yaxis(series_name="", y_axis=[randrange(0, 100) for _ in range(10)])
.set_global_opts(
title_opts=opts.TitleOpts(title="動(dòng)態(tài)數(shù)據(jù)"),
xaxis_opts=opts.AxisOpts(type_="value"),
yaxis_opts=opts.AxisOpts(type_="value")
)
)
return line
@app.route("/lineChart", methods=["GET"])
async def draw_line_chart(request):
c = line_base()
return json(c.dump_options_with_quotes())
cnt = 9
@app.route("/lineDynamicData", methods=["GET"])
async def update_line_data(request):
global cnt
cnt = cnt + 1
return json({"name": cnt, "value": randrange(0, 100)})
@app.route("/", methods=["GET"])
async def index(request):
return html(open("./templates/index.html").read())
if __name__ == '__main__':
app.run()以上內(nèi)容是否對(duì)您有幫助：
更多建議：