基于Echarts实现可视化数据大屏茶园监控大数据指挥舱

原创

@码出未来④-web网页设计 2022-10-30 10:11:49 ©著作权

文章标签 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实现可视化数据大屏茶园监控大数据指挥舱_前端

四、代码实现

1.HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>茶园监控大数据指挥舱HTML模板 www.bootstrapmb.com</title>
    <link rel="stylesheet" href="css/reset.css">
    <link href="css/video-js.css" rel="stylesheet">
    <script src="js/video.js"></script>
    <script src="js/videojs-contrib-hls.min.js" type="text/javascript"></script>
</head>
<style>.boxRader {
        position: relative;
        width: 100%;
        height: 80%;
    }

    .centerBox {
        width: 75%;
        margin-right: 15px;
        background: transparent;
    }

    .boxFont {
        font-size: 1.2vw;
    }

    .centerMainBox1 {
        width: 100%;
        height: 60.5%;
    }

    .centerMainBox2 {
        width: 100%;
        height: 38.5%;
        position: relative;
        margin-top: 15px;
    }

    .centerMainBox2 img {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .boxTitle2 {
        width: 100%;
        height: 10%;
        font-size: .6vw;
        text-align: center;
        line-height: 10%;
        margin-top: 1vw;
        color: #0efcff;
    }

    .boxLis {
        width: 70%;
        height: 1.5vw;
        margin-left: 3vw;
        margin-top: 1vw;
        border-bottom: .02vw solid rgb(40, 229, 233);
    }

    .boxLis>li {
        width: 4vw;
        height: 1.4vw;
        display: block;
        background: rgba(40, 229, 233, .5);
        margin-right: .5vw;
        color: #fff;
        line-height: 1.4vw;
        text-align: center;
        cursor: pointer;
    }

    .active {
        border-bottom: .02vw solid #040A18;
        border-top: .02vw solid rgb(40, 229, 233);
        border-right: .02vw solid rgb(40, 229, 233);
        border-left: .02vw solid rgb(40, 229, 233);
    }

    .contList {
        position: relative;
        width: 70%;
        height: 7vw;
        margin: 1vw auto 0;
    }

    .content1 li {
        display: none;
    }

    .baseBox {
        width: 100%;
        border: none;
        background: none;
    }

    .boxTitle {
        font-size: .8vw;
        width: 38%;
        margin-top: 1vw;
        text-align: center;
    }

    .right {
        float: right;
    }

    .baseBoxLeft {
        width: 30%;
        height: 95%;
        position: relative;
    }

    .baseBoxRight {
        width: 68%;
        height: 75%;
    }

    .baseBoxLeft img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .maps {
        width: 100%;
        height: 95%;
        margin-top: 2%;
        background: pink;
    }

    .baseBox1,
    .baseBox2,
    .baseBox3 {
        position: relative;
    }

    .baseBox1 img,
    .baseBox2 img,
    .baseBox3 img {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .csbaseBox1 {
        position: relative;
        z-index: 999;
    }</style>
<!-- 黄瑶 -->
<style>.liSpan {
        width: 100%;
        margin-top: 3.2%;
        text-align: center;
        color: rgb(40, 229, 233);
    }

    .liP {
        width: 66%;
        margin: .3vw auto 0;
        text-align: left;
        font-size: .5vw;
        color: rgb(40, 229, 233);
    }

    a:hover {
        text-decoration: none
    }

    .titleName {
        color: #0EFCFF;
    }

    /* 种植 */

    .plant {
        width: 90%;
        height: 5.5vw;
        margin: 2% auto 0;
        display: -webkit-flex;
        display: -moz-flex;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
    }

    .plant>li {
        width: 15%;
        height: 100%;
    }

    .jumps {
        width: 100%;
        height: 100%;
        background: rgba(0, 235, 255, .08);
        display: -webkit-flex;
        -webkit-flex-direction: column;
        -webkit-justify-content: space-between;
        display: -moz-flex;
        -moz-flex-direction: column;
        -moz-justify-content: space-between;
    }

    .jumps>div>img {
        width: .88vw;
        height: .88vw;
        float: right;
    }

    .jumps>p {
        width: 90%;
        font-size: 1.3vw;
        color: #fff;
        margin: auto;
    }

    .jumps>div {
        width: 90%;
        margin: 5% auto 0;
    }

    .jumps>div>span {
        font-size: .6vw;
        color: #0efcff;
        float: left;
    }

    .spans0 {
        width: 80%;
        height: 5%;
        background: #03DA8D;
    }

    .spans1 {
        width: 80%;
        height: 5%;
        background: #0efcff;
    }

    .spans2 {
        width: 80%;
        height: 5%;
        background: #FE0000;
    }

    .spans3 {
        width: 80%;
        height: 5%;
        background: #F78001;
    }

    .boxVideo {
        width: 100%;
        height: 100%;
    }

    .boxVideo video {
        width: 100%;
        height: 100%;
    }

    .baseDatas {
        width: 70%;
        height: 2vw;
        display: -webkit-flex;
        -webkit-justify-content: space-between;
        margin: 1vw 0 0 5vw;
    }

    .baseDatas li {
        width: 10%;
    }

    .baseDatas li a {
        color: #fff;
        font-size: .8vw;
    }

    .active2 a>span {
        color: rgb(40, 229, 233);
    }

    .baseDatas li a:hover>span {
        color: rgb(40, 229, 233);
    }

    .baseDatas li a:hover>.borderRight {
        border-left-color: rgb(40, 229, 233);
    }

    .tableDetalis {
        width: 92%;
        color: #fff;
        margin-left: 2vw;
    }

    .tableDetalis tr {
        height: 1.3vw;
        font-size: .8vw;
    }

    .tableDetalis tr>td {
        text-align: center;
    }

    .tableDetalis tr>td:nth-child(7) {
        text-align: right;
    }

    .borderRight {
        width: 0;
        height: 0;
        float: left;
        border: .4vw solid transparent;
        border-left-color: #fff;
        margin-top: .2vw;
    }

    .borderActive {
        border-left-color: rgb(40, 229, 233);
    }

    .equipment_table {
        width: 85%;
        height: 25%;
        margin: auto;
        text-align: center;
        color: #fff;
        font-size: .5vw;
    }

    .equipment_table tr:nth-child(1) {
        color: #0EFCFF;
    }

    .equipment_table tr {
        border: 1px solid#0EFCFF;
    }

    .equipment_table tr:nth-child(1) {
        font-size: .8vw;
    }

    .equipment_table img {
        width: 1vw;
    }

    .env_table {
        height: 35%;
        margin-top: 5%;
    }

    .env_table td {
        border: 1px solid#0EFCFF;
    }

    .env_table tr:nth-child(1) {
        background: rgba(14, 252, 255, .3);
    }

    .map img {
        width: 80%;
        margin-left: 10%;
    }

    .map img {
        width: 80%;
        margin-left: 10%;
    }

    .mapActived1 {
        position: absolute;
        top: 41.5%;
        left: 61%;
        width: 3.5vw;
        height: 5.5vw;
        border-radius: 90px;
        cursor: pointer;
    }

    .mapActived2 {
        position: absolute;
        top: 60%;
        right: 16%;
        width: 4.5vw;
        height: 2.5vw;
        cursor: pointer;
    }

    .mapActived3 {
        position: absolute;
        top: 57%;
        right: 9%;
        width: 2.5vw;
        height: 7vw;
        cursor: pointer;
    }

    .mapContent1 {
        position: absolute;
        height: 6vw;
        width: 8vw;
        left: 65%;
        top: 33%;
        background: rgba(255, 255, 255, .2);
    }

    .mapContent2 {
        position: absolute;
        height: 6vw;
        width: 8vw;
        left: 70%;
        top: 35%;
        background: rgba(255, 255, 255, .2);
        display: none;
    }

    .mapContent3 {
        position: absolute;
        height: 6vw;
        width: 8vw;
        right: 1%;
        top: 35%;
        background: rgba(255, 255, 255, .2);
        display: none;
    }

    .mapContentFont {
        width: 85%;
        margin-left: 12%;
        font-size: .6vw;
        color: #0efcff;
        letter-spacing: .05vw;
        margin-bottom: .3vw;
    }

    .mapContentFont:nth-child(1) {
        margin-top: .6vw;
    }

    .mapContentFont span {
        color: white;
    }

    /* lafite video样式 */

    .video-js {
        width: 100%;
        height: 100%;
    }

    .video-js:hover .vjs-big-play-button {
        background: none;
    }

    .video-js .vjs-big-play-button:hover {
        background: none;
    }

    .video-js .vjs-big-play-button {
        border: none;
        background: none;
    }</style>

<body>
    <div class="main">
        <div class="nav">茶园监控大数据指挥舱</div>
        <div class="nav_btn">
            <div class="btn_left">
                <a href="">
                    <div class="btn_list listActive">主页</div>
                </a>
                <a href="">
                    <div class="btn_list">XX流转</div>
                </a>
                <a href="">
                    <div class="btn_list">空天地</div>
                </a>
                <a href="">
                    <div class="btn_list">生长监测</div>
                </a>
            </div>
            <div class="btn_right">
                <a href="">
                    <div class="btn_list">生产加工</div>
                </a>
                <a href="">
                    <div class="btn_list">仓储管理</div>
                </a>
                <a href="">
                    <div class="btn_list">流通销售</div>
                </a>
                <a href="">
                    <div class="btn_list">数据中心</div>
                </a>
            </div>
        </div>
        <div class="content">
            <div class="centerBox">
                <div class="baseBox centerMainBox1" style="height:70%">
                    <div class="baseBoxLeft left">
                        <div class="boxTitle">气象数据监测</div>
                        <img src="./img/left.png" alt="">
                        <table class="equipment_table env_table">
                            <tr>
                                <td>指标</td>
                                <td>标准值</td>
                                <td>当前值</td>
                                <td>预警</td>
                            </tr>
                            <tr>
                                <td>温度</td>
                                <td>18～20℃</td>
                                <td>9℃</td>
                                <td>正常</td>
                            </tr>
                            <tr>
                                <td>湿度</td>
                                <td>40%～60%</td>
                                <td>52%</td>
                                <td>正常</td>
                            </tr>
                            <tr>
                                <td>风速</td>
                                <td>0m/s~4m/s</td>
                                <td>2m/s</td>
                                <td>正常</td>
                            </tr>
                            <tr>
                                <td>降水</td>
                                <td>2mm~4mm</td>
                                <td>0mm</td>
                                <td style="color:red">偏低</td>
                            </tr>
                        </table>
                        <div style="width:95%;height:50%;margin-left:2.5%" id="wind"></div>
                    </div>
                    <div class="baseBoxRight right">
                        <ul class="plant">
                            <li>
                                <a class="jumps" href="">
                                    <div>
                                        <span>茶园种植面积(亩)</span>
                                        <img src="./img/qqzmj.png" alt="">
                                    </div>
                                    <p class="">350000</p>
                                    <span class="spans3"></span>
                                </a>
                            </li>
                            <li>
                                <a class="jumps" href="">
                                    <div>
                                        <span>产值(亿元)</span>
                                        <img src="./img/ccc2.png" alt="">
                                    </div>
                                    <p class="">180</p>
                                    <span class="spans2" style="background: #499BFF;"></span>
                                </a>
                            </li>
                            <li>
                                <a class="jumps" href="">
                                    <div>
                                        <span>产量(吨)</span>
                                        <img src="./img/ccc.png" alt="">
                                    </div>
                                    <p class="">82000</p>
                                    <span class="spans3" style="background: #F2CE43;"></span>
                                </a>
                            </li>
                            <li>
                                <a class="jumps" href="">
                                    <div class="clear plantTop ">
                                        <span class="flexLeft">茶园(个)</span>
                                        <img class="flexright" src="./img/cy.png" alt="">
                                    </div>

                                    <p class=" plantNum1">3207</p>
                                    <span class="spans0"></span>
                                </a>
                            </li>
                            <li>
                                <a class="jumps" href="">
                                    <div class="clear plantTop ">
                                        <span class="flexLeft">茶企(个)</span>
                                        <img class="flexright" src="./img/cq.png" alt="">
                                    </div>
                                    <p class=" plantNum1">157</p>
                                    <span class="spans1"></span>
                                </a>
                            </li>
                            <li>
                                <a class="jumps" href="">
                                    <div>
                                        <span>茶农(人)</span>
                                        <img src="./img/cn.png" alt="">
                                    </div>
                                    <p class="">360000</p>
                                    <span class="spans2"></span>
                                </a>
                            </li>

                        </ul>
                        <!-- 地图 -->
                        <div class="map">
                            <img class="mapImg" src="./img/map1.png">
                            <div class="mapContent1">
                                <div class="mapContentFont">田庄乡</div>
                                <div class="mapContentFont">
                                    茶园:<span>101</span>
                                </div>
                                <div class="mapContentFont">
                                    茶企:<span>10</span>
                                </div>
                                <div class="mapContentFont">
                                    茶农:<span>18371</span>
                                </div>
                            </div>
                            <a class="mapActived1" href=""></a>
                            <!-- <div class="mapContent2">
                                <div class="mapContentFont">田庄乡</div>
                                <div class="mapContentFont">
                                    茶园:<span>126</span>
                                </div>
                                <div class="mapContentFont">
                                    茶企:<span>566</span>
                                </div>
                                <div class="mapContentFont">
                                    茶农:<span>999</span>
                                </div>
                            </div> -->
                            <a class="mapActived2" href=""></a>
                            <!-- <div class="mapContent3">
                                <div class="mapContentFont">田庄乡</div>
                                <div class="mapContentFont">
                                    茶园:<span>126</span>
                                </div>
                                <div class="mapContentFont">
                                    茶企:<span>566</span>
                                </div>
                                <div class="mapContentFont">
                                    茶农:<span>999</span>
                                </div>
                            </div> -->
                            <a class="mapActived3" href=""></a>
                        </div>
                    </div>
                </div>

                <div class="baseBox centerMainBox2" style="height:30%;">
                    <img src="./img/down.png" alt="">
                    <div class="boxTitle2" style="width:26%">统计数据</div>
                    <div class="csbaseBox1">
                        <ul class="baseDatas">
                            <li class="left ">
                                <a href="">
                                    <div class="borderRight "></div>
                                    <span>茶园统计</span>
                                </a>
                            </li>
                            <li class="left">
                                <a href="">
                                    <div class="borderRight "></div>
                                    <span>茶企统计</span>
                                </a>
                            </li>
                            <li class="left">
                                <a href="">
                                    <div class="borderRight "></div>
                                    <span>茶农统计</span>
                                </a>
                            </li>
                        </ul>

                        <table class="tableDetalis">
                            <tr>
                                <td>名称</td>
                                <td>类型</td>
                                <td>面积</td>
                                <td>名称</td>
                                <td>类型</td>
                                <td>面积</td>
                                <td>姓名  </td>
                                <td>品种</td>
                                <td>面积</td>
                            </tr>
                            <tr>
                                <td>青云观茶园</td>
                                <td>企业</td>
                                <td>1800亩</td>
                                <td>如需商用，请联系qq:863512936</td>
                                <td>私营</td>
                                <td>3283亩</td>
                                <td>刘新武</td>
                                <td>云台大叶</td>
                                <td>10亩</td>
                            </tr>
                            <tr>
                                <td>彩云谷茶园 </td>
                                <td>企业</td>
                                <td>380亩</td>
                                <td>如需商用，请联系qq:863512936</td>
                                <td>私营</td>
                                <td>6200亩</td>
                                <td>张方</td>
                                <td>碧香早</td>
                                <td>15亩</td>
                            </tr>
                            <tr>
                                <td>赵家坪茶园</td>
                                <td>合作社</td>
                                <td>510亩</td>
                                <td>如需商用，请联系qq:863512936</td>
                                <td>私营</td>
                                <td>5800亩</td>
                                <td>李小维</td>
                                <td>槠叶齐</td>
                                <td>12亩</td>
                            </tr>
                            <tr>
                                <td>马路口茶园</td>
                                <td>个人</td>
                                <td>17亩</td>
                                <td>如需商用，请联系qq:863512936</td>
                                <td>私营</td>
                                <td>30000亩</td>
                                <td>王骁骁</td>
                                <td>黄金茶</td>
                                <td>11亩</td>
                            </tr>
                        </table>

                    </div>
                </div>
            </div>
            <div class="leftBox right" style="width:22%">
                <div class="baseBox baseBox1" style="margin-bottom:15px;height:40%">
                    <img src="./img/right.png" alt="">
                    <div class="csbaseBox1">
                        <div class="boxTitle">视频监控设备</div>
                        <ul class="boxLis">
                            <li class="left active">茶园监控</li>
                            <li class="left">生产车间监控</li>
                            <li class="left">仓储监控</li>
                        </ul>
                        <div class="content1">
                            <ul>
                                <li style="display: block;" class="contList">
                                    <!-- 四个角描边 stat -->
                                    <div class="leftTopLine1"></div>
                                    <div class="leftTopLine2"></div>
                                    <div class="rightTopLine1"></div>
                                    <div class="rightTopLine2"></div>
                                    <div class="leftBottomLine1"></div>
                                    <div class="leftBottomLine2"></div>
                                    <div class="rightBottomLine1"></div>
                                    <div class="rightBottomLine2"></div>

                                    <div class="boxVideo">
                                        <video class="video-js vjs-big-play-centered" data-setup='{}' controls>
                                            <source src="http://hls01open.ys7.com/openlive/ea2001c1aec344d1ac45d8b0bbc74e87.m3u8" type="application/x-mpegURL">
                                        </video>
                                    </div>
                                </li>
                                <li class="contList">
                                    <!-- 四个角描边 stat -->
                                    <div class="leftTopLine1"></div>
                                    <div class="leftTopLine2"></div>
                                    <div class="rightTopLine1"></div>
                                    <div class="rightTopLine2"></div>
                                    <div class="leftBottomLine1"></div>
                                    <div class="leftBottomLine2"></div>
                                    <div class="rightBottomLine1"></div>
                                    <div class="rightBottomLine2"></div>

                                    <div class="boxVideo">
                                        <video class="video-js vjs-big-play-centered" data-setup='{}' controls>
                                            <source src="http://hls01open.ys7.com/openlive/cf40f99cc9cb4a23bd52e0b2119b534c.m3u8" type="application/x-mpegURL">
                                        </video>
                                    </div>
                                </li>
                                <li class="contList">
                                    <!-- 四个角描边 stat -->
                                    <div class="leftTopLine1"></div>
                                    <div class="leftTopLine2"></div>
                                    <div class="rightTopLine1"></div>
                                    <div class="rightTopLine2"></div>
                                    <div class="leftBottomLine1"></div>
                                    <div class="leftBottomLine2"></div>
                                    <div class="rightBottomLine1"></div>
                                    <div class="rightBottomLine2"></div>

                                    <div class="boxVideo">
                                        <video src="http://nongji-img.weixinpu.com.cn:52001/app2/img-upload/8588844e-2d14-4ecd-ad4d-90e4699e00d220191028102321.mp4" controls="controls">
                                            your browser does not support the video tag
                                        </video>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="liSpan">介绍</div>
                        <p class="liP">茶园环境远程监控物联网系统能够支持以网站,浏览器,视频等客户端访问方式提供远程监测与控制管理</p>
                    </div>
                </div>
                <div class="baseBox baseBox2" style="margin-bottom:15px;height:29.5%">
                    <img src="./img/right2.png" alt="">
                    <!-- 四个角描边 end -->
                    <div class="boxTitle2">种植品种分析</div>
                    <div class="boxRader" id="Progress"></div>
                </div>
                <div class="baseBox baseBox3" style="height:28.9%">
                    <img src="./img/right3.png" alt="">
                    <!-- 四个角描边 end -->
                    <div class="boxTitle2">茶叶销量分析</div>
                    <div class="boxRader" id="mains"></div>
                </div>

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

</html>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/dataScoll.js"></script>
<script>// 地图hover事件
    function HoverFn() {
        $('.mapActived1').hover(function() {
            $(".mapImg").attr("src", "./img/map1.png");
            $(".mapContent1,.mapContent2,.mapContent3").hide();
            $(".mapContent1").slideDown(500);
        }, function() {

        });
        // $('.mapActived2').hover(function () {
        //     $(".mapImg").attr("src", "./img/map2.png");
        //     $(".mapContent1,.mapContent2,.mapContent3").hide();
        //     $(".mapContent2").slideDown(500);
        // }, function () {
        // });
        // $('.mapActived3').hover(function () {
        //     $(".mapImg").attr("src", "./img/map3.png");
        //     $(".mapContent1,.mapContent2,.mapContent3").hide();
        //     $(".mapContent3").slideDown(500);
        // }, function () {
        // });
    }
    HoverFn()</script>
<script>$('.boxLis').on('mouseenter', 'li', function() {

        var that = $(this);

        that.addClass('active').siblings().removeClass('active');

        $('.content1 .contList').hide();

        console.log($('.content1 li'))

        $('.content1 .contList').eq(that.index()).show()


    })</script>
<script>var HYChart1 = echarts.init(document.getElementById('wind'));
    var HYChart2 = echarts.init(document.getElementById('Progress'));
    var HYChart3 = echarts.init(document.getElementById('mains'));
    /**
     * times:YYYY-mm-dd HHMMSS
     * timeData:时间
     * windsData:风速
     * windxData:风向/等级
     * temData:温度
     * ,rainData:降水
     * humData:湿度
     */
    let Data = {
        times: ["2019-10-28 11:00:00", "2019-10-28 12:00:00", "2019-10-28 13:00:00", "2019-10-28 14:00:00", "2019-10-28 15:00:00", "2019-10-28 16:00:00", "2019-10-28 17:00:00", "2019-10-28 18:00:00", "2019-10-28 19:00:00", "2019-10-28 20:00:00", "2019-10-28 21:00:00", "2019-10-28 22:00:00"],
        timeData: ["08/00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11"],
        windxData: ["东南", "北", "东南", "东", "东南", "东南", "西", "北", "南", "东南", "东南", "东南"],
        windsData: ["2.8/2", "1.4/1", "2.7/2", "3/2", "2.2/2", "1.4/1", "1.5/1", "1.9/2", "1.4/1", "1.8/2", "2/2", "3.4/3"],
        temData: [9, 11, 13, 12, 11, 9, 9, 7, 6, 4, 3, 3],
        rainData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        humData: [76, 76, 70, 62, 58, 53, 50, 49, 46, 44, 44, 42],
    }

    function windDen(wind) {
        switch (wind) {
            case '北':
                return 'n';
            case '东北':
                return 'ne';
            case '东':
                return 'e';
            case '东南':
                return 'se';
            case '南':
                return 's';
            case '西南':
                return 'sw';
            case '西':
                return 'w';
            case '西北':
                return 'nw';
            default:
                return ''
        }
    }

    let colors = ['#FF6863', '#6EAB40', '#3BB5F5'];

    option = {
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: function(params, ticket,) {
                let index = params[0].dataIndex;
                let Htm = `${Data.times[index]}<br>
                    温度:${Data.temData[index]}℃<br>
                    降水:${Data.rainData[index]}mm<br>
                    风力:${Data.windsData[index].split('/')[0]}m/s ${Data.windsData[index].split('/')[1]}级风 ${Data.windxData[index]}<br>
                    湿度:${Data.humData[index]}%`
                return Htm;
            }
        },
        grid: {
            top: '17%',
            bottom: '30%',
            left: '25%',
            right: '10%'
        },
        dataZoom: {
            bottom: '14%',
            height: '30',
            dataBackground: {
                lineStyle: {
                    color: '#39977D'
                },
                areaStyle: {
                    color: 'rgba(57,151,125,1)'
                }
            },
            borderColor: 'rgba(57,151,125,0)',
            textStyle: {
                color: '#39977D'
            },
            start: 0,
            end: 100,
            xAxisIndex: [0, 1, 2, 3]
        },
        xAxis: [{
                name: '风力等级',
                type: 'category',
                position: 'bottom',
                offset: 8,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                        backgroundColor: 'transparent',
                        lineHeight: 20,
                        padding: [3, 3]
                    },
                    interval: 0
                },
                nameTextStyle: {
                    color: '#585858',
                    padding: [0, 0, -53]
                },
                nameLocation: 'start',
                data: Data.windsData
            },
            {
                name: '风向',
                type: 'category',
                position: 'bottom',
                offset: 40,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                        lineHeight: 20
                    },
                    interval: 0,
                    formatter: (value) => {
                        return '{' + windDen(value) + '| }' + value + '';
                    },
                    rich: {
                        value: {
                            lineHeight: 16,
                            align: 'left'
                        },
                        n: {
                            height: 16,
                            align: 'left',
                            backgroundColor: {
                                image: `asset/get/s/data-1567915257914-d2XE-l1Xe.png`
                            }
                        },
                        ne: {
                            height: 16,
                            align: 'left',
                            backgroundColor: {
                                image: `asset/get/s/data-1567915419689-EqosRMRlP.png`
                            }
                        },
                        e: {
                            height: 16,
                            align: 'left',
                            backgroundColor: {
                                image: `asset/get/s/data-1567915374565-sE5G5rXU6.png`
                            }
                        },
                        se: {
                            height: 16,
                            align: 'left',
                            backgroundColor: {
                                image: `asset/get/s/data-1567915457742-e5gWU0sT0.png`
                            }
                        },
                        s: {
                            height: 16,
                            align: 'left',
                            backgroundColor: {
                                image: `asset/get/s/data-1567915473589-TN5oJTIdv.png`
                            }
                        },
                        sw: {
                            height: 16,
                            align: 'left',
                            backgroundColor: {
                                image: `asset/get/s/data-1567915498319-h9PscokI2.png`
                            }
                        },
                        w: {
                            height: 16,
                            align: 'left',
                            backgroundColor: {
                                image: `asset/get/s/data-1567915523655-sI1HtlidH.png`
                            }
                        },
                        nw: {
                            height: 16,
                            align: 'left',
                            backgroundColor: {
                                image: `asset/get/s/data-1567915566043-E6t1OVpNh.png`
                            }
                        }
                    }
                },
                nameTextStyle: {
                    color: '#585858',
                    padding: [0, 0, -38]
                },
                nameLocation: 'start',
                data: Data.windxData
            },
            {
                type: 'category',
                axisLine: {
                    show: false
                },
            },
            {
                type: 'category',
                position: 'bottom',
                offset: 80,
                axisTick: {
                    alignWithLabel: true,
                    textStyle: {
                        color: '#707070'
                    }
                },
                data: Data.timeData
            }
        ],
        yAxis: [{
                type: 'value',
                name: '温度(°C)',
                scale: true,
                position: 'left',
                offset: 54,
                axisTick: {
                    lineStyle: {
                        color: colors[0]
                    },
                    inside: true
                },
                nameTextStyle: {
                    color: colors[0]
                },
                axisLabel: {
                    color: colors[0]
                },
                splitLine: {
                    show: false
                }
            },
            {
                type: 'value',
                name: '降水(mm)',
                position: 'left',
                axisTick: {
                    lineStyle: {
                        color: colors[1]
                    },
                    inside: true
                },
                nameTextStyle: {
                    color: colors[1]
                },
                axisLabel: {
                    color: colors[1]
                },
                splitLine: {
                    show: false
                }
            },
            {
                type: 'value',
                name: '相对湿度(%)',
                scale: true,
                position: 'right',
                axisTick: {
                    lineStyle: {
                        color: colors[2]
                    },
                    inside: true
                },
                nameTextStyle: {
                    color: colors[2]
                },
                axisLabel: {
                    color: colors[2]
                },
                splitLine: {
                    show: false
                }
            }
        ],
        series: [{
                name: '温度',
                type: 'line',
                step: false,
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: Data.temData
            },
            {
                name: '降水',
                type: 'bar',
                yAxisIndex: 1,
                color: '#bee6b2',
                barWidth: '50%',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: Data.rainData
            },
            {
                name: '相对湿度',
                type: 'line',
                step: false,
                yAxisIndex: 2,
                color: colors[2],
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: Data.humData
            }
        ]
    };

    // 进度条
    var baifenbi = [63000, 153210, 37210, 43780].reverse();
    var grayBar = [1, 1, 1, 1, ];
    var zongjine = [500, 500, 500, 500];
    var xingm = ['云台大叶', '槠叶齐', '碧香早', '黄金茶'].reverse();
    // console.log(xingm.reverse())
    option2 = {

        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '30%',
            right: '5%',
            top: '0%',
            bottom: '0%',
        },
        backgroundColor: 'transparent',
        xAxis: [{
                show: false,
            },
            //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
            {
                show: false,
            }
        ],
        yAxis: {
            type: 'category',
            axisLabel: {
                show: false, //让Y轴数据不显示
            },
            itemStyle: {

            },
            axisTick: {
                show: false, //隐藏Y轴刻度
            },
            axisLine: {
                show: false, //隐藏Y轴线段
            },
            data: xingm,
        },
        series: [
            //背景色--------------------我是分割线君------------------------------//

            {
                show: true,
                type: 'bar',
                barGap: '-100%',
                barWidth: '40%', //统计条宽度 
                itemStyle: {
                    normal: {
                        color: '#3B4254'
                    },
                },
                z: 1,
                // data: grayBar,
            },
            //蓝条--------------------我是分割线君------------------------------//
            {
                show: true,
                type: 'bar',
                barGap: '-100%',
                barWidth: '40%', //统计条宽度
                itemStyle: {
                    color: function(params) {
                        var colorList = ['#0EFCFF', '#1AC5CC', '#288E9A', '#FA8100', '#C06F18'].reverse();
                        return colorList[params.dataIndex]
                    },
                },
                max: 1,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff', //百分比颜色
                            fontSize: 8
                        },
                        position: 'right',
                        //百分比格式
                        formatter: function(data) {
                            return (baifenbi[data.dataIndex]);
                        },
                    }
                },
                labelLine: {
                    show: false,
                },
                z: 2,
                data: baifenbi,
            },
            //数据条--------------------我是分割线君------------------------------//
            {
                show: true,
                type: 'bar',
                xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
                barGap: '-100%',
                barWidth: '40%', //统计条宽度
                itemStyle: {
                    normal: {
                        barBorderRadius: 200,
                        color: 'transparent'
                    },
                },
                label: {
                    normal: {
                        show: true,
                        //label 的position位置可以是top bottom left,right,也可以是固定值
                        //在这里需要上下统一对齐,所以用固定值
                        position: ["-38%", '5%'],
                        rich: { //富文本
                            color: { //自定义颜色
                                color: '#1BC5CC',
                                fontSize: 12
                            },
                            value: xingm,
                            start1: {},

                        },
                        formatter: function(data) {
                            //富文本固定格式{colorName|这里填你想要写的内容}
                            return '{start1|}{color|' + xingm[data.dataIndex] + '}'

                        },
                    }
                },
                data: zongjine
            }

        ]
    };

    option3 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            x: 'center',
            data: ['销售', '销售额'],
            textStyle: {
                color: "#fff",
                fontSize: 12
            },
            itemWidth: 8,
            itemHeight: 8,
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            data: ['2015', '2016', '2017', '2018', '2019'],
            axisLabel: {
                textStyle: {
                    color: 'rgba(255,255,255,.2)',
                    // opacity: 0.1,
                }
            },
            "axisTick": { //y轴刻度线
                "show": false
            },
            "axisLine": { //y轴
                "show": false,
            },
        }],
        yAxis: [{
                type: 'value',
                scale: true,
                name: "销量(吨)",
                nameTextStyle: {
                    color: 'rgba(255,255,255,.2)',
                },
                max: 100000,
                min: 0,
                boundaryGap: [0.2, 0.2],
                "axisTick": { //y轴刻度线
                    "show": false
                },
                "axisLine": { //y轴
                    "show": false,
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.2)',
                        // opacity: 0.1,
                    }
                },
                splitLine: { //决定是否显示坐标中网格
                    show: true,
                    lineStyle: {
                        color: ['#fff'],
                        opacity: 0.2
                    }
                },
            },
            {
                type: 'value',
                scale: true,
                name: "销量额(万元)",
                nameTextStyle: {
                    color: 'rgba(255,255,255,.2)',
                },
                max: 600000,
                min: 0,
                boundaryGap: [0.2, 0.2],
                "axisTick": { //y轴刻度线
                    "show": false
                },
                "axisLine": { //y轴
                    "show": false,
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.2)',
                        // opacity: 0.1,
                    }
                },
                splitLine: { //决定是否显示坐标中网格
                    show: false,
                    lineStyle: {
                        color: ['#fff'],
                        opacity: 0.2
                    }
                },

            }
        ],
        color: ['#0efcff', '#F45E23'],
        grid: {
            left: '3%',
            right: '4%',
            top: '25%',
            bottom: '5%',
            containLabel: true
        },
        series: [{
                name: '销售',
                type: 'bar',
                data: [47800, 55000, 63580, 70000, 82000],
            },
            {
                name: '销售额',
                type: 'bar',
                data: [28680, 33000, 38148, 45500, 53300],
            }
        ]
    };

    HYChart1.setOption(option)
    HYChart2.setOption(option2)
    HYChart3.setOption(option3)

    setInterval(function() {
        numInit();
        HYChart1.clear();
        HYChart2.clear();
        HYChart3.clear();

        HYChart1.setOption(option);
        HYChart2.setOption(option2);
        HYChart3.setOption(option3);

    }, 7000)</script>

2.CSS

img {
    border: 0 none;
    vertical-align: top;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

strong,
em,
i {
    font-style: normal;
    font-weight: normal;
}

ins {
    text-decoration: underline;
}

del {
    text-decoration: line-through;
}

mark {
    background: none;
}

input::-ms-clear {
    display: none !important;
}

body {
    font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif;
    background: #fff;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    text-decoration: underline;
}

body,
html,
.main {
    width: 100%;
    height: 100%
}

.main {
    position: relative;
    background: url(../img/bg.jpg) no-repeat;
    background-size: cover;
}

.nav {
    position: relative;
    top: .5vw;
    width: 100%;
    height: 5vw;
    background: url(../img/top.png) no-repeat;
    background-size: 100%;
    text-align: center;
    line-height: 4vw;
    color: #0efcff;
    font-size: 1.4vw;
    letter-spacing: .4vw;
}

.nav_btn {
    position: absolute;
    top: 1.5vw;
    width: 100%;
    height: 2vw;
}

.btn_left {
    float: left;
    width: 25%;
    margin-left: 5%;
    height: 100%;
}

.btn_right {
    float: right;
    width: 25%;
    margin-right: 5%;
    height: 100%;
}

.btn_list {
    position: relative;
    float: left;
    width: 5.5vw;
    height: 1.6vw;
    text-align: center;
    line-height: 1.6vw;
    font-size: .9vw;
    color: #0efcff;
    letter-spacing: .1vw;
    cursor: pointer;
}

.btn_left a,
.btn_right a {
    display: inline-block;
}

.btn_left a:nth-child(2) {
    margin: 0 .6vw;
}

.btn_left a:nth-child(4) {
    margin-left: .6vw;
}

.btn_right a:nth-child(2) {
    margin: 0 .6vw;
}

.btn_right a:nth-child(4) {
    margin-left: .6vw;
}

.btn_list:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #6176AF;
    transform: skewX(-38deg);
}

