免费A级毛片无码专区网站-成人国产精品视频一区二区-啊 日出水了 用力乖乖在线-国产黑色丝袜在线观看下-天天操美女夜夜操美女-日韩网站在线观看中文字幕-AV高清hd片XXX国产-亚洲av中文字字幕乱码综合-搬开女人下面使劲插视频

  1. 首頁 > 生活 > >

Flask 框架：運(yùn)用Echarts繪制圖形

生活百科

echarts是百度推出的一款開源的基于JavaScript的可視化圖表庫 ， 該開發(fā)庫目前發(fā)展非常不錯(cuò) ， 且支持各類圖形的繪制可定制程度高 ， Echarts繪圖庫同樣可以與Flask結(jié)合 ， 前臺(tái)使用echart繪圖庫進(jìn)行圖形的生成與展示 ， 后臺(tái)則是Flask通過render_template方法返回一串JSON數(shù)據(jù)集 ， 前臺(tái)收到后將其應(yīng)用到繪圖庫上 ， 實(shí)現(xiàn)動(dòng)態(tài)展示W(wǎng)eb服務(wù)日志狀態(tài)功能 。
如下演示案例中 ， 將分別展示運(yùn)用該繪圖庫如何前后端交互繪制（餅狀圖 ， 柱狀圖 ， 折線圖）這三種最基本的圖形 。
實(shí)現(xiàn)繪制餅狀圖: 用于模擬統(tǒng)計(jì)Web容器的日志數(shù)據(jù) ， 通過餅狀圖將訪問狀態(tài)統(tǒng)計(jì)出來 。
前端部分/templates/index.html代碼如下:
<html> <head><meta charset="UTF-8"><title>LyShark</title><script src="http://shimg.jingyanzongjie.com/230725/031T53O7-0.jpg"></script><script src="http://shimg.jingyanzongjie.com/230725/031T533F-1.jpg"></script> </head> <body><div class="panel panel-primary" style="width: 40%;height: 30%; float: left"><div class="panel-heading"><h3 class="panel-title">LyShark 網(wǎng)站訪問狀態(tài)統(tǒng)計(jì)</h3></div><div class="panel-body"><div id="main" style="width:100%; height: 300px"></div></div></div> </body> <script type="text/javascript" charset="UTF-8">var kv = new Array();kv = {{ data | safe }}var test = new Array();for(var logkey in kv){test.push( {value:kv[logkey], name:logkey} )}var display = function(){var main = echarts.init(document.getElementById("main"));var option = {legend: {orient: 'vertical',left: 'left',},series: [{type: 'pie',radius: '70%',center: ['50%', '50%'],detail: {formatter:'{value}'},data: test}]};main.setOption(option,true);};display(); </script></html>后端代碼如下通過模擬render_template返回一些數(shù)據(jù) 。
from flask import Flask,render_template,requestimport jsonapp = Flask(import_name=__name__,static_url_path='/python',# 配置靜態(tài)文件的訪問url前綴static_folder='static',# 配置靜態(tài)文件的文件夾template_folder='templates') # 配置模板文件的文件夾def Count_Flag_And_Flow(file):list = []flag = {}with open(file) as f:contexts = f.readlines()for line in contexts:it = line.split()[8]list.append(it)list_num = set(list)for item in list_num:num = list.count(item)flag[item] = numreturn flag@app.route('/', methods=["GET"])def index():Address = {'226': 4, '404': 12, '200': 159, '400': 25, '102': 117, '302': 1625}# Address = Count_Flag_And_Flow("d://access_log")return render_template("index.html",data = https://www.huyubaike.com/biancheng/json.dumps(Address))if __name__ =='__main__':app.run(host="127.0.0.1", port=80, debug=False)運(yùn)行后訪問自定義域名 ， 輸出如下效果的餅狀圖:

Flask 框架：運(yùn)用Echarts繪制圖形

文章插圖
實(shí)現(xiàn)繪制柱狀圖: 統(tǒng)計(jì)訪問了本站的所有ID地址并將地址數(shù)大于2的全部顯示出來.
前端index.html代碼如下
【Flask 框架：運(yùn)用Echarts繪制圖形】<html> <head><meta charset="UTF-8"><title>LyShark</title><script src="http://shimg.jingyanzongjie.com/230725/031T53O7-0.jpg"></script><script src="http://shimg.jingyanzongjie.com/230725/031T533F-1.jpg"></script> </head> <body><div class="panel panel-primary" style="width: 58%;height: 30%; float: left"><div class="panel-heading"><h3 class="panel-title">LyShark 網(wǎng)站設(shè)備類型統(tǒng)計(jì)</h3></div><div class="panel-body"><div id="main1" style="width:100%; height: 300px"></div></div></div> </body> <script type="text/javascript" charset="UTF-8">var kv = new Array();var keys = new Array();var values = new Array();kv = {{ data | safe }}for(var logkey in kv){keys.push(logkey);values.push(kv[logkey]);}var display = function() {var main1 = echarts.init(document.getElementById("main1"));var option = {xAxis: {type: 'category',data: keys},yAxis: {type: 'value'},series: [{data: values,type: 'bar'}]};main1.setOption(option,true);};display(); </script></html>

經(jīng)驗(yàn)總結(jié)擴(kuò)展閱讀