caiping/app/admin/view/index/main_admin.html

{extend name="common/base"/}
{block name="style"}
<link rel="stylesheet" href="../../../../public/static/assets/icons/main-icon/iconfont.css">
<style type="text/css">
	.dashboard-num table {
		width: 100%;
	}

	.dashboard-num td {
		text-align: center;
		padding: 16px 0;
		width: 20%;
		border-left: 1px solid #f1f1f1;
		position: relative;
	}

	.dashboard-num td:nth-child(1) {
		border-left: none
	}

	.dashboard-num .num-title {
		padding-bottom: 10px;
		color: #999;
	}

	.dashboard-num .blue {
		font-size: 20px;
		font-weight: 300;
	}

	.dashboard-num td .badge {
		position: absolute;
		top: 0;
		right: 0;
	}

	.dashboard-num td .badge span {
		padding: 2px 4px;
		font-size: 12px;
		border-radius: 0 0 0 4px;
	}

	.dashboard-total td {
		border-top: 1px solid #f1f1f1
	}

	.dashboard-logs .layui-timeline-item {
		padding-bottom: 1px;
	}

	.info-td {
		width: 90px;
		text-align: right;
		background-color: #fafafa;
		color: #999;
		padding: 5px 3px;
	}

	.info-td {
		width: 90px;
		text-align: right;
		background-color: #fafafa;
		color: #999;
		padding: 5px 3px;
	}

	.layui-card-body .layui-timeline-title {
		padding-bottom: 0;
		font-size: 14px;
	}

	.layui-card-body .layui-timeline-item {
		padding-bottom: 5px;
	}

	.top-box {
		height: 30%;

	}

	.top-title {
		height: 4.5vh;
		font-size: 1vw;
		line-height: 4.5vh;
		color: grey;
		border-bottom: 1px solid rgb(221, 219, 219);

	}

	.top-box-middle {
		height: 16vh;
		/* background: url({__IMG__}/base.png) no-repeat;
		background-size: 70% 70%;
		background-position: 50% 85%; */

	}

	.top-box-bottom {
		height: 13.5vh;
		font-size: 1vw;

	}

	.top-box-bottom-1,
	.top-box-bottom-1 a {
		float: left;
		width: 97%;
	}

	.top-box-bottom-2,
	.top-box-bottom-2 a {
		float: left;
		width: 97%;
	}

	.sleep {
		width: 100%;
		height: 0.01vh;
		border-bottom: 1px solid rgb(221, 219, 219);
		float: left;
		/* margin-top: -1vh;
		left: -0.25vw; */
		position: relative;
		padding: 0;
	}

	.top-box-bottom-2 {
		float: left;
		height: 48px;
	}

	.bottom-box-left,
	.bottom-box-right {
		height: 64vh;
		
	}

	.heading {
		background-color: #f1f1f1;
	}

	.heading th {
		text-align: center;
		height: 2.5vh;
	}

	.form td {
		text-align: center;
		height: 2.5vh;
	}

	.layui-tab .layui-tab-title li {

		font-size: 0.7vw;
	}

	.layui-matter-item li a {
		display: block;
		padding: 12px;
		background-color: #f8f8f8;
		color: #999;
		border-radius: 3px;
		transition: all .3s;
		-webkit-transition: all .3s;
		font-size: 0.7vw;
	}

	.layui-matter-item li a:hover {
		background-color: #F2F8FF;
	}



	.layui-matter-item li span {
		float: right;
	}

	.layui-matter-item li cite {
		font-size: 0.7vw;
		font-weight: 300;
		color: #187FDD;
	}

	.top-head {
		/* width: 20%; */
	}

	.middle-left {
		width: 60%;
	}

	.middle-right {
		width: 40%;
	}

	.top-box-middle-money {
		width: 100%;
		height: 15.2vh;
		line-height: 14.5vh;
		font-size: 2.2vw;
		text-align: center;

	}

	.top-box-middle-money-left {
		color: #1287ff;
	}

	.top-box-middle-money-right {
		color: #999;
		font-size: 0.9vw;
	}

	.top-box-middle-left {
		background: url({__IMG__}/main-first.png) no-repeat;
		background-size: 100% 85%;
		background-position: 85% 50%;
	}

	.top-box-middle-left-2 {
		background: url({__IMG__}/main-second.png) no-repeat;
		background-size: 85% 70%;
		background-position: 50% 50%;
	}

	.top-box-middle-left-3 {
		background: url({__IMG__}/main-third.png) no-repeat;
		background-size: 90% 70%;
		background-position: 50% 50%;
	}

	.top-box-middle-left-4 {
		background: url({__IMG__}/main-fourth.png) no-repeat;
		background-size: 80% 65%;
		background-position: 50% 50%;
	}

	.button-search {
		margin-left: 1vw;
	}

	#test2 {
		width: 100%;
		height: 32vh;
	}

	#test2 .layui-laydate-main {
		width: 100%;
	}

	#test2 .layui-laydate-content td {
		height: 3.645vh;
	}

	#test2 .layui-laydate-content th {
		width: 1%;
        padding: 7px 0;
	}

	.layui-laydate-content td>div{
        height: auto;
    }

	#test2 #layui-laydate1 .layui-laydate-header {
		background-color: #fff;
		border-bottom: 1px solid #e2e2e2;
		height: 4.6vh;
		font-size: 0.85vw;
		line-height: 2vh;
	}

	#test2 .laydate-theme-molv .layui-laydate-header i,
	.laydate-theme-molv .layui-laydate-header span {
		color: #2c2727b7;
	}

	#test2 .laydate-theme-molv .layui-laydate-footer {
		border: none;
	}

	#test2 .laydate-theme-molv .layui-laydate-content {
		border: none;
		border-top: none;
		border-bottom: 1px solid #e2e2e2;
		height: 28vh;
	}

	#test2 .laydate-theme-molv .layui-laydate-header i,
	.laydate-theme-molv .layui-laydate-header span {
		padding-left: 0;
	}

	.layui-laydate-content td, .layui-laydate-content th{
		height: 21px;
	}

	/* .layui-laydate-content td>div {
		height: 0.3vh;
	}

	.layui-laydate-content th {
		height: 0.25vh;
	} */

	.laydate-theme-molv {
		width: 100%;
	}

	.main-input {
		width: auto;
	}

	.main-input-name {
		display: flex;
	}

	.layui-form-label {
		padding: 9px 0;
		position: relative;
		display: block;
		text-align: left;
		width: 80px;
		font-weight: 400;
		line-height: 20px;
	}
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-3">
	<div class="layui-row layui-col-space12">
		<div class="layui-col-md3 top-head">
			<div class="layui-card top-box">
				<div class="layui-card-header top-title"><span style="font-size: 0.85vw;font-weight: 600;">财政局数量</span>
				</div>
				<div class="layui-card-body">
					<div class="layui-sales-info top-box-middle">
						<!-- <div class="top-box-middle-left" style="width: 37.5%;height: 95%;float: left;">

						</div> -->
						<div class="top-box-middle-right" style="width: 62.5%;height: 95%;float: left;">
							<p class="top-box-middle-money">
								<span class="top-box-middle-money-left"></span>
								<span class="top-box-middle-money-right">万元</span>
							</p>
						</div>
					</div>
					<!-- <div class="layui-sales-info top-box-bt" style="height: 10.5vh;width: auto;margin-bottom: -0.8vh;">
						<ul class="layui-row layui-col-space12">
							<li class="layui-col-md12"
								style="height: 5.2vh;line-height: 5.2vh;font-size: 0.71vw;padding: 0;background-color: #f9faff;color: rgb(154,153,155);">
								&nbsp;&nbsp;&nbsp;&nbsp;预算总额&nbsp;&nbsp;&nbsp;<span
									style="float: right;">万元&nbsp;&nbsp;&nbsp;&nbsp;</span><span

									style="float: right;color: #187FDD;">&nbsp;</span></li>


							<div class="sleep"></div>
							<li class="layui-col-md12"
								style="height: 5.2vh;line-height: 5.2vh;font-size: 0.71vw;padding: 0;background-color: #f9faff;color: rgb(154,153,155);">
								&nbsp;&nbsp;&nbsp;&nbsp;结算总额&nbsp;&nbsp;&nbsp;<span
									style="float: right;">万元&nbsp;&nbsp;&nbsp;&nbsp;</span><span

									style="float: right;color: #187FDD;">&nbsp;</span></li>

						</ul>
					</div> -->
				</div>
			</div>
		</div>

		<div class="layui-col-md3 top-head">
			<div class="layui-card top-box">
				<div class="layui-card-header top-title"><span style="font-size: 0.85vw;font-weight: 600;">公司数量</span>
				</div>
				<div class="layui-card-body">

					<div class="layui-sales-info top-box-middle">
						<!-- <div class="top-box-middle-left-2" style="width: 37.5%;height: 95%;float: left;">

						</div> -->
						<div class="top-box-middle-right" style="width: 62.5%;height: 95%;float: left;">
							<p class="top-box-middle-money">
								<span class="top-box-middle-money-left"></span>
								<span class="top-box-middle-money-right">万元</span>
							</p>
						</div>
					</div>
					<!-- <div class="layui-sales-info top-box-bt" style="height: 10.5vh;width: auto;margin-bottom: -0.8vh;">
						<ul class="layui-row layui-col-space12">
							<li class="layui-col-md12"
								style="height: 5.2vh;line-height: 5.2vh;font-size: 0.71vw;padding: 0;background-color: #f9faff;color: rgb(154,153,155);">
								&nbsp;&nbsp;&nbsp;&nbsp;2023年上半年服务费用&nbsp;&nbsp;&nbsp;<span
									style="float: right;">万元&nbsp;&nbsp;&nbsp;&nbsp;</span><span
									style="float: right;color: #187FDD;"></span></li>
							<div class="sleep"></div>
							<li class="layui-col-md12"
								style="height: 5.2vh;line-height: 5.2vh;font-size: 0.71vw;padding: 0;background-color: #f9faff;color: rgb(154,153,155);">
								&nbsp;&nbsp;&nbsp;&nbsp;2023年下半年服务费用&nbsp;&nbsp;&nbsp;<span
									style="float: right;">万元&nbsp;&nbsp;&nbsp;&nbsp;</span><span
									style="float: right;color: #187FDD;"></span></li>
						</ul>
					</div> -->

				</div>
			</div>
		</div>


		<div class="layui-col-md3 top-head">
			<div class="layui-card top-box">
				<div class="layui-card-header top-title"><span style="font-size: 0.85vw;font-weight: 600;">业主数量</span>
				</div>
				<div class="layui-card-body">

					<div class="layui-sales-info top-box-middle">
						<!-- <div class="top-box-middle-left-3" style="width: 37.5%;height: 95%;float: left;">

						</div> -->
						<div class="top-box-middle-right" style="width: 62.5%;height: 95%;float: left;">
							<p class="top-box-middle-money">
								<span class="top-box-middle-money-left"></span>
								<span class="top-box-middle-money-right">%</span>
							</p>
						</div>
					</div>
					<!-- <div class="layui-sales-info top-box-bt" style="height: 10.5vh;width: auto;margin-bottom: -0.8vh;">
						<ul class="layui-row layui-col-space12">
							<li class="layui-col-md12"
								style="height: 5.2vh;line-height: 5.2vh;font-size: 0.71vw;padding: 0;background-color: #f9faff;color: rgb(154,153,155);">
								&nbsp;&nbsp;&nbsp;&nbsp;预算核增减率&nbsp;&nbsp;&nbsp;<span
									style="float: right;">%&nbsp;&nbsp;&nbsp;&nbsp;</span><span

									style="float: right;color: #187FDD;"></span></li>

							<div class="sleep"></div>
							<li class="layui-col-md12"
								style="height: 5.2vh;line-height: 5.2vh;font-size: 0.71vw;padding: 0;background-color: #f9faff;color: rgb(154,153,155);">
								&nbsp;&nbsp;&nbsp;&nbsp;结算核增减率&nbsp;&nbsp;&nbsp;<span
									style="float: right;">%&nbsp;&nbsp;&nbsp;&nbsp;</span><span
									style="float: right;color: #187FDD;">&nbsp;</span></li>
						</ul>
					</div> -->

				</div>
			</div>
		</div>


		<div class="layui-col-md3 top-head">
			<div class="layui-card top-box">
				<div class="layui-card-header top-title"><span style="font-size: 0.85vw;font-weight: 600;">今日访问</span>
				</div>
				<div class="layui-card-body">

					<div class="layui-sales-info top-box-middle">
						<!-- <div class="top-box-middle-left-4" style="width: 37.5%;height: 95%;float: left;">

						</div> -->
						<div class="top-box-middle-right" style="width: 62.5%;height: 95%;float: left;">
							<p class="top-box-middle-money">
								<span class="top-box-middle-money-left"></span>
								<span class="top-box-middle-money-right">个</span>
							</p>
						</div>
					</div>
					<!-- <div class="layui-sales-info top-box-bt" style="height: 10.5vh;width: auto;margin-bottom: -0.8vh;">
						<ul class="layui-row layui-col-space12">
							<li class="layui-col-md12"
								style="height: 5.2vh;line-height: 5.2vh;font-size: 0.71vw;padding: 0;background-color: #f9faff;color: rgb(154,153,155);">
								&nbsp;&nbsp;&nbsp;&nbsp;正在作业&nbsp;&nbsp;&nbsp;<span
									style="float: right;">个&nbsp;&nbsp;&nbsp;&nbsp;</span><span
									style="float: right;color: #187FDD;">&nbsp;</span></li>
							<div class="sleep"></div>
							<li class="layui-col-md12"
								style="height: 5.2vh;line-height: 5.2vh;font-size: 0.71vw;padding: 0;background-color: #f9faff;color: rgb(154,153,155);">
								&nbsp;&nbsp;&nbsp;&nbsp;已归档&nbsp;&nbsp;&nbsp;<span
									style="float: right;">个&nbsp;&nbsp;&nbsp;&nbsp;</span><span
									style="float: right;color: #187FDD;">&nbsp;</span></li>
						</ul>
					</div> -->

				</div>
			</div>
		</div>


		<div class="layui-col-md9">
			<div class="layui-card">
				<div class="layui-card-header">
				</div>
				<div class="layui-card-body">
					<div id="map" style="height: 578px;"></div>
				</div>
			</div>
		</div>
	
		<div class="layui-col-md3">
			<div class="layui-card">
				<div class="layui-card-header">
				</div>
				<div class="layui-card-body">
				<div id="zxrs" style="height: 252px"></div>
				</div>
			</div>
		</div>
		  
		<div class="layui-col-md3">
			<div class="layui-card">
				<div class="layui-card-header">
				</div>
				<div class="layui-card-body">
					<div id="llq" style="height: 252px"></div>
				</div>
			</div>
		</div>

	</div>


    

	<!-- <div class="layui-row layui-col-space12">
		<div class="layui-col-md5 middle-left">
			<div class="layui-card">
				<div class="layui-card-body bottom-box-left" style="padding-top: 0;overflow: hidden;">
					<div class="layui-tab layui-tab-brief" style="height: 88%;">
						<ul class="layui-tab-title" style="font-size: 1vw; font-weight: 600;">
							<li class="layui-this" style="font-size: 0.95vw;">
								<i class="layui-icon">&#xe63c; </i> 待审核任务
							</li>

						</ul>
						<div class="layui-tab-content" style="height: 100%; overflow: hidden;">
							<table class="layui-hide" id="cost_project" lay-filter="cost_project"></table>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="layui-col-md4 middle-right">
			<div class="layui-card">
				<div class="layui-card-body bottom-box-left" style="padding-top: 0;">
					<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="height: 63.75vh; /* 容器高度 */overflow: hidden;">
						<ul class="layui-tab-title" style="font-size: 1vw; font-weight: 600;color: grey;">
							<li class="layui-this" style="font-size: 0.95vw;">
								<i class="layui-icon iconfont">&#xe68d; </i> 临期项目
							</li>
							<li style="font-size: 0.95vw;">
								<i class="layui-icon iconfont">&#xe702; </i> 逾期项目
							</li>
						</ul>
						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show">
								<table class="layui-hide" id="advent_project" lay-filter="advent_project"></table>
							</div>
							<div class="layui-tab-item">
								<table class="layui-hide" id="late_project" lay-filter="late_project"></table>
							</div>
							<div class="layui-tab-item"></div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="layui-col-md3 middle-left">
			<div class="layui-card">
				<div class="layui-card-body bottom-box-left">
					<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
						<div class="layui-card-header top-title" style="font-size: 0.95vw;font-weight: 600;">
							项目列表
						</div>
						<div class="layui-card-body layui-col-space12">
							<div class="layui-col-md3 main-input-name" style="width: 40%;">
								<label class="layui-form-label">
									项目名称：
								</label>
								<div class="layui-input-block">
									<input type="text" name="title" placeholder="请输入项目名称" autocomplete="off"
										class="layui-input main-input">
								</div>
							</div>
							<div class="layui-col-md3 main-input-name" style="width: 35%;">
								<label class="layui-form-label" style="text-align: center;">
									负责人：
								</label>
								<div class="layui-input-block">
									<input type="text" name="title" placeholder="请输入负责人" autocomplete="off"
										class="layui-input main-input">
								</div>
							</div>
							<div class="layui-col-md3 main-input-name">
								<button class="layui-btn layui-bg-blue button-search"><i
										class="layui-icon">&#xe615;</i></button>
							</div>
						</div>
						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show">
								<table class="layui-hide" id="cost_project2" lay-filter="cost_project2"></table>
							</div>
 						</div>
					</div>

				</div>
			</div>
		</div>

		<div class="layui-col-md3 middle-right">
			<div class="layui-card">
				<div class="layui-card-body bottom-box-left">
					<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
						<div class="layui-card-header top-title" style="font-size: 0.95vw;font-weight: 600;">
							通讯录
						</div>
						<div class="layui-card-body layui-col-space12">
							<div class="layui-col-md5 main-input-name" style="width: 65%;">
								<label class="layui-form-label" style="width: 7vw;">
									联系人姓名：
								</label>
								<div class="layui-input-block">
									<input type="text" name="title" placeholder="请输入联系人姓名" autocomplete="off"
										class="layui-input main-input">
								</div>
							</div>

							<div class="layui-col-md2 main-input-name">
								<button class="layui-btn layui-bg-blue button-search" style="margin-left: 0;"><i
										class="layui-icon">&#xe615;</i></button>
							</div>
						</div>
						<table class="layui-hide" id="head" lay-filter="head"></table>
					</div>

				</div>
			</div>
		</div>

	</div> -->
