共计 4145 个字符,预计需要花费 11 分钟才能阅读完成。
下载
https://echarts.apache.org/examples/zh/index.html
代码展现
- html
{% extends 'layout.html' %}
{% block xx %}
<blockquote class="layui-elem-quote">
看板开发 ing <a class="layui-font-blue" href=""target="_blank">other dashboards</a> 的页面,敬请期待。</blockquote>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend> Dashboards</legend>
</fieldset>
<div class="layui-row">
<div class="layui-col-md6">
<div class="grid-demo grid-demo-bg1">
<div id="contest" style="width: 600px;height:400px;">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="grid-demo">
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header"> 在线人数 </div>
<div class="layui-card-body">
<br>
<br>
<br>
<h1 style="height: 90px;width: 90px;"> {{login_count_online}}</h1>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs6">
<div id="main" style="width: 500px;height:400px;" class="grid-demo grid-demo-bg1"></div>
</div>
<div class="layui-col-xs6">
<div id='tests' style='width:500px;height:400px;' class="grid-demo"></div>
</div>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
// 基于筹备好的 dom,初始化 echarts 实例
var myChart = echarts.init(document.getElementById('contest'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'Resource percentage analysis chart',
subtext: 'Resource Data',
left: 'center'
},
tooltip: {trigger: 'item'},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [{% for data in data_js %}
{value:{{ data.value}}, name: '{{data.name}}'},
{% endfor %}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
// 基于筹备好的 dom,初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {text: 'Resource histogram chart'},
tooltip: {},
legend: {data: ['数量']
},
xAxis: {data: {{ data_name|safe}}
},
yAxis: {},
series: [{
name: '资产类型',
type: 'bar',
data: {{data_value|safe}}
}]
};
myChart.setOption(option);
</script>
<script>
var myChart = echarts.init(document.getElementById('tests'));
var option = {title: {text: '浏览量统计'},
tooltip: {},
legend: {data: ['浏览量']},
xAxis: {data:{{ date|safe}}
},
yAxis: {},
series: [{
name: '浏览量',
type: 'line',
data:{{value|safe}}
}]
};
myChart.setOption(option);
</script>
{% endblock %}
- flask
@dashboard.route('/', methods=['GET'])
@login_required
def index1():
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 = []
for i in date_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, 'conferenceroomname'), (1, 'server'), (1, 'printer')]
data_js = []
data_value = []
data_name = []
for j in resource_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)
print("##data_value", data_value)
print("##data_name", data_name)
print("##login_count_online", login_count_online)
return render_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)
/ wecome! hello ##login_count_online: 2 <class 'int'>
['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': 'conferenceroomname'}, {'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_online 2
正文完