下载
https://echarts.apache.org/examples/zh/index.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 %}
@dashboard.route('/', methods=['GET'])@login_requireddef 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