moonsflyer
/
likeshop.project


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037
							<!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://shop.gxsmlt.com/admin">商贸流通</a></li>
				<li><a href="https://info.gxsmlt.com/admin">社会化服务</a></li>
				<li><a href="https://buyinfo.gxsmlt.com/admin">农资供应</a></li>
				<li><a href="https://admin.gxsmlt.com/admin">资产管理</a></li>

			</ul>
		</div>

		<div class="time" id="showTime"></div>
		<script>
		function tip(){
		    alert('板块开发中，敬请期待！')
		}
			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>
									{foreach $service_info.SupplyDemandList as $k => $item}
									<li>{$k+1}.{$item.name} <span class="text-s">{$item.value}</span></li>
									{/foreach}
								</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颜色 -->
								{foreach $service_info.SupplyDemandList as $k => $item}
								<a class="b01 {$item.co}" href="#">{$item.name}</a>
								{/foreach}
<!--								<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>{$asset_info.total_asset_num}</p>
							</li>
							<li><span>租赁中</span>
								<p>{$asset_info.leaseing}</p>
							</li>
							<li><span>闲置中</span>
								<p>{$asset_info.leave_unused_num}</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/>
		<input id="leaseing" value="{$asset_info.leaseing}" hidden/>
		<input id="unlease" value="{$asset_info.unlease}" hidden/>
		<input id="leaseend" value="{$asset_info.leaseend}" hidden/>
		<input id="pay_info" value="{$asset_lease_info}" hidden>
		<input id="cate_name" value="{$service_info.cate_name}" hidden>
		<input id="cate_value" value="{$service_info.cate_value}" hidden>
		<input id="user_service_value" value="{$service_info.user_service_value}" hidden>
		<input id="supply_cate_name" value="{$service_info.supply_cate_name}" hidden>
		<input id="supply_cate_value" value="{$service_info.supply_cate_value}" hidden>
		<input id="SupplyDemandInfo" value="{$service_info.SupplyDemandInfo}" 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);
		var user_service_value =JSON.parse(document.getElementById('user_service_value').value);
		var supply_cate_name =JSON.parse(document.getElementById('supply_cate_name').value);
		var supply_cate_value =JSON.parse(document.getElementById('supply_cate_value').value);
		var SupplyDemandInfo =JSON.parse(document.getElementById('SupplyDemandInfo').value);

		var unlease = JSON.parse(document.getElementById('unlease').value);
		var leaseing = JSON.parse(document.getElementById('leaseing').value);
		var leaseend = JSON.parse(document.getElementById('leaseend').value);
		var pay_info = JSON.parse(document.getElementById('pay_info').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:['租赁中','闲置中','待续约'],
				textStyle: {
					color: 'rgba(255,255,255,.5)',
					fontSize:'12',
				}
			},
			series: [
				{
					name:'资产分布',
					type:'pie',
					center: ['35%', '50%'],
					radius: ['40%', '50%'],
					color: ['#62c98d', '#2f89cf', '#4cb9cf'],
					label: {show:false},
					labelLine: {show:false},
					data:[

						{value:leaseing, name:'租赁中'},
						{value:unlease, name:'闲置中'},
						{value:leaseend, name:'待续约'}
					]
				}
			]
		};
		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:pay_info
				}
			]
		};
		//农资供应右下
		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:user_service_value
				}
			]
		};
		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:supply_cate_name,
				textStyle: {
					color: 'rgba(255,255,255,.5)',
					fontSize:'12',
				}
			},
			series: [
				{
					name:'产量占比',
					type:'pie',
					center: ['40%', '50%'],
					radius: ['40%', '50%'],
					color: [ '#e0c828','#e58c00','#eb295b','#62c98d', '#2f89cf', '#4cb9cf'],
					label: {show:false},
					labelLine: {show:false},
					data:SupplyDemandInfo
				}
			]
		};

		//资产管理
		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);

		var cate_name = JSON.parse(document.getElementById('cate_name').value);
		var cate_value = JSON.parse(document.getElementById('cate_value').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: cate_name,
				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: 'bar',
				smooth: true,
				data: cate_value,

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

						barBorderRadius: 5,
					}
				}
			}
			]
		};

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

</script>
</html>