jQuery按年月柱状图表特效代码下载


jQuery按年月柱状图表特效代码下载
jQuery按年月柱状图表特效代码下载以及按年月柱状图表等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/echarts-en.common.js"></script>

2. HTML代码

<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';">
</div>

相关推荐

发表评论

相关文章