免費AI編程助手
pyecharts Tomado
2023-02-17 11:12 更新
本指南介紹了如何在 Tornado 中使用 pyecharts。
Tornado 前后端分離
前后端分離可以使用動態(tài)更新數(shù)據(jù)，增量更新數(shù)據(jù)等功能。
Step 0: 安裝 Tornado 的依賴
$ pip install tornadoStep 1: 新建項目和 HTML 文件
新建一個項目文件夾(空的即可)，新建 server.py、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" ></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div id="bar" style="width:1000px; height:600px;"></div>
<script>
$(
function () {
var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
$.ajax({
type: "GET",
url: "http://127.0.0.1:8889/getBarChart",
dataType: 'json',
success: function (result) {
chart.setOption(result);
}
});
}
)
</script>
</body>
</html>Step 2: 編寫 Tornado 和 pyecharts 的代碼
注: 目前由于 json 數(shù)據(jù)類型的問題，無法將 pyecharts 中的 JSCode 類型的數(shù)據(jù)轉(zhuǎn)換成 json 數(shù)據(jù)格式返回到前端頁面中使用。因此在使用前后端分離的情況下盡量避免使用 JSCode 進行畫圖。
示例代碼
import tornado.web
import tornado.ioloop
import tornado.httpserver
from pyecharts.charts import Bar
from pyecharts import options as opts
def bar_base() -> str:
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.dump_options()
def set_default_header(self):
# 后面的*可以換成ip地址，意為允許訪問的地址
self.set_header("Access-Control-Allow-Origin", "*")
self.set_header("Access-Control-Allow-Headers", "x-requested-with")
self.set_header("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE")
self.set_header("Content-Type", "application/json; charset=UTF-8")
class BarChart(tornado.web.RequestHandler):
def data_received(self, chunk):
pass
def get(self):
set_default_header(self)
chart_result = bar_base()
# 返回結(jié)果
self.write(chart_result)
self.finish()
class PageHandler(tornado.web.RequestHandler):
def data_received(self, chunk):
pass
def get(self):
self.render("index.html")
def make_app():
return tornado.web.Application([
(r"/", PageHandler),
(r"/getBarChart", BarChart),
])
if __name__ == "__main__":
port = 8889
app = make_app()
sockets = tornado.netutil.bind_sockets(port)
http_server = tornado.httpserver.HTTPServer(app)
http_server.add_sockets(sockets)
print("Server Start Running!\nHost: {} Port: {}".format("127.0.0.1", port))
tornado.ioloop.IOLoop.instance().start()Step 3: 運行項目
$ python server.py使用瀏覽器打開 http://127.0.0.1:8889 即可訪問服務(wù)
定時全量更新圖表
前端主動向后端進行數(shù)據(jù)刷新
定時刷新的核心在于 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" ></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js" 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:8889/getBarChart",
dataType: "json",
success: function (result) {
chart.setOption(JSON.parse(result));
}
});
}
</script>
</body>
</html>定時增量更新圖表
- 可以參照 Flask，Sanic，Django 的實現(xiàn)方式進行實現(xiàn)。
以上內(nèi)容是否對您有幫助：
更多建議：