echarts实现带数据过滤选项的柱状图访客数据统计图表效果代码-html代码-BFW代码库

echarts实现带数据过滤选项的柱状图访客数据统计图表效果代码

代码语言：html

所属分类：图表

代码描述：echarts实现带数据过滤选项的柱状图访客数据统计图表效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.1.1.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>
    <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="Visito.........完整代码请登录后点击上方下载按钮下载查看