S.H.I.E.L.D.
/
admin-ol


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
							<!DOCTYPE html>
<html lang=zh-cn> 
<head>
  <meta charset=utf-8> 
  <title>网络版后台管理</title> 
  <meta name=description content=>  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit"> 
  <link rel=stylesheet href=css/bootstrap.css> 
  <link rel=stylesheet href=css/style.css>
  <link rel=stylesheet href=css/dateRange.css>
  <script src=js/jquery-1.9.1.min.js></script>
  <script src=js/bootstrap.js></script>
  <script src=js/global.js></script>
  <script src=js/echarts.js></script>
  <script type=js/macarons.js></script>
  <script src=js/dateRange.js></script>
</head>

<body>
<div class="headerWrapper"></div>
<div class="wrapper">
  <div class="leftWrapper">
    <div class="leftContent">
      <div class="logo logoWl">
        <h2>网<span class="logoInfo">络版后台</span><span class="caret"></span></h2>
        <div class="logoList">
          <ul>
            <li><a href="#">文库</a></li>
            <li><a href="#">问答</a></li>
            <li><a href="#">价格信息</a></li>
            <li><a href="#">官网</a></li>
            <li><a href="#">通行帐号</a></li>
          </ul>
        </div>
      </div>
      <div class="subMenu">
        <h2 class="subMenuTitle"><a class="active"><i class="iconImg icon-">D</i><div class="subMenuText">用户<span class="fR caret caret-triangle"></span></div></a></h2>
        <div class="subMenuContent">
          <ul>
            <li><a href="admin-newsUser.html">最新用户</a></li>
            <li><a href="admin-onlineUser.html">在线用户</a></li>
            <li><a href="admin-allUser.html">所有用户</a></li>
          </ul>
        </div>
      </div>
      <div class="subMenu">
        <h2 class="subMenuTitle"><a><i class="iconImg icon-">M</i><div class="subMenuText">数据分析<span class="fR caret caret-triangle"></span></div></a></h2>
        <div class="subMenuContent">
          <ul>
            <li><a href="admin-users.html">用户登录分析</a></li>
            <li><a href="admin-produce.html">产品分析</a></li>
            <li><a href="admin-count.html">客户分布</a></li>
            <li><a href="admin-channel.html">获取渠道</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="userMain">
      <div class="userContent">
          <span><img class="userImg" src="images/01.jpg"></span>
          <div class="subMenuText userName"><a href="admin-userinfo.html">管理员</a> <a class="exit" href="#"><span class="glyphicon glyphicon-log-out"></span> 退出</a></div>
      </div>
    </div>
  </div>
  <!-- leftWrapper end -->
  <div class="mainWrapper container-fluid">
    <div class="page-header pageTop">
      <h3>客户分布 
        <small class="btnTime">
          <a href="#">7天内</a> | 
          <a href="#">30天内</a> | 
          <input type="text" name="date" id="date_demo1" value="" class="form-control gri_date input-sm" style=" width:auto; display:inline-block;"/>
          <script type="text/javascript">
            //var STATS_START_TIME = '1329148800';
            var dateRange1 = new pickerDateRange('date_demo1', {
              isTodayValid : true,
              //isSingleDay : true,
              startDate : '2016-03-12',
              endDate : '2016-03-20',
              needCompare : false,
              defaultText : ' 至 ',
              target : 'datePicker_demo1',
              calendars : 3,
              //theme : 'ta',
              //shortOpr : true,
              success : function(obj) {
                $("#dCon_demo1").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate);
              }
            });
          </script>
        </small>
      </h3>
    </div>
    <div class="chartContent">
      <div class="area" id="area" style="width:100%; height:350px;"></div>
    </div>
    <div class="proSection clearfix">
      <div class="fL chartContent" style="width:60%;">
        <div class="CountMain" id="CountMainTotal" style="height:350px;"></div>
      </div>
      <div class="fL tableContent" style="width:40%; height:345px; overflow-y:auto;">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>地区</th>
              <th>人数（人）</th>
            </tr>
          </thead>
          <tr>
            <td><a href="admin-produce.html">重庆</a></td>
            <td>456</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">湖南</a></a></td>
            <td>200</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">广东</a></td>
            <td>141</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">山东</a></td>
            <td>97</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">四川</a></td>
            <td>1</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">江西</a></td>
            <td>12</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">甘肃</a></td>
            <td>67</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">广西</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">安徽</a></td>
            <td>456</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">河南</a></td>
            <td>200</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">内蒙古</a></td>
            <td>141</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">云南</a></td>
            <td>97</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">浙江</a></td>
            <td>1</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">北京</a></td>
            <td>12</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">贵州</a></td>
            <td>67</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">江苏</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">湖北</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">福建</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">陕西</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">吉林</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">新疆</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">河北</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">辽宁</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">山西</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">黑龙江</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">天津</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">上海</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">海南</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">青海</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">西藏</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">宁夏</a></td>
            <td>86</td>
          </tr>
          <tr>
            <td><a href="admin-produce.html">其他</a></td>
            <td>86</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <!-- mainWrapper end -->    
</div>


<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('area'));
// 指定图表的配置项和数据
option = {
    tooltip : {
        trigger: 'axis',
        // axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        //     type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        // }
    },
    title:{
      x:'center',
      text:'客户分布统计图',
    },
    // legend: {
    //     data:['重庆','湖南','广东','山东','四川','江西','甘肃','广西','安徽','河南','内蒙古','云南','浙江','北京','贵州','江苏','湖北','福建','陕西','吉林','其他','新疆','河北','辽宁','山西','黑龙江','天津','上海','海南','青海','西藏','宁夏']
    // },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['重庆','湖南','广东','山东','四川','江西','甘肃','广西','安徽','河南','内蒙古','云南','浙江','北京','贵州','江苏','湖北','福建','陕西','吉林','新疆','河北','辽宁','山西','黑龙江','天津','上海','海南','青海','西藏','宁夏','其他']
        }
    ],
    yAxis : [
        {
            name:'人数',
            type : 'value'
        }
    ],
    series : [
        {
            name:'人数分布统计',
            type:'bar',
            itemStyle:{
              normal:{
              color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                           '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                           '#C1232B','#B5C334'
                        ];
                        return colorList[params.dataIndex]
                      }
                  }
            },
            data:[4783,3543,3225,2321,1769,1737,1568,1516,1434,1416,1160,1146,1144,1069,1044,950,820,764,710,707,494,473,461,308,273,217,168,161,135,110,42,42]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('CountMainTotal'));
// 指定图表的配置项和数据
option = {
    title : {
        text: '用户分布情况',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: '0',
        data: ['重庆','湖南','广东','山东','四川','江西','甘肃','广西','安徽','河南','内蒙古','云南','浙江','北京','贵州','江苏','湖北','福建','陕西','吉林','新疆','河北','辽宁','山西','黑龙江','天津','上海','海南','青海','西藏','宁夏','其他']
    },
    series : [
        {
            name:'客户分布',
            type:'pie',
            radius : ['55%', '80%'],
            itemStyle : {
                normal : {
                    label : {
                        show : false,
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            fontSize : '30',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
                {value:4783, name:'重庆'},
                {value:3543, name:'湖南'},
                {value:3225, name:'广东'},
                {value:2321, name:'山东'},
                {value:1769, name:'四川'},
                {value:1737, name:'江西'},
                {value:1568, name:'甘肃'},
                {value:1516, name:'广西'},
                {value:1434, name:'安徽'},
                {value:1416, name:'河南'},
                {value:1160, name:'内蒙古'},
                {value:1146, name:'云南'},
                {value:1144, name:'浙江'},
                {value:1069, name:'北京'},
                {value:1044, name:'贵州'},
                {value:950, name:'江苏'},
                {value:820, name:'湖北'},
                {value:764, name:'福建'},
                {value:710, name:'陕西'},
                {value:707, name:'吉林'},
                {value:473, name:'新疆'},
                {value:461, name:'河北'},
                {value:308, name:'辽宁'},
                {value:273, name:'山西'},
                {value:217, name:'黑龙江'},
                {value:168, name:'天津'},
                {value:161, name:'上海'},
                {value:135, name:'海南'},
                {value:110, name:'青海'},
                {value:42, name:'西藏'},
                {value:42, name:'宁夏'},
                {value:494, name:'其他'}
            ]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
</script>

</body>

</html>