|
|
@@ -0,0 +1,1037 @@
|
|
|
+<!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>
|
