头图

Flask + Echarts 制作 仪表盘

台湾省委书记北京

下载

https://echarts.apache.org/examples/zh/index.html

image.png

image.png

代码展示

  • 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)
  • print

/ 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

image.png

阅读 341

这个人很懒,没有什么说的。

89 声望
0 粉丝
0 条评论
推荐阅读
P21. vue3 组合式 api
组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语,涵盖了以下方面的 API:

台湾省委书记

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3k评论 2

封面图
实现《羊了个羊》的小游戏
这两天火爆全场的《羊了个羊》游戏,相信大家都玩过了,那么在玩这个游戏的同时,我想大家都会好奇这个游戏的实现,本文就带大家使用css,html,js来实现一个动物版的游戏。

夕水15阅读 5k评论 10

封面图
CSS transform、transition、animation 指南
transform变换~ 复杂的变换参数。Transform 取值`none `初始值None 适用于除 “基元行内”框之外的所有元素 百分数相对范围框计算 计算值指定的值,不过相对长度值会计算为绝对长度 继承性否 动画性变形 坐标系1.1 ...

散一群逗逼12阅读 1.6k评论 1

封面图
利用思否猫素材实现一个丝滑的轮播图(html + css + js)
使用思否猫素材实现一个轮播图本文参与了1024程序员节,欢迎正在阅读的你也加入。通过本文,你将学到:htmlcssjs没错,就是html,css,js,现在是框架盛行的时代,所以很少会有人在意原生三件套,通过本文实现一个丝...

夕水15阅读 1.4k

封面图
两行CSS让页面提升了近7倍渲染性能!
对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢,你的用户很可能会因此离你而去。所以页面性能对于前端开发者来...

南玖7阅读 1.4k

封面图
有意思的水平横向溢出滚动
最近接到一个很有意思的需求,能否做到当内容横向溢出时,依然能够使用鼠标滚轮对内容进行滚动的方法。什么意思呢?来看看这么一种情况:我们有一个垂直方向溢出滚动的容器,以及一个水平方向溢出滚动的容器:如...

chokcoco7阅读 2.2k评论 2

封面图

这个人很懒,没有什么说的。

89 声望
15 粉丝
宣传栏