144 lines
7.3 KiB
PHP
144 lines
7.3 KiB
PHP
@extends('layouts.base')
|
||
<script src="{{static_url('js/echarts.js')}}" type="text/javascript"></script>
|
||
<script src="{{static_url('js/china.js')}}" type="text/javascript"></script>
|
||
@section('content')
|
||
@section('title', trans('手机归属地统计'))
|
||
|
||
<link href="{{static_url('yunshop/css/order.css')}}" media="all" rel="stylesheet" type="text/css"/>
|
||
|
||
<div class="w1200 m0a">
|
||
<script type="text/javascript" src="{{static_url('js/dist/jquery.gcjs.js')}}"></script>
|
||
<script type="text/javascript" src="{{static_url('js/dist/jquery.form.js')}}"></script>
|
||
<script type="text/javascript" src="{{static_url('js/dist/tooltipbox.js')}}"></script>
|
||
|
||
<div class="rightlist">
|
||
<!-- 新增加右侧顶部三级菜单 -->
|
||
<div class="panel panel-info">
|
||
<div class="panel-body">
|
||
<div class="card">
|
||
<div class="card-header card-header-icon" data-background-color="rose">
|
||
<i class="fa fa-bars" style="font-size: 24px;" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="card-content">
|
||
<h4 class="card-title">手机归属地统计</h4>
|
||
</div>
|
||
<div>
|
||
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
||
<div id="main" style="width: 1000px;height:1000px; margin: auto"></div>
|
||
<script type="text/javascript">
|
||
function randomData() {
|
||
return Math.round(Math.random()*500);
|
||
}
|
||
var provinceData = [
|
||
{name: '天津',value: 0 },
|
||
{name: '北京',value: 0 },
|
||
{name: '上海',value: 0 },{name: '重庆',value: 0 },
|
||
{name: '河北',value: 0 },{name: '河南',value: 0 },
|
||
{name: '云南',value: 0 },{name: '辽宁',value: 0 },
|
||
{name: '黑龙江',value: 0 },{name: '湖南',value: 0 },
|
||
{name: '安徽',value: 0 },{name: '山东',value: 0 },
|
||
{name: '新疆',value: 0 },{name: '江苏',value: 0 },
|
||
{name: '浙江',value: 0 },{name: '江西',value: 0 },
|
||
{name: '湖北',value: 0 },{name: '广西',value: 0 },
|
||
{name: '甘肃',value: 0 },{name: '山西',value: 0 },
|
||
{name: '内蒙古',value: 0 },{name: '陕西',value: 0 },
|
||
{name: '吉林',value: 0 },{name: '福建',value: 0 },
|
||
{name: '贵州',value: 0 },{name: '广东',value: 0 },
|
||
{name: '青海',value: 0 },{name: '西藏',value: 0 },
|
||
{name: '四川',value: 0 },{name: '宁夏',value: 0 },
|
||
{name: '海南',value: 0 },{name: '台湾',value: 0 },
|
||
{name: '香港',value: 0 },{name: '澳门',value: 0 },
|
||
];
|
||
var myData = JSON.parse('{!! $phone_map_data !!}');
|
||
provinceData.map(function(value,index){
|
||
var realData = myData.find(function(item){
|
||
|
||
return item.province == value.name;
|
||
});
|
||
|
||
if(realData){
|
||
provinceData[index] = {name:realData.province,value:realData.num};
|
||
}
|
||
});
|
||
|
||
var optionMap = {
|
||
backgroundColor: '#FFFFFF',
|
||
title: {
|
||
text: '全国地图大数据',
|
||
subtext: '',
|
||
x:'center'
|
||
},
|
||
tooltip : {
|
||
trigger: 'item'
|
||
},
|
||
|
||
//左侧小导航图标
|
||
visualMap: {
|
||
show : true,
|
||
x: 'left',
|
||
y: 'center',
|
||
splitList: [
|
||
{start: 500},{start: 400, end: 500},
|
||
{start: 300, end: 400},{start: 200, end: 300},
|
||
{start: 100, end: 200},{start: 0, end: 100},
|
||
],
|
||
color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
|
||
},
|
||
|
||
//配置属性
|
||
series: [{
|
||
name: '数据',
|
||
type: 'map',
|
||
mapType: 'china',
|
||
roam: true,
|
||
label: {
|
||
normal: {
|
||
show: true //省份名称
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
data:provinceData //数据
|
||
}]
|
||
};
|
||
//初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
//使用制定的配置项和数据显示图表
|
||
myChart.setOption(optionMap);
|
||
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel panel-default">
|
||
<div class=" order-info">
|
||
<div class="table-responsive">
|
||
<table class='table order-title table-hover table-striped'>
|
||
<thead>
|
||
<tr>
|
||
<th><h5>省市</h5></th>
|
||
<th><h5>会员数量</h5></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach($phone_data as $row)
|
||
<tr>
|
||
<td>{{ $row['province']?:未知 }}</td>
|
||
<td>{{ $row['num'] }}</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/javascript" src="{{static_url('js/area/cascade_street.js')}}"></script>
|
||
@endsection
|