odd_job/app/agent/view/home/console.html

<div class="layui-fluid">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header">数据统计</div>
				<div class="layui-card-body">
					<div class="layui-carousel layadmin-carousel layadmin-backlog">
						<div carousel-item>
							<ul class="layui-row layui-col-space10">
								<li class="layui-col-xs3">
									<a href="javascript:;" class="layadmin-backlog-body">
										<h3>今日新增用户</h3>
										<p><cite>{$tuserCount}</cite></p>
									</a>
								</li>
								<li class="layui-col-xs3">
									<a href="javascript:;" class="layadmin-backlog-body">
										<h3>昨日新增用户</h3>
										<p><cite>{$yuserCount}</cite></p>
									</a>
								</li>
								<li class="layui-col-xs3">
									<a href="javascript:;" class="layadmin-backlog-body">
										<h3>累计用户</h3>
										<p><cite>{$userCount}</cite></p>
									</a>
								</li>
								<li class="layui-col-xs3">
									<a href="javascript:;" class="layadmin-backlog-body">
										<h3>累计报备</h3>
										<p><cite>{$entryCount}</cite></p>
									</a>
								</li>
								<li class="layui-col-xs3">
									<a href="javascript:;" class="layadmin-backlog-body">
										<h3>职业顾问</h3>
										<p><cite>{$brolerCount}</cite></p>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header">数据概览</div>
				<div class="layui-card-body">

					<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
						<div carousel-item id="LAY-index-dataview">
							<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
			</div>

		</div>



	</div>
</div>

<script>
	layui.config({
		base: '/static/echoui/' //静态资源所在路径
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'admin', 'carousel', 'echarts'], function() {
		var $ = layui.$,
			admin = layui.admin,
			carousel = layui.carousel,
			element = layui.element,
			echarts = layui.echarts,
			device = layui.device();
		//轮播切换
		$('.layadmin-carousel').each(function() {
			var othis = $(this);
			carousel.render({
				elem: this,
				width: '100%',
				arrow: 'none',
				interval: othis.data('interval'),
				autoplay: othis.data('autoplay') === true,
				trigger: (device.ios || device.android) ? 'click' : 'hover',
				anim: othis.data('anim')
			});
		});
		element.render('progress');





		var echartsApp = [],
			options = [
				//最近一周报备趋势
				{
					title: {
						text: '最近一月报备趋势',
						x: 'center',
						textStyle: {
							fontSize: 14
						}
					},
					tooltip: { //提示框
						trigger: 'axis',
						formatter: "{b}<br>新增报备：{c}"
					},
					xAxis: [{ //X轴
						type: 'category',
						data: {$entrynamearr|raw|default="[]"}
					}],
					yAxis: [{ //Y轴
						type: 'value'
					}],
					series: [{ //内容
						type: 'line',
						data: {$entryvaluearr|raw|default="[]"}
					}]
				},

				//报备信息分布
				{
					title: {
						text: '报备信息分布',
						x: 'center',
						textStyle: {
							fontSize: 14
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						x: 'left',
						data: {$entryfnamearr|raw|default="[]"}
					},
					series: [{
						name: '报备工厂',
						type: 'pie',
						radius: '55%',
						center: ['50%', '50%'],
						data: {$entryfvaluearr|raw|default="[]"}
					}]
				},

				//新增的用户量
				{
					title: {
						text: '最近一月新增的用户量',
						x: 'center',
						textStyle: {
							fontSize: 14
						}
					},
					tooltip: { //提示框
						trigger: 'axis',
						formatter: "{b}<br>新增用户：{c}"
					},
					xAxis: [{ //X轴
						type: 'category',
						data: {$usernamearr|raw|default="[]"}
					}],
					yAxis: [{ //Y轴
						type: 'value'
					}],
					series: [{ //内容
						type: 'line',
						data: {$uservaluearr|raw|default="[]"}
					}]
				}
			],
			elemDataView = $('#LAY-index-dataview').children('div'),
			renderDataView = function(index) {
				echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
				echartsApp[index].setOption(options[index]);
				//window.onresize = echartsApp[index].resize;
				admin.resize(function() {
					echartsApp[index].resize();
				});
			};
		//没找到DOM，终止执行
		if (!elemDataView[0]) return;
		renderDataView(0);

		//监听数据概览轮播
		var carouselIndex = 0;
		carousel.on('change(LAY-index-dataview)', function(obj) {
			renderDataView(carouselIndex = obj.index);
		});

		//监听侧边伸缩
		layui.admin.on('side', function() {
			setTimeout(function() {
				renderDataView(carouselIndex);
			}, 300);
		});

		//监听路由
		layui.admin.on('hash(tab)', function() {
			layui.router().path.join('') || renderDataView(carouselIndex);
		});

	});
</script>