moonsflyer
/
likeshop.project


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036
							<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="refresh" content="300" />
	<title>乳山市数字供销智慧平台</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript" src="js/china.js"></script>
	<script type="text/javascript" src="js/map.js"></script>
	<script type="text/javascript" src="js/js.js"></script>
	<script type="text/javascript" src="js/Bubble.js"></script>
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div class="head clearfix">


		<h1 class="pulll_left">乳山市数字供销智慧平台</h1>
		<div class="menu menu2 pulll_left">
			<ul>
				<li><a href="https://zhgx.sdshengyuekeji.cn/">商贸流通</a></li>
				<li><a href="https://zhgx.sdshengyuekeji.cn/">社会化服务</a></li>
				<li><a href="https://zhgx.sdshengyuekeji.cn/">农资供应</a></li>
				<li><a href="https://zhgx.sdshengyuekeji.cn/">资产管理</a></li>

			</ul>
		</div>

		<div class="time" id="showTime"></div>
		<script>
			var t = null;
			t = setTimeout(time, 1000);//開始运行
			function time() {
				clearTimeout(t);//清除定时器
				dt = new Date();
				var y = dt.getFullYear();
				var mt = dt.getMonth() + 1;
				var day = dt.getDate();
				var h = dt.getHours();//获取时
				var m = dt.getMinutes();//获取分
				var s = dt.getSeconds();//获取秒
				if(s<10) s = '0'+s;
				document.getElementById("showTime").innerHTML = y + "/" + mt + "/" + day + " " + h + ":" + m + ":" + s + "";
				t = setTimeout(time, 1000); //设定定时器，循环运行
			}

		</script>
	</div>
	<div class="mainbox">

		<ul class="clearfix nav1">
			<li style="width: 22%">
				<div class="box">
					<div class="tit">商品销量统计</div>
					<div class="boxnav" style="height: 200px;">
						<table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<th>商品名称</th>
									<th>上月销量</th>
									<th>本月销量</th>
									<th>增长率</th>


								</tr>
								{volist name="newGoodsData" id='goods'}

								<tr>
									<td>{$goods.name}</td>
									<td><span class="text-w">{$goods.last_total_num}</span></td>
									<td><span class="text-b">{$goods.now_total_num}</span></td>
									<td>
										{if $goods.type}<div  class="text-d">↑{$goods.growth}</div>{/if}
										{if !$goods.type}<div  class="text-s">↓{$goods.growth}</div>{/if}
									</td>
								</tr>
								{/volist}
							</tbody>
						</table>
					</div>
				</div>
				<div class="box">
					<div class="tit">分类销量排名</div>
					<div class="boxnav" style="height: 250px;">
						<div class="" style="height: 190px" id="echart1"></div>
						<div class="leidanav">
							<ul class="clearfix">
								{volist name="order_goods_category" id='category'}
								<li><span>{$category.name}</span>
									<p>{$category.total_num}</p>
								</li>
								{/volist}
							</ul>
						</div>
					</div>
				</div>
			</li>
			<li style="width: 56%">

				<div class="box">
					<div class="boxnav mapc" style="height: 550px; position: relative">
						<div class="mapnav">
							<ul>
								<li>
									<div><span>商品数量</span>
										<p>{$middle.goods_number}个</p>
									</div>
								</li>
								<li>
									<div><span>订单派送中</span>
										<p>{$middle.delivery_number}件</p>
									</div>
								</li>
								<li>
									<div><span>合作商</span>
										<p>{$middle.distribution_number}位</p>
									</div>
								</li>
								<li>
									<div><span>总订单</span>
										<p>{$middle.order_number}笔</p>
									</div>
								</li>
								<li>
									<div><span>农资供应</span>
										<p>{$middle.agricultural_supply_number}条</p>
									</div>
								</li>
							</ul>
						</div>
						<div class="mapnav2">

							<div class="box">
								<div class="tit">销量与收益</div>
								<div class="boxnav" style="height: 130px;" id="sysx">


								</div>
								<div class="leidanav leidanav3" style="margin-bottom: 15px;">
									<ul class="clearfix">
										<li><span>今日订单</span>
											<p>{$middle.today_order_number}</p>
										</li>
										<li><span>今日收益</span>
											<p>{$middle.today_total_amount}</p>
										</li>
										<li><span>本月订单</span>
											<p>{$middle.this_month_order_number}</p>
										</li>
										<li><span>本月收益</span>
											<p>{$middle.this_month_total_amount}</p>
										</li>
									</ul>
								</div>

							</div>
						</div>
						<div class="map" id="map"></div>

						<script>
							$(".mapbtn a").hover(function () {
								var ind = $(this).index()
								$(".mapnav ul").eq(ind).show().siblings().hide()
							})
						</script>
					</div>
				</div>

			</li>
			<li style="width: 22%">

				<div class="box">
					<div class="tit">下单与退款</div>
					<div class="boxnav" id="echart3" style="height: 200px;">

					</div>
				</div>
				<div class="box">
					<div class="tit">农资供应</div>
					<div class="boxnav" style="height: 250px;">
						<div style="height: 200px; float: left; width: 40%; padding: 0 5px;">
							<div class="tit02 text-b">热门搜索</div>
							<div class="huati">
								<ul>
									<li>1.农机手 <span class="text-s">↑2167</span></li>
									<li>2.化肥 <span class="text-s">↑2167</span></li>
									<li>3.饲料 <span class="text-d">↓2167</span></li>
									<li>4.树苗 <span class="text-d">↓2167</span></li>
									<li>5.收割机 <span class="text-d">↓2167</span></li>
								</ul>
							</div>
						</div>

						<div style="height: 200px; float: left; width: 60%">

							<div class="text-b tit02" style="text-align: center;">关键词</div>
							<div class="tagcloud">
								<!-- bo大小 co颜色 -->
								<a class="b01 co01" href="#">农机手</a>
								<a class="b02 co02" href="#">化肥</a>
								<a class="b03 co05" href="#">饲料</a>
								<a class="b04 co02" href="#">树苗</a>
								<a class="b03 co05" href="#">小麦</a>
							</div>
							<script type="text/javascript">
								/*3D标签云*/
								tagcloud({
									selector: ".tagcloud",  //元素选择器
									fontsize: 6,       //基本字体大小, 单位px
									radius: 40,         //滚动半径, 单位px 页面宽度和高度的五分之一
									mspeed: "slow",   //滚动最大速度, 取值: slow, normal(默认), fast
									ispeed: "slow",   //滚动初速度, 取值: slow, normal(默认), fast
									direction: 0,     //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
									keep: false          //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
								});
							</script>
						</div>
					</div>
				</div>

			</li>
		</ul>

		<div class="box" style="padding: 20px 0;">
			<ul class="clearfix nav2 ">
				<li style="width:25%">
					<div class="tit01">农资供应</div>
					<div style="width: 100%;height: 100%;text-align: center;">版块开发中...</div>
					<div class="" id="">
						<div style="float: left; width: 50%; height: 0" id="fb01"></div>
						<div style="float: left; width: 50%; height: 0" id="fb02"></div>

					</div>
					<!-- <div class="" id="">
						<div style="float: left; width: 50%; height: 170px" id="fb01"></div>
						<div style="float: left; width: 50%; height: 170px" id="fb02"></div>

					</div> -->
					<!-- <div class="leidanav leidanav2" >
						<ul class="clearfix">
							<li><span>总人数</span>
								<p>128</p>
							</li>
							<li><span>男职员</span>
								<p>100</p>
							</li>
							<li><span>女职员</span>
								<p>28</p>
							</li>

						</ul>
					</div> -->
				</li>
				<li style="width:25%">
					<div class="tit01">供需信息统计</div>
					<div class="ftechart" id="echart4"></div>
				</li>
				<li style="width:25%">
					<div class="tit01">资产管理</div>
					<div class="" style="height:100%;display: flex; align-items: center;">
						<div style="float: left; width: 50%; height: 100%" class="wancheng">
							<div><span>闲置资产</span>
								<h3>{$asset_info.leave_unused_num}</h3>
							</div>
							<div class="yuan">
								<span>{$asset_info.unused_rate}%</span>
							</div>
						</div>
						<div style="float: left; width: 50%; height: 50%" id="myd1"></div>


					</div>

				</li>
				<li style="width:25%">
					<div class="tit01">农资供应</div>
					<div style="width: 100%;height: 100%;text-align: center;">版块开发中...</div>
					<div class="" id="">
						<div style="float: left; width: 50%; height: 0" id="fb03"></div>
						<div style="float: left; width: 50%; height: 0" id="fb04"></div>

					</div>
					<!-- <div class="" id="">
						<div style="float: left; width: 50%; height: 200px" id="fb03"></div>
						<div style="float: left; width: 50%; height: 200px" id="fb04"></div>

					</div> -->

				</li>
			</ul>
		</div>

		<input id="chars_category_data" value="{$chars_category}" hidden/>
		<input id="category_data" value="{$goods_category_data}" hidden/>
		<input id="month_data" value="{$middle.MonthFormatData}" hidden/>
		<input id="month_order_data" value="{$middle.MonthOrderData}" hidden/>
		<input id="month_arr_data" value="{$order_refund_info.MonthData}" hidden/>
		<input id="order_month_info" value="{$order_refund_info.order_month_info}" hidden/>
		<input id="refund_month_info" value="{$order_refund_info.refund_month_info}" hidden/>
	</div>