</div>
</div>
<div class="layui-col-md4">


</div>
</div>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
<script>
    const moduleInit = ['tool'];
    function gouguInit() {
      var layer = layui.layer, tool = layui.tool;
	  
      // 访问量
      var fwlCharts = echarts.init(document.getElementById('fwl'));
      var fwlOptions = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '-1%',
          right: '0',
          bottom: '0',
          top: '5px',
          containLabel: false
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            show: false
          }
        ],
        yAxis: [
          {
            type: 'value',
            show: false
          }
        ],
        series: [
          {
            name: '总量',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#1890ff'
              }, {
                offset: 1,
                color: '#1890ff'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 156, 200, 90, 100, 165]
          },
        ]
      };

      fwlCharts.setOption(fwlOptions);

      // 渲染表信息
      var zfbsCharts = echarts.init(document.getElementById('zfbs'));

      var zfbsOptions = {
        color: ['#1890ff', '#666'],
        tooltip: {},
        grid: {
          left: '0',
          right: '20',
          bottom: '30',
          containLabel: true
        },
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          show: false,
        },
        yAxis: {
          show: false
        },
        series: [{
          type: 'bar',
          data: [726, 1013, 690, 892, 982, 570, 536, 546, 988, 1002, 500, 506],
          barMaxWidth: 45
        }]
      }

      zfbsCharts.setOption(zfbsOptions);


      // 地图数据信息
      function randomValue() {
        return Math.round(Math.random() * 1000);
      }
      var mapCharts = echarts.init(document.getElementById('map'));

      var dataList = [
        { name: "南海诸岛", value: 0 },
        { name: '北京', value: randomValue() },
        { name: '天津', value: randomValue() },
        { name: '上海', value: randomValue() },
        { name: '重庆', value: randomValue() },
        { name: '河北', value: randomValue() },
        { name: '河南', value: randomValue() },
        { name: '云南', value: randomValue() },
        { name: '辽宁', value: randomValue() },
        { name: '黑龙江', value: randomValue() },
        { name: '湖南', value: randomValue() },
        { name: '安徽', value: randomValue() },
        { name: '山东', value: randomValue() },
        { name: '新疆', value: randomValue() },
        { name: '江苏', value: randomValue() },
        { name: '浙江', value: randomValue() },
        { name: '江西', value: randomValue() },
        { name: '湖北', value: randomValue() },
        { name: '广西', value: randomValue() },
        { name: '甘肃', value: randomValue() },
        { name: '山西', value: randomValue() },
        { name: '内蒙古', value: randomValue() },
        { name: '陕西', value: randomValue() },
        { name: '吉林', value: randomValue() },
        { name: '福建', value: randomValue() },
        { name: '贵州', value: randomValue() },
        { name: '广东', value: randomValue() },
        { name: '青海', value: randomValue() },
        { name: '西藏', value: randomValue() },
        { name: '四川', value: randomValue() },
        { name: '宁夏', value: randomValue() },
        { name: '海南', value: randomValue() },
        { name: '台湾', value: randomValue() },
        { name: '香港', value: randomValue() },
        { name: '澳门', value: randomValue() }
      ]

      // 世界地图
      var mapOption = {
        tooltip: {
          formatter: function (params, ticket, callback) {
            return params.seriesName + '<br />' + params.name + '：' + params.value
          }
        },
        visualMap: {
          min: 0,
          max: 1500,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],//取值范围的文字
          inRange: {
            color: ['#e0ffff', '#006edd']//取值范围的颜色
          },
          show: true//图注
        },
        geo: {
          map: 'china',
          roam: false,  //不开启缩放和平移
          zoom: 1.23,    //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)'
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: '#F3B329',//鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          {
            name: '信息量',
            type: 'map',
            geoIndex: 0,
            data: dataList
          }
        ]
      };
      mapCharts.setOption(mapOption);


      var myCharts = echarts.init(document.getElementById('zxrs'));
      var mData = [50, 100, 150, 80, 120, 150, 200, 250, 220, 250, 300, 350, 400, 380, 440, 450, 500, 550, 500];
      var option = {


        tooltip: {
          trigger: "axis"
        },
        xAxis: [{
          type: "category",
          boundaryGap: !1,
          data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00"]
        }],
        yAxis: [{
          type: "value"
        }],
        series: [{
          name: "总量",
          type: "line",
          smooth: !0,
          itemStyle: {
            normal: {
              areaStyle: {
                type: "default"
              }
            }
          },
          data: mData
        }]
      };
      myCharts.setOption(option);

      // 动态改变图表1数据
      setInterval(function () {
        for (var i = 0; i < mData.length; i++) {
          mData[i] += (Math.random() * 50 - 25);
          if (mData[i] < 0) {
            mData[i] = 0;
          }
        }
        myCharts.setOption({
          series: [{
            data: mData
          }]
        });
      }, 1000);

      // 渲染浏览器分布
      var llqCharts = echarts.init(document.getElementById('llq'));
      var llqOptions = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '1%',
          left: 'center',
          icon: 'circle', // 设置小圆点
          itemWidth: 10,  // 设置宽度
          itemHeight: 10, // 设置高度
        },

        series: [
          {
            name: '浏览器分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14px',
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Chrome' },
              { value: 735, name: 'Safair' },
              { value: 580, name: 'Firefox' },
              { value: 484, name: 'Edge' },
              { value: 300, name: 'IE' },
              { value: 200, name: 'Other' },
            ]
          }
        ]
      };
      llqCharts.setOption(llqOptions);

      // 窗口大小改变事件
      window.onresize = function () {
        myCharts.resize();
        mapCharts.resize();
        fwlCharts.resize();
        zfbsCharts.resize();
        llqCharts.resize();
      };
    }
  </script>
  <script src="../../assets/third_party/echart/echarts.min.js"></script>
  <script src="../../assets/third_party/echart/china.js"></script>
  <script src="../../../../public/static/assets/layui/layui.js"></script>
  <script src="../../../../public/static/assets/gougu/gouguInit.js"></script>
</script>
 
{/block}
<!-- /脚本 -->