<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery按年月柱状图表代码 - 更多源码【www.96flw.com】</title>
<script src="js/jquery.min.js"></script>
<script src="js/echarts-en.common.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>
/*
* author:青鸟爱吃鱼
* data:2020/04/03
* 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(var i = 01; i < 13; i++) {
$("<li value='" + i + "'><a href='javascript:void(0)'>" + i + "</a></li>").appendTo($("#" + type + "Month"));
}
$("." + type + "Box li").click(function() {
var thisPersonID = $(this).parent().attr("id")
if(thisPersonID == type + "Year") {
$("#" + type + "SearchYear").html($(this).val());
$("." + type + "SearchMonth").addClass("changeNone");
} else {
$("." + type + "SearchMonth").removeClass("changeNone");
$("#" + type + "SearchMonth").html($(this).val())
}
$(this).parent().hide();
debugger;
if(type == "Visitor-") {
VisitorData();
return;
} else {
EmploreeData();
return;
}
})
}
// 鼠标移入移出事件
function MouseHover() {
$('.selectBox a').hover(function() {
$(this).next().toggle();
}, function() {
$(this).next().hide();
});
$('.selectBox ul').hover(function() {
$(this).toggle();
}, function() {
$(this).hide();
});
}
/**
* 获取当年当月多少天
*/
function getday(year, month) {
var day = new Date(year, month, 0);
var daycount = day.getDate();
return daycount;
}
function VisitorData() {
var myChart = echarts.init(document.getElementById('visitor-data'));
var day = new Array();
var dayval = 0;
var SearchMonthVal = $("#Visitor-SearchMonth").parent().attr("class");
if(SearchMonthVal.indexOf("changeNone") > -1) {
dayval = 12;
} else {
dayval = getday($("#Visitor-SearchYear").html(), $("#Visitor-SearchMonth").html());
}
for(var i = 0; i < dayval; i++) {
day[i] = i + 1;
}
option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['进入', '签离', '逾期']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: day
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '进入',
type: 'bar',
stack: 'person',
data: day
},
{
name: '签离',
type: 'bar',
stack: 'person',
data: day
},
{
name: '逾期',
type: 'bar',
stack: 'person',
data: day
}
]
};
myChart.setOption(option);
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>