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="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>


    <script>
        $(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(var i = 01; i < 13; i++) {
        				$("&.........完整代码请登录后点击上方下载按钮下载查看