echart年月过滤显示结果-html代码-BFW代码库

echart年月过滤显示结果

代码语言：html

所属分类：图表

代码描述：echart年月过滤显示结果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Echarts年月搜索</title>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/echarts.js"></script>

    <style>
        .visitor-company {
            width: auto;
            height: 300px;
        }

        .visitor-data {
            width: auto;
            height: 300px;
        }
        /*显示的具体的日期*/

        .select-box {
            float: right;
        }

        .Search {
            float: left;
        }

        .selectBox {
            float: left;
            margin-left: 7px;
            width: 100px;
        }

        .selectBox a i {
            padding-left: 8px;
        }
        /*搜索的内容*/

        .selectBox a {
            text-decoration: none;
            font-size: 14px;
            color: #2f353b;
        }

        .selectBox .but {
            padding: 3px;
            padding-left: 10px;
            padding-right: 10px;
            border: solid 1px #2f353b;
            border-radius: 14px;
        }

        .selectBox ul {
            list-style: none;
            display: none;
            width: 80px;
            margin-top: 4px;
            box-shadow: 3px 3px 3px 3px #888888;
            padding-left: 3px;
            margin-left: 6px;
            background-color: #ffffff;
            border-radius: 3px;
            position: absolute;
            z-index: 10;
        }
        /*鼠标移动事件*/

        .selectBox .but:hover {
            background: #ddd;
        }

        .selectBox li:hover {
            background: #ddd;
        }

        .changeNone {
            display: none;
        }
    </style>
</head>
<body style="width: 70%">
    <h4 class="header-title mb-3 echarts-title">
        访客 数据统计
        <div class="select-box">
            <div class="Search">
                <samp id="Visitor-SearchYear"></samp>年
                <span class="Visitor-SearchMonth"><samp id="Visitor-SearchMonth"></samp>月</span>
            </div>
            <div class="selectBox Visitor-Box">
                <a href="javascript:void(0)" class="but" id="Visitor-ButYear">按年过滤<i class="fa fa-caret-down"></i></a>
                <ul id="Visitor-Year"></ul>
            </div>
            <div class="selectBox Visitor-Box">
                <a href="javascript:void(0)" class="but" id="Visitor-ButMonth">按月过滤<i class="fa fa-caret-down"></i></a>
                <ul id="Visitor-Month"></ul>
            </div>
        </div>
    </h4>
    <div id="visitor-data" class="visitor-data"></div>
</body>
<script>
    /*
		 * function:为Echarts 图搜索时间日期
		 * */
    $(function() {
        VisitorData();
        SerrchEcharts();
    })

    function SerrchEcharts() {
        Search("Visitor-");
        MouseHover();
    }
    /*type：可以为多个不同的Echarts图*/
    function Search(type) {
        /*初始化数据 */
        var myDate = new Date();
        var year = myDate.getFullYear(); //获取当前年
        var month = myDate.getMonth() + 1; //获取当前月
        $("#" + type + "SearchYear").html(year);
        $("#" + type + "SearchMonth").html(month);

        //循环当前年
        for (var i = 0; i < 5; i++) {
            $("<li value='" + (year - i) + "'><a href='javascript:void(0)'>" + (year - i) + "</a></li>").appendTo($("#" + type + "Year"));
        }
        //循环当前月
        for .........完整代码请登录后点击上方下载按钮下载查看