</body>
<script >
	//分类图表
	function echarts_1() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('echart1'));
		var category_data = JSON.parse(document.getElementById('category_data').value);
		var chars_category_data = JSON.parse(document.getElementById('chars_category_data').value);
		console.log(252501,category_data);
		console.log(252502,chars_category_data);
		var data = [{
			title: '乳山市'
		},
			['本年'],
			chars_category_data,
			category_data,
		]
		option = {
			color: ['#9DD060', '#35C96E', '#4DCEF8'],
			tooltip: {},
			radar: {
				center: ['50%', '50%'],
				radius: ["25%", "70%"],
				name: {
					textStyle: {
						color: '#72ACD1'
					}
				},
				splitLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.0',
						width: 2
					}
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,0.2)',
						width: 1,
						type: 'dotted'
					},
				},
				splitArea: {
					areaStyle: {
						color: ['rgba(255,255,255,.1)', 'rgba(255,255,255,0)']
					}
				},
				indicator: data[2]
			},
			series: [{
				name: '',
				type: 'radar',
				data: [{
					areaStyle: {
						normal: {
							opacity: 0.3,
						}
					},
					value: data[3],
					name: data[1][0]
				},
					{
						areaStyle: {
							normal: {
								opacity: 0.3,
							}
						},
						value: data[4],
						name: data[1][1]
					},
					{
						areaStyle: {
							normal: {
								opacity: 0.3,
							}
						},
						value: data[5],
						name: data[1][2]
					}
				]
			}]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		window.addEventListener("resize",function(){
			myChart.resize();
		});
	}

	//销量收益、农资供应
	function echarts_31() {

		var month_data = JSON.parse(document.getElementById('month_data').value);
		var month_order_data = JSON.parse(document.getElementById('month_order_data').value);
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('fb01'));
		var myChart2 = echarts.init(document.getElementById('fb02'));
		var myChart3 = echarts.init(document.getElementById('fb03'));
		var myChart4 = echarts.init(document.getElementById('fb04'));
		var myChart5 = echarts.init(document.getElementById('myd1'));
		var myChart7 = echarts.init(document.getElementById('sysx'));
		option = {
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b}: {c} ({d}%)",
				position:function(p){   //其中p为当前鼠标的位置
					return [p[0] + 10, p[1] - 10];
				}
			},
			legend: {
				orient: 'vertical',
				top:'25%',
				right:0,
				itemWidth: 10,
				itemHeight: 10,
				data:['20-29岁','30-39岁','40-49岁','50岁以上'],
				textStyle: {
					color: 'rgba(255,255,255,.5)',
					fontSize:'12',
				}
			},
			series: [
				{
					name:'年龄分布',
					type:'pie',
					center: ['35%', '50%'],
					radius: ['40%', '50%'],
					color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b'],
					label: {show:false},
					labelLine: {show:false},
					data:[

						{value:4, name:'20-29岁'},
						{value:2, name:'30-39岁'},
						{value:2, name:'40-49岁'},
						{value:1, name:'50岁以上'},
					]
				}
			]
		};
		option2 = {
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b}: {c} ({d}%)",
				position:function(p){   //其中p为当前鼠标的位置
					return [p[0] + 10, p[1] - 10];
				}
			},
			legend: {
				orient: 'vertical',
				top:'25%',
				right:'8%',
				itemWidth: 10,
				itemHeight: 10,
				data:['博士','硕士','本科','专科'],
				textStyle: {
					color: 'rgba(255,255,255,.5)',
					fontSize:'12',
				}
			},
			series: [
				{
					name:'学历构成',
					type:'pie',
					center: ['40%', '50%'],
					radius: ['40%', '50%'],
					color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b'],
					label: {show:false},
					labelLine: {show:false},
					data:[
						{value:10, name:'博士'},
						{value:20, name:'硕士'},
						{value:30, name:'本科'},
						{value:40, name:'专科'},

					]
				}
			]
		};
		option3 = {
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b}: {c} ({d}%)",
				position:function(p){   //其中p为当前鼠标的位置
					return [p[0] + 10, p[1] - 10];
				}
			},
			legend: {
				orient: 'vertical',
				top:'center',
				right:0,
				itemWidth: 10,
				itemHeight: 10,
				data:['数据分门别类','数据关系部门','今日数据交易'],
				textStyle: {
					color: 'rgba(255,255,255,.5)',
					fontSize:'12',
				}
			},
			series: [
				{
					name:'数据',
					type:'pie',
					center: ['35%', '50%'],
					radius: ['40%', '50%'],
					color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b'],
					label: {show:false},
					labelLine: {show:false},
					data:[

						{value:4, name:'数据分门别类'},
						{value:2, name:'数据关系部门'},
						{value:2, name:'今日数据交易'},
					]
				}
			]
		};
		option4 = {
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b}: {c} ({d}%)",
				position:function(p){   //其中p为当前鼠标的位置
					return [p[0] + 10, p[1] - 10];
				}
			},
			legend: {
				orient: 'vertical',
				top:'center',
				right:'8%',
				itemWidth: 10,
				itemHeight: 10,
				data:['零销类','服务类','销售类','软件类','硬件类','其它类'],
				textStyle: {
					color: 'rgba(255,255,255,.5)',
					fontSize:'12',
				}
			},
			series: [
				{
					name:'业务分类',
					type:'pie',
					center: ['40%', '50%'],
					radius: ['40%', '50%'],
					color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b'],
					label: {show:false},
					labelLine: {show:false},
					data:[
						{value:10, name:'零销类'},
						{value:20, name:'服务类'},
						{value:30, name:'销售类'},
						{value:40, name:'软件类'},
						{value:50, name:'硬件类'},
						{value:60, name:'其它类'},
					]
				}
			]
		};
		option5 = {
			grid: {
				left: '0',
				right: '0',
				top: '10%',
				bottom: '24%',
				//containLabel: true
			},
			legend: {
				data: ['闲置中', '待续约', '租赁中'],
				bottom:0,
				itemWidth: 10,
				itemHeight: 10,
				textStyle: {
					color: "#fff",
					fontSize: '10',

				},

				itemGap: 5
			},
			tooltip: {
				show: "true",
				trigger: 'item'
			},
			yAxis: {
				type: 'value',
				show: false,
			},
			xAxis: [{
				type: 'category',
				axisTick: {
					show: false
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#363e83',
					}
				},
				axisLabel: {
					show: false,
					//   inside: true,
					textStyle: {
						color: "rgba(255,255,255,1)",
						fontWeight: 'normal',
						fontSize: '12',
					},
					// formatter:function(val){
					//     return val.split("").join("\n")
					// },
				},
				data: ['业务办量统计']
			}

			],
			series: [
				{
					name: '闲置中',
					type: 'bar',
					barWidth: '20',

					itemStyle: {
						normal: {
							show: true,
							color:'#20aa92',
							barBorderRadius: 50,
							borderWidth: 0,
						}
					},
					zlevel: 2,
					barGap: '100%',
					data: [{$asset_info.unlease}],
					label: {
						formatter: "{c}",
						show: true,
						position: 'top',
						textStyle: {
							fontSize:12,
							color: 'rgba(255,255,255,.6)',
						}
					},
				},
				{
					name: '待续约',
					type: 'bar',
					itemStyle: {
						normal: {
							show: true,
							color:'#f4664e',
							barBorderRadius: 50,
							borderWidth: 0,
						}
					},
					zlevel: 2,
					barWidth: '20',
					data: [{$asset_info.leaseend}],
					label: {
						formatter: "{c}",
						show: true,
						position: 'top',
						textStyle: {
							fontSize:12,
							color: 'rgba(255,255,255,.6)',
						}
					},
				},
				{
					name: '租赁中',
					type: 'bar',
					itemStyle: {
						normal: {
							show: true,
							color:'#0c93dc',
							barBorderRadius: 50,
							borderWidth: 0,
						}
					},
					zlevel: 2,
					barWidth: '20',
					data: [{$asset_info.leaseing}],
					label: {
						formatter: "{c}",
						show: true,
						position: 'top',
						textStyle: {
							fontSize:12,
							color: 'rgba(255,255,255,.6)',
						}
					},
				},

			]
		};

		option7 = {
			//  backgroundColor: '#00265f',
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {
				left: '0%',
				top:'10px',
				right: '0%',
				bottom: '0',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: month_data,
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1)",
						width: 1,
						type: "solid"
					},
				},
				axisTick: {
					show: false,
				},
				axisLabel:  {
					interval: 0,
					// rotate:50,
					show: true,
					splitNumber: 5,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '12',
					},
				},
			}],
			yAxis: [{
				type: 'value',
				axisLabel: {
					//formatter: '{value} %'
					show:true,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '12',
					},
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1	)",
						width: 1,
						type: "solid"
					},
				},
				splitLine: {
					show: false,
					lineStyle: {
						color: "rgba(255,255,255,.1)",
					}
				}
			}],
			series: [{
				name: '{$middle.YearData}年',
				type: 'line',
				//smooth: true,
				data: month_order_data,

				itemStyle: {
					normal: {
						color:'#2f89cf',
						opacity: 1,

						barBorderRadius: 5,
					}
				}
			}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		myChart2.setOption(option2);
		myChart3.setOption(option3);
		myChart4.setOption(option4);
		myChart5.setOption(option5);

		myChart7.setOption(option7);
		window.addEventListener("resize",function(){
			myChart.resize();
			myChart7.resize();
			myChart2.resize();
			myChart3.resize();
			myChart4.resize();
			myChart5.resize();

		});
	}

	//供需信息统计
	function echarts_4() {
		var month_arr_data = JSON.parse(document.getElementById('month_arr_data').value);
		var order_month_info = JSON.parse(document.getElementById('order_month_info').value);
		var refund_month_info = JSON.parse(document.getElementById('refund_month_info').value);
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('echart4'));
		var myChart2 = echarts.init(document.getElementById('echart3'));
		option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				data: ['下单', '退款'],

				top:'2%',
				textStyle: {
					color: "rgba(255,255,255,.5)",
					fontSize: '12',

				},
				itemWidth: 12,
				itemHeight: 12,
				itemGap: 35
			},
			grid: {
				left: '0%',
				top:'40px',
				right: '0%',
				bottom: '0%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: month_arr_data,
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1)",
						width: 1,
						type: "solid"
					},
				},

				axisTick: {
					show: false,
				},
				axisLabel:  {
					interval: 0,
					// rotate:50,
					show: true,
					splitNumber: 15,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '14',
					},
				},
			}],
			yAxis: [{
				type: 'value',
				axisLabel: {
					//formatter: '{value} %'
					show:true,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '14',
					},
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1	)",
						width: 1,
						type: "solid"
					},
				},
				splitLine: {
					lineStyle: {
						color: "rgba(255,255,255,.1)",
					}
				}
			}],
			series: [{
				name: '下单',
				type: 'bar',
				data: order_month_info,
				barWidth:'20%', //柱子宽度
				// barGap: 1, //柱子之间间距
				itemStyle: {
					normal: {
						color:'#2f89cf',
						opacity: 1,
						barBorderRadius: 5,
					}
				}
			}, {
				name: '退款',
				type: 'bar',
				data: refund_month_info,
				barWidth:'20%',
				// barGap: 1,
				itemStyle: {
					normal: {
						color:'#62c98d',
						opacity: 1,
						barBorderRadius: 5,
					}
				}
			},
			]
		};
		option2 = {
			//  backgroundColor: '#00265f',
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				data: ['供应信息', '需求信息'],
				top:'5%',
				textStyle: {
					color: "#fff",
					fontSize: '12',

				},

				itemGap: 35
			},
			grid: {
				left: '0%',
				top:'40px',
				right: '0%',
				bottom: '0',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: ['5月', '6月', '7月', '8月', '9月', '10月'],
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1)",
						width: 1,
						type: "solid"
					},
				},
				axisTick: {
					show: false,
				},
				axisLabel:  {
					interval: 0,
					// rotate:50,
					show: true,
					splitNumber: 5,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '12',
					},
				},
			}],
			yAxis: [{
				type: 'value',
				axisLabel: {
					//formatter: '{value} %'
					show:true,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '12',
					},
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1	)",
						width: 1,
						type: "solid"
					},
				},
				splitLine: {
					lineStyle: {
						color: "rgba(255,255,255,.1)",
					}
				}
			}],
			series: [{
				name: '供应信息',
				type: 'line',
				smooth: true,
				data: [20, 16, 31, 28, 15, 28],

				itemStyle: {
					normal: {
						color:'#2f89cf',
						opacity: 1,

						barBorderRadius: 5,
					}
				}
			}, {
				name: '需求信息',
				type: 'line',
				smooth: true,
				data: [15, 22, 6, 24, 35, 12],
				barWidth:'15',
				// barGap: 1,
				itemStyle: {
					normal: {
						color:'#62c98d',
						opacity: 1,
						barBorderRadius: 5,
					}
				}
			},
			]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option2);
		myChart2.setOption(option);
		window.addEventListener("resize",function(){
			myChart.resize();
		});
	}

</script>
</html>