0
0

大数据库可视化模版43：网络当天实时发稿量

博主介绍：《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。
所有项目都配有从入门到精通的基础知识视频课程，免费
项目配有对应开发文档、开题报告、任务书、PPT、论文模版等

项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！
在文章末尾可以获取联系方式

效果图

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link  href="css/bootstrap.min.css" rel="stylesheet">
    <link  href="css/base.css"  rel="stylesheet">
    <title>大屏展示</title>
</head>
<body>
<div class="container-fluid container-fluid-s">
    <div class="row">
        <div class="col-md-12 col-lg-6 mrbt">
            <div class="totalbox">
                <ul class="nav nav-pills totaltitle" role="tablist">
                    <li class="fl"><p>当天实时发稿量</p></li>
                </ul>
                <div class="totaltem">
                    <div class="col-md-12 total hbule">
                        <span class="name">总发稿量</span>
                        <span class="number">
                            <a href="">3</a>
                            <a href="">8</a>
                            <a href="">9</a>
                            <a href="">1</a>
                        </span>
                        <span class="name">条</span>
                    </div>
                </div>
                <div class="row" style="padding: 0 2vw">
                    <div class="col-md-2">
                        <div class="column">
                            <p>宏观经济</p>
                            <div class="purple"><span class="bold">1292</span>条</div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="column">
                            <p>资本市场</p>
                            <div class="grn"><span class="bold">892</span>条</div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="column">
                            <p>货币市场</p>
                            <div class="bule"><span class="bold">590</span>条</div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="column">
                            <p>外汇市场</p>
                            <div class="yel"><span class="bold">970</span>条</div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="column">
                            <p>债券市场</p>
                            <div class="org"><span class="bold">1002</span>条</div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="column">
                            <p>大宗商品</p>
                            <div class="ybule"><span class="bold">692</span>条</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 mrbt">
            <div class="totalbox">
                    <!-- Nav tabs -->
                    <ul class="nav nav-pills totaltitle" role="tablist">
                        <li class="fl"><p>个人发稿量排行</p></li>
                        <li role="presentation" class="fr"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">月</a></li>
                        <li role="presentation" class="active fr"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">天</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <div id="container1" style="width: 100%;height: 100%;"></div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">
                            <div id="container2" style="width: 100%;height: 400px;"></div>
                        </div>
                    </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 mrbt">
            <div class="totalbox">
                    <!-- Nav tabs -->
                    <ul class="nav nav-pills totaltitle" role="tablist">
                        <li class="fl"><p>建稿类型统计图</p></li>
                        <li role="presentation" class="active fr"><a href="#jglx" aria-controls="jglx" role="tab" data-toggle="tab">天</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="jglx">
                            <div id="jglxchart" style="width: 100%;height: 100%;"></div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-lg-3 mrbt">
            <div class="totalbox">
                <!-- Nav tabs -->
                <ul class="nav nav-pills totaltitle" role="tablist">
                    <li class="fl"><p>各栏目发稿量趋势图</p></li>
                    <li role="presentation" class="active fr"><a href="#qst-month" aria-controls="qst-month" role="tab" data-toggle="tab">月</a></li>
                    <li role="presentation" class=" fr"><a href="#qst-day" aria-controls="qst-day" role="tab" data-toggle="tab">天</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="qst-month">
                        <div id="qst-monthchart" style="width: 100%;height: 100%;"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="qst-day">
                        <div id="qst-daychart" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 mrbt">
            <div class="totalbox">
                <!-- Nav tabs -->
                <ul class="nav nav-pills totaltitle" role="tablist">
                    <li class="fl"><p>人机发稿量占比</p></li>
                    <li role="presentation" class="fr"><a href="#rj-month" aria-controls="qst-month" role="tab" data-toggle="tab">月</a></li>
                    <li role="presentation" class="active  fr"><a href="#rj-day" aria-controls="qst-day" role="tab" data-toggle="tab">天</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane" id="rj-month">
                        <div id="rj-monthchart" style="width: 100%;height: 100%;"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane active" id="rj-day">
                        <div id="rj-daychart" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 mrbt">
            <div class="totalbox">
                <!-- Nav tabs -->
                <ul class="nav nav-pills totaltitle" role="tablist">
                    <li class="fl"><p>各栏目发稿量分布图</p></li>
                    <li role="presentation" class="active fr"><a href="#fbt-month" aria-controls="qst-month" role="tab" data-toggle="tab">月</a></li>
                    <li role="presentation" class=" fr"><a href="#fbt-day" aria-controls="qst-day" role="tab" data-toggle="tab">天</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="fbt-month">
                        <div id="fbt-monthchart" style="width: 100%;height: 100%;"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="fbt-day">
                        <div id="fbt-daychart" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 mrbt">
            <div class="totalbox">
                <!-- Nav tabs -->
                <ul class="nav nav-pills totaltitle" role="tablist">
                    <li class="fl"><p>建稿类型统计图</p></li>
                    <li role="presentation" class="active fr"><a href="#zxlx" aria-controls="zxlx" role="tab" data-toggle="tab">天</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="zxlx">
                        <div id="zxlxchart" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="js/bootstrap.js/"></script>
<!--<script src="js/highcharts.js"></script>-->
<script src="js/oldie.js"></script>
<script src="js/highcharts-zh_CN.js"></script>
<script src="js/base.js"></script>
<script type="text/javascript">
    // var chartheigh =  $('.totalbox').height();
    // console.log("div高度为："+chartheigh);

</script>
</body>
</html>
标签： 大数据库可视化模版
本文转载自: https://blog.csdn.net/u013818205/article/details/134175205
版权归原作者 黄菊华老师 所有， 如有侵权，请联系我们删除。
登录后发布评论

“大数据库可视化模版43：网络当天实时发稿量”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航