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.........完整代码请登录后点击上方下载按钮下载查看