通常實現實現echarts圖表用異步ajax（jquery）請求後臺接口數據，現在舉例python,flask項目
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="height: 100%;width: 100%;position: fixed"></div>
</body>
<script type="text/javascript" src="/static/js/test_echarts.js"></script>
</html>
js測試圖表是否可以正常展示圖表代碼
test();
function test() {
var myChart = echarts.init(document.getElementById("container"));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'line',
areaStyle: {}
}]
};
$.post("/top",function (data) {
option.xAxis.data=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
option.series[0].data=[820, 932, 901, 934, 1290, 1330, 1320];
myChart.setOption(option, true);
});
if (option && typeof option === "object") {
myChart.setOption(option, true);
};
}
運行正常
定義Python後臺接口(flask)
# -*-coding: utf-8-*-
# !/usr/bin/env python
from flask import Flask, render_template, jsonify
app = Flask(__name__)
@app.route('/top', methods=["post"])
def test():
print("進來了")
# x軸數據，可以從數據庫，文件，或者隨機函數產生
x = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
# y軸數據，可以從數據庫，文件，或者隨機函數產生
y = [820, 932, 901, 934, 1290, 1330, 1320]
return jsonify({"x": x, "y": y})
@app.route('/')
def hello_world():
return render_template('test_echarts.html')
if __name__ == '__main__':
app.run()
更改js代碼
test();
function test() {
var myChart = echarts.init(document.getElementById("container"));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'line',
areaStyle: {}
}]
};
$.post("/top",function (data) {
option.xAxis.data=data.x;
option.series[0].data=data.y;
myChart.setOption(option, true);
});
if (option && typeof option === "object") {
myChart.setOption(option, true);
};
}
運行成功
頁面展示
進QQ羣（779809018）免費領取學習資源，疑難問題解答。同時歡迎大家關注我的微信公衆號：代碼幫 ，免費領取學習資源。
本公衆號將秉持活到老學到老學習無休止的交流分享開源精神，匯聚於互聯網和個人學習工作的精華乾貨知識，一切來於互聯網，反饋回互聯網。
目前研究領域：大數據、機器學習、深度學習、人工智能、數據挖掘、數據分析。 語言涉及：Java、Scala、Python、Shell、Linux等 。同時還涉及平常所使用的手機、電腦和互聯網上的使用技巧、問題和實用軟件破解。 只要你一直關注和呆在羣裏，每天必須有收穫,討論和答疑QQ羣：大數據和人工智能總羣(779809018)微信公衆號（代碼幫）每天分享最新IT、大數據和人工智能新技術。
