Flask+Echarts制作仪表盘

时间：2023-04-02 14:41:08 HTML

下载https://echarts.apache.org/examples/zh/index.html代码展示html{%extends'layout.html'%}{%blockxx%}看板其他仪表盘开发页面敬请期待。仪表板

在线人数

{%endblock%}{%blockjs%}<脚本类型="文本/javascript">//根据准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));//指定图表的配置项和数据varoption={title:{text:'资源直方图'},tooltip:{},legend:{data:['quantity']},xAxis:{data:{{data_name|safe}}},yAxis:{},series:[{name:'资产类型',type:'bar',data:{{data_value|safe}}}]};myChart.setOption(option);{%endblock%}flask@dashboard.route('/',methods=['GET'])@login_requireddefindex1():login_count_online=get_keys_pattern_count('login')print('/wecome!hello','##login_count_online:',login_count_online,type(login_count_online))date_list1=date_list(7)count_login=[]foriindate_list1:login_count=user_login.query.filter(user_login.date_time.like("%%{tdate}%%".format(tdate=i))).count()count_login.append(login_count)resource_dic=db.session.query(func.count(Resources.id),Select.select_name).filter(Resources.parent_id==Select.select_id).group_by(Resources.parent_id).all()#[(2,'ip'),(5,'会议室名称'),(1,'服务器'),(1,'打印机')]data_js=[]data_value=[]data_name=[]forjinresource_dic:l2={}l2['value']=j[0]data_value.append(j[0])l2["name"]=j[1]data_name.append(j[1])data_js.append(l2)print("###data_js:",data_js)db.session.close()print("##date_list1:",date_list1,"##count_login:",count_login)print("##data_js",data_js)打印("##data_value",data_value)print("##data_name",data_name)print("##login_count_online",login_count_online)returnrender_template('index.html',date=date_list1,value=count_login,data_js=data_js,data_value=data_value,data_name=data_name,login_count_online=login_count_online)print/欢迎！你好##login_count_online:2['2022-08-31','2022-09-01','2022-09-02','2022-09-03','2022-09-04','2022-09-05','2022-09-06']###data_js:[{'value':2,'name':'instancehost'},{'value':5,'name':'会议中心mname'},{'value':1,'name':'server'},{'value':1,'name':'printer'}]##date_list1:['2022-08-31','2022-09-01','2022-09-02','2022-09-03','2022-09-04','2022-09-05','2022-09-06']##count_login:[1,0,1,0,0,0,0]##data_js[{'value':2,'name':'instancehost'},{'value':5,'name':'conferenceroomname'},{'value':1,'name':'server'},{'value':1,'name':'printer'}]##data_value[2,5,1,1]##data_name['instancehost','conferenceroomname','server','printer']##login_count_online2

上一篇：代码高亮、highlight.js的调用方法及其问题

下一篇：基于HTML5Canvas的地铁站监控

Flask+Echarts制作仪表盘相关文章