在看這篇文章，建議大家看下下面鏈接文章：
https://blog.csdn.net/ITLearnHall/article/details/102527961
首先給大家說一下頁面動態刷新的優點與缺點，優點：頁面不需要手動刷新，數據動態加載，看着爽，也比較看出數據的動態變化規律，一般大boos喜歡；缺點：頁面刷新...刷新...容易卡（數據過大，內存...），所以大家展示動態數據，一定要注意動態數據的合理性，沒用的數據及時清理。
言歸正傳，直接上代碼
前臺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/dt_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=data.x;
// option.series[0].data=data.y;
// myChart.setOption(option, true);
//
// });
dt_test();
function dt_test() {
$.post("/dt/top",function (data) {
option.xAxis.data=data.x;
option.series[0].data=data.y;
myChart.setOption(option, true);
//1000一秒刷新
setTimeout(dt_test,1000)
});
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
};
}
後臺python代碼
# -*-coding: utf-8-*-
# !/usr/bin/env python
from flask import Flask,render_template,jsonify
import random
app = Flask(__name__)
@app.route('/dt/top', methods=["post"])
def test():
print("進來了")
# x軸數據，可以從數據庫，文件，或者隨機函數產生
x = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
# y軸數據，可以從數據庫，文件，或者隨機函數產生
y = [820, 932, 901, 934, 1290, random.randint(1,1000), random.randint(1,1000)]
return jsonify({"x":x,"y":y})
@app.route('/')
def hello_world():
return render_template('dt_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("/dt/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);
};
setTimeout(test,1000)
}
然後會出現下面這種亂跳頁面，這個是因爲圖表一直在渲染
最後說一下，一般實現頁面刷新會用setTimeout()這個方法
關注公衆號IT-LearnHall，免費領
進QQ羣（779809018）免費領取學習資源，疑難問題解答。同時歡迎大家關注我的微信公衆號：代碼幫 ，免費領取學習資源。
本公衆號將秉持活到老學到老學習無休止的交流分享開源精神，匯聚於互聯網和個人學習工作的精華乾貨知識，一切來於互聯網，反饋回互聯網。
目前研究領域：大數據、機器學習、深度學習、人工智能、數據挖掘、數據分析。 語言涉及：Java、Scala、Python、Shell、Linux等 。同時還涉及平常所使用的手機、電腦和互聯網上的使用技巧、問題和實用軟件破解。 只要你一直關注和呆在羣裏，每天必須有收穫,討論和答疑QQ羣：大數據和人工智能總羣(779809018)微信公衆號（代碼幫）每天分享最新IT、大數據和人工智能新技術。