.btn_list:hover::before {
    border-color: #0efcff;
    box-shadow: 1px 1px 3px 1px #0efcff inset;
}

.listActive:before {
    border-color: #0efcff;
    box-shadow: 1px 1px 3px 1px #0efcff inset;
}

.content {
    position: relative;
    width: 97%;
    height: 87%;
    margin: auto;
    /* background: white; */
}

.baseBox {
    position: relative;
    float: left;
    width: 48.8%;
    height: 32.3%;
    border: 1px solid #6176AF;
    background: rgba(11, 21, 44, 0.60);
    border-radius: 5px;
}

.baseHeightBox {
    height: 100%;
}

.baseCenterBox {
    margin: 1.5% 0;
}

.leftBox {
    float: left;
    height: 100%;
    width: 34.5%;
    /* background: yellow; */
}

.rightBox {
    float: left;
    height: 100%;
    width: 34.5%;
}

3.JavaScript

// 数字滚动
 function numInit() {
     $('.counter-value').each(function() {
         $(this).prop('Counter', 0).animate({
             Counter: $(this).text()
         }, {
             duration: 2500,
             easing: 'swing',
             step: function(now) {
                 $(this).text(now.toFixed(0));
             }
         });
     });
 }

 function numInit1() {
     $('.counter-value1').each(function() {
         $(this).prop('Counter', 0).animate({
             Counter: $(this).text()
         }, {
             duration: 2500,
             easing: 'swing',
             step: function(now) {
                 $(this).text(now.toFixed(1));
             }
         });
     });
 }

 function numInit2() {
     $('.counter-value2').each(function() {
         $(this).prop('Counter', 0).animate({
             Counter: $(this).text()
         }, {
             duration: 2500,
             easing: 'swing',
             step: function(now) {
                 $(this).text(now.toFixed(2));
             }
         });
     });
 }
 numInit();
 numInit1();
 numInit2();