flask後端向HTML傳遞資料，用echart生成圖表
阿新 • • 發佈：2019-01-05
用python的flask框架開發一個web，與前端用ajax進行資料互動，反饋至前端後無法生成圖表，請教大神（資料我是開啟的本地的一個Excel中的資料）。程式碼如下：
app = Flask(__name__) @app.route('/', methods=['GET']) def homing(): return render_template('my_shiyan.html') @app.route('/', methods=['POST']) def home(): a=xlrd.open_workbook(r'F:\text\chengjlbb.xlsx') sheet1=a.sheet_by_index(0) cols=sheet1.col_values(0)[1:] cols1=sheet1.col_values(1)[1:] x=request.form.get("luhao", "null") m=[cols1[i] for i in range(len(cols)) if cols[i]==x] print(m) data=list(range(1,len(m)+1)) return jsonify(name=m,name1=data) if __name__ == '__main__': app.run(debug=True)
html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>試驗</title> <script src="{{ url_for('static', filename='echarts.min.js') }}"></script> <script src="{{ url_for('static', filename='jquery-3.1.1.js') }}"></script> <script type="text/javascript"> var $SCRIPT_ROOT = {{request.script_root|tojson|safe}}; function myfun() { $.ajax( { type : "POST", url : $SCRIPT_ROOT, dataType : "json", data : { "luhao" : $( "input[name=luhao]" ).val(), }, error: function( XMLResponse ) { alert( XMLResponse.responseText ) }, success : function ( data) { $( "#name" ).text( data.name); $( "#name1" ).text( data.name1); } } ); return false; } </script> </head> <body> <form action="" method="post" onSubmit="return myfun()"> <input name="luhao" type="text" /> <input type="submit" /> </form> <p>投料量: <span id="name"></span></p> <p>爐數: <span id="name1"></span></p> <div id="main" style="width: 800px;height:500px;margin: 20auto;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: '一二廠投料量' }, tooltip: {}, legend: { data:['投料量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '投料量', type: 'bar', data: [] }] }); var names=[]; var nums=[]; $.ajax({ type : "post", async : true, url : "/", data : {}, dataType : "json", success : function(result) { if (result) { for(var i=0;i<result.length;i++){ names.push(result[i].name); } for(var i=0;i<result.length;i++){ nums.push(result[i].name1); } myChart.hideLoading(); myChart.setOption({ xAxis: { data: names }, series: [{ name: '投料量', data: nums }] }); } }, error : function(errorMsg) { alert("圖表請求資料失敗!"); myChart.hideLoading(); } }) </script> </body> </html>