基于Echarts实现可视化数据大屏科技业务数据统计

原创

@码出未来④-web网页设计 2022-10-31 10:27:16 ©著作权

文章标签 echarts 科技 javascript ecmascript 前端 文章分类 数据分析人工智能

©著作权归作者所有：来自51CTO博客作者@码出未来④-web网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作，可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

文章目录

前言
一、Echart是什么
二、ECharts入门教程
三、作品演示
四、代码实现
1.HTML
2.CSS
3.JavaScript
五、更多干货

一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

基于Echarts实现可视化数据大屏科技业务数据统计_echarts

四、代码实现

1.HTML

<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link href="css/animations.css" rel="stylesheet">
    <link href="css/content1.0.css" rel="stylesheet">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/times.js"></script>
</head>

<body ng-app="myApp" ng-controller="customersCtrl">

    <div class="banner-caption clearfix">
        <div id="title">
            <div class="caption-title clearfix">
                <i class="title-left"><img src="images/title-left.png"></i>
                <p class="title-left-title-font">XXX科技业务数据统计</p>
                <i class="title-left"><img src="images/title-right.png"></i>
            </div>
            <div class="title-date" style="height: 40px;">
                <p id="DateTime" style="height: 40px;text-align: center;">实时数据</p>
            </div>
        </div>
        <div id="main">
            <div class="col-md-12">
                <div class="row">
                    <div id="title01" class="col-xs-12 col-sm-12 col-md-3">
                        <div class="data-box1 clearfix" id="box01">
                            <i class="topL"></i>
                            <i class="topR"></i>
                            <i class="bottomL"></i>
                            <i class="bottomR"></i>
                            <div class="data-title">
                                <b class="data-title-left">[</b>
                                <span>今日数据分析</span>
                                <b class="data-title-right">]</b>
                            </div>
                            <div class="total-mn" id="total-mn1">
                                <span>日均额</span>

                            </div>
                            <div id="box1_top">
                                <div id="box2" class="box-echart box-bottom">
                                </div>
                            </div>
                            <div class="total-mn" id="total-mn2">
                                <span>资产在贷余额</span>

                            </div>
                            <div id="box1_bottom">
                                <div id="box4" class="box-echart">
                                </div>
                            </div>
                            <ul class="live-box" id="live-box">
                                <li style="margin-right: 2%;">
                                    <p>年业务成交额</p>
                                    <p class="live-box-font1"><span style="font-size: 2rem;">549462</span> 万元</p>
                                </li>
                                <li>
                                    <p>年完成率</p>
                                    <p class="live-box-font1"><span style="font-size: 2rem;">80%</span></p>
                                </li>
                            </ul>
                        </div>
                        <div class="data-box1" id="box8-box" style="margin-top: 30px;">
                            <i class="topL"></i>
                            <i class="topR"></i>
                            <i class="bottomL"></i>
                            <i class="bottomR"></i>
                            <div class="data-title">
                                <b class="data-title-left">[</b>
                                <span>所贷金额用途</span>
                                <b class="data-title-right">]</b>
                            </div>
                            <div id="box8" class="box-echart">
                            </div>
                        </div>
                    </div>
                    <div id="title02" class="col-xs-12 col-sm-12 col-md-6 panel-top panel-bottom">
                        <div class="data-box1 box1-back" id="box02">
                            <i class="topL"></i>
                            <i class="topR"></i>
                            <i class="bottomL"></i>
                            <i class="bottomR"></i>
                            <div class="data-title">
                                <b class="data-title-left">[</b>
                                <span>业务数据分布</span>
                                <b class="data-title-right">]</b>
                            </div>
                            <ul class="data-box1-data clearfix">
                                <p class="data-box1-font1">当日业务成交额</p>
                                <li class="data-box1-panel">746214q3464257495678098</li>
                                <li class="data-box1-font1" style="padding-top: 1rem;">万元</li>
                            </ul>
                            <div class="total-mn">
                                <span>本周业务累计额</span>
                                <span class="live-box-font1"><span style="font-size: 2.2rem;">5149462</span> 万元</span>
                            </div>
                            <div id="box1" class="box-echart-china">
                            </div>
                        </div>
                        <div class="data-box1" id="box9-box" style="margin-top: 30px;">
                            <i class="topL"></i>
                            <i class="topR"></i>
                            <i class="bottomL"></i>
                            <i class="bottomR"></i>
                            <div class="data-title" style="width:">
                                <b class="data-title-left">[</b>
                                <span>资产数据分析-列表</span>
                                <b class="data-title-right">]</b>
                            </div>
                            <div id="box9" class="box9-1">
                                <table class="panel-table">
                                    <thead>
                                        <tr>
                                            <th ng-repeat="x in listHead">{{ x.categories }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="y in listContent">
                                            <td>{{ y.categories }}</td>
                                            <td>{{ y.data1 }}</td>
                                            <td>{{ y.data2 }}</td>
                                            <td>{{ y.data3 }}</td>
                                            <td>{{ y.data4 }}</td>
                                            <td>{{ y.data5 }}</td>
                                            <td>{{ y.data6 }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="box9-2">
                                <table class="panel-table">
                                    <thead>
                                        <tr>
                                            <th width="50%">资产端</th>
                                            <td>前隆</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="z in listData1">
                                            <th>{{ z.categories }}</th>
                                            <td>{{ z.data1 }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="panel-table">
                                    <thead>
                                        <tr>
                                            <th width="50%">资产端</th>
                                            <td>用钱宝</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="q in listData1">
                                            <th>{{ q.categories }}</th>
                                            <td>{{ q.data2 }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="panel-table">
                                    <thead>
                                        <tr>
                                            <th width="50%">资产端</th>
                                            <td>闪银奇异</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="w in listData1">
                                            <th>{{ w.categories }}</th>
                                            <td>{{ w.data3 }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="panel-table">
                                    <thead>
                                        <tr>
                                            <th width="50%">资产端</th>
                                            <td>借贷宝</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="e in listData1">
                                            <th>{{ e.categories }}</th>
                                            <td>{{ e.data4 }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="panel-table">
                                    <thead>
                                        <tr>
                                            <th width="50%">资产端</th>
                                            <td>蚂蚁借呗</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="t in listData1">
                                            <th>{{ t.categories }}</th>
                                            <td>{{ t.data5 }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div id="title03" class="col-xs-12 col-sm-12 col-md-3">
                        <div class="data-box1" id="box03">
                            <i class="topL"></i>
                            <i class="topR"></i>
                            <i class="bottomL"></i>
                            <i class="bottomR"></i>
                            <div class="data-title" style="width:">
                                <b class="data-title-left">[</b>
                                <span>资金占比和资产占比</span>
                                <b class="data-title-right">]</b>
                            </div>
                            <ul class="ym-menu clearfix" id="ym-menu">
                                <li class="ym-active">
                                    <a href="">本年</a>
                                </li>
                                <li class="taba">
                                    <a href="">本月</a>
                                </li>
                            </ul>
                            <div id="box3" class="box-echart tabcontent">
                            </div>
                            <div id="boxes3" class="box-echart tabcontent" style="display: none;">
                            </div>
                        </div>
                        <div class="data-box1" id="box04" style="margin-top: 30px;">
                            <i class="topL"></i>
                            <i class="topR"></i>
                            <i class="bottomL"></i>
                            <i class="bottomR"></i>
                            <div class="data-title" style="width:">
                                <b class="data-title-left">[</b>
                                <span>计划放款与累计放款</span>
                                <b class="data-title-right">]</b>
                            </div>
                            <div id="box5" class="box-echart">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>

    <script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/mycharts.js"></script>
    <script>$(document).ready(function () {
            $('.ym-menu li').click(function () {
                var index = $(this).index();
                $(this).attr('class', "ym-active").siblings('li').attr('class', 'taba');
                $('.tabcontent').eq(index).show(200).siblings('.tabcontent').hide();
            });
            var t = 0;
            var timer = setInterval(function () {
                if (t == $('.ym-menu li').length) t = 0;
                $('.ym-menu li:eq(' + t + ')').click();
                t++;
            }, 3000)
        })</script>
</body>

</html>

2.CSS

html,
body {
    margin: 0;
    height: 100%
}

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body {
    font-size: 62.5%;
    line-height: 1.5;
    color: #333;
    background-color: #000c3b;
    position: relative;
    font-family: 微软雅黑
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table
}

.clearfix:after {
    clear: both;
    overflow: hidden
}

.clearfix {
    *zoom: 1
}

.banner-caption {}

.title-left img {
    width: 100%
}

@media(max-width:767px) {
    .title-left {
        float: left;
        display: none
    }
    .title-left-title-font {
        text-align: center;
        margin: 0 10px;
        background: -webkit-linear-gradient(top, #fff, #65c4f1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    .panel-bottom {
        margin-bottom: 30px
    }
    .box9-1 {
        display: none
    }
    .box9-2 {
        display: block
    }
}

@media(min-width:768px) and (max-width:991px) {
    .title-left {
        float: left;
        display: none
    }
    .title-left-title-font {
        text-align: center;
        margin: 0 10px;
        background: -webkit-linear-gradient(top, #fff, #65c4f1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    .panel-bottom {
        margin-bottom: 30px
    }
    .box9-1 {
        display: none
    }
    .box9-2 {
        display: block
    }
}

@media(min-width:992px) and (max-width:1199px) {
    .title-left {
        float: left;
        display: none
    }
    .title-left-title-font {
        float: left;
        margin: 0 10px;
        background: -webkit-linear-gradient(top, #fff, #65c4f1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    .panel-bottom {
        margin-bottom: 0
    }
    .box9-1 {
        display: block
    }
    .box9-2 {
        display: none
    }
}

@media(min-width:1200px) {
    .title-left {
        float: left;
        display: block
    }
    .title-left-title-font {
        float: left;
        margin: 0 10px;
        background: -webkit-linear-gradient(top, #fff, #65c4f1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    .panel-bottom {
        margin-bottom: 0
    }
    .box9-1 {
        display: block
    }
    .box9-2 {
        display: none
    }
}

.caption-title {
    font-size: 3rem;
    font-weight: 900;
    line-height: 65px;
    max-width: 980px;
    margin: 0 auto
}

.data-box1 {
    border: 2px solid #032d60;
    -webkit-box-shadow: #07417a 0 0 10px;
    -moz-box-shadow: #07417a 0 0 10px;
    box-shadow: inset 0 0 30px #07417a;
    position: relative
}

.data-title-left,
.data-title-right {
    color: #105eda;
    font-family: 微软雅黑;
    font-size: 20px
}

.data-title {
    background-color: #000c3b;
    width: 178px;
    margin: -18px auto 0;
    color: #83c7e3;
    font-size: 20px
}

.data-title span {
    margin: 0 15px
}

.box-bottom {
    border-bottom-width: 2px;
    border-bottom-color: #032d60;
    border-bottom-style: solid
}

.topL {
    width: 20px;
    height: 20px;
    border-top-width: 2px;
    border-top-color: #26c6f0;
    border-top-style: solid;
    border-left-width: 2px;
    border-left-color: #26c6f0;
    border-left-style: solid;
    position: absolute;
    top: -2px;
    left: -2px
}

.topR {
    width: 20px;
    height: 20px;
    border-top-width: 2px;
    border-top-color: #26c6f0;
    border-top-style: solid;
    border-right-width: 2px;
    border-right-color: #26c6f0;
    border-right-style: solid;
    position: absolute;
    top: -2px;
    right: -2px
}

.bottomL {
    width: 20px;
    height: 20px;
    border-bottom-width: 2px;
    border-bottom-color: #26c6f0;
    border-bottom-style: solid;
    border-left-width: 2px;
    border-left-color: #26c6f0;
    border-left-style: solid;
    position: absolute;
    bottom: -2px;
    left: -2px
}

.bottomR {
    width: 20px;
    height: 20px;
    border-bottom-width: 2px;
    border-bottom-color: #26c6f0;
    border-bottom-style: solid;
    border-right-width: 2px;
    border-right-color: #26c6f0;
    border-right-style: solid;
    position: absolute;
    bottom: -2px;
    right: -2px
}

.panel-top {
    margin-top: 30px
}

.box-echart {
    width: 100%;
    height: 200px;
    margin: 10px auto
}

.box-echart-china {
    width: 92%;
    margin: 10px auto;
    height: 500px;
    position: absolute;
    top: 11%;
    left: 5%
}

.box1-back {
    height: 600px;
    background-image: -webkit-radial-gradient(250px 250px at 50% 50%, hsla(209, 99%, 32%, 28), hsla(228, 100%, 0%, 0));
    background-image: radial-gradient(250px 250px at 50% 50%, hsla(209, 99%, 32%, 28), hsla(228, 100%, 0%, 0))
}

.panel-table {
    text-align: center;
    color: #ccc;
    margin: 0 auto !important;
    width: 96%;
    margin-top: 20px !important;
    padding: .5rem 0 !important;
    font-size: 1.5rem
}

.panel-table tr {
    height: 3rem;
    line-height: 2rem
}

.panel-table th {
    text-align: center !important
}

.panel-table thead tr {
    border-bottom: solid 1px #a8b4be;
    border-top: solid 2px #a8b4be
}

.data-box1-data {
    padding: 0;
    margin: 0 5%
}

.data-box1-data li {
    float: left;
    list-style-type: none;
    margin-right: 10px
}

.data-box1-font1 {
    color: #83c7e3;
    font-size: 2rem
}

.data-box1-panel {
    background-color: #214398;
    color: #fff;
    font-size: 2.4rem;
    padding: 0 2%;
    letter-spacing: 5px
}

@media(max-width:767px) {
    .title-date {
        margin-bottom: 20px
    }
}

@media(min-width:768px) and (max-width:991px) {
    .title-date {
        margin-bottom: 20px
    }
}

.title-date>p {
    color: #5b8bb6;
    box-shadow: inset 0 0 30px #07417a;
    border: solid 2px #032d60;
    border-radius: 10px;
    font-family: 微软雅黑;
    font-size: 2rem;
    line-height: 35px;
    line-height: 38px;
    max-width: 355px;
    margin: 5px auto
}

.live-box {
    padding: 0;
    width: 90%;
    margin: 0 auto
}

.live-box li {
    float: left;
    list-style-type: none;
    margin-bottom: 4%;
    font-size: 1.6rem;
    line-height: 1.4rem;
    width: 49%;
    background-color: #214398;
    color: #fff;
    padding: 2% 2% 0
}

.live-box-font1 {
    color: #f4e925
}

.total-mn {
    font-size: 1.6rem;
    color: #fff;
    padding-left: 5%
}

.ym-menu {
    padding: 0;
    width: 50%;
    margin: 5% auto 0;
    border: 2px solid #032d60
}

.ym-menu li {
    font-size: 1.6rem;
    color: #fff;
    width: 50%;
    text-align: center;
    list-style-type: none;
    float: left
}

.ym-active {
    background-color: #214398
}

.ym-active a {
    list-style-type: none;
    color: #fff
}

3.JavaScript

var slidint;

function newTimer() {
    stopit();
    var today;
    today = new Date();
    var str = today.toLocaleDateString();
    str += "  " + week();
    str += "  " + today.toLocaleTimeString();
    var o = document.getElementById("DateTime");
    o.innerHTML = str;
    slidint = setTimeout(newTimer, 1000);
}

function stopit() {
    clearTimeout(slidint);
}

function week() {
    var d, day, x, s = " ";
    var x = new Array("星期日", "星期一", "星期二");
    var x = x.concat("星期三", "星期四", "星期五");
    var x = x.concat("星期六");
    d = new Date();
    day = d.getDay();
    return (s += x[day]);
}
window.onload = function() {
    newTimer();
}