| xqd
@@ -2,6 +2,8 @@
|
|
|
|
|
|
@section('content')
|
|
|
<script type="text/javascript" src="/base/js/echarts.min.js"></script>
|
|
|
+ <script type="text/javascript" src="/base/js/bmap.min.js"></script>
|
|
|
+ <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ilwzGs0qcpFhGZz0lkMtHR81edFj08L8"></script>
|
|
|
<style>
|
|
|
.statistical {
|
|
|
|
| xqd
@@ -214,6 +216,7 @@
|
|
|
.index_info_box {width:60px;}
|
|
|
</style>
|
|
|
<div class="wrapper wrapper-content">
|
|
|
+ <div id="container_map" style="height: 300px;background-color: red;"></div>
|
|
|
<div class="switch">
|
|
|
<div id="7">7天</div>
|
|
|
<div id="15" class="active_switch">15天</div>
|
| xqd
@@ -296,7 +299,6 @@
|
|
|
areaStyle: {}
|
|
|
}]
|
|
|
};
|
|
|
- ;
|
|
|
if (option && typeof option === "object") {
|
|
|
myChart.setOption(option, true);
|
|
|
}
|
| xqd
@@ -325,5 +327,213 @@
|
|
|
$(document).ready(function(){
|
|
|
$('#7').click();
|
|
|
})
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ var data = "{{ $data }}";
|
|
|
+ data = JSON.parse(data.replace(/"/g,'\"'));
|
|
|
+ var geoCoordMap = "{{ $geoCoordMap }}";
|
|
|
+ geoCoordMap = JSON.parse(geoCoordMap.replace(/"/g,'\"'));
|
|
|
+ var dom_map = document.getElementById("container_map");
|
|
|
+ var myChart_map = echarts.init(dom_map);
|
|
|
+ var app = {};
|
|
|
+ option = null;
|
|
|
+
|
|
|
+
|
|
|
+ var convertData = function (data) {
|
|
|
+ var res = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ var geoCoord = geoCoordMap[data[i].name];
|
|
|
+ if (geoCoord) {
|
|
|
+ res.push({
|
|
|
+ name: data[i].name,
|
|
|
+ value: geoCoord.concat(data[i].value)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ };
|
|
|
+
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: '全国经销商分布图',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip : {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ tooltip : {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: function(data){
|
|
|
+ //console.log(data)
|
|
|
+ return data.name+': '+data.value[2];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ bmap: {
|
|
|
+ center: [104.114129, 37.550339],
|
|
|
+ zoom: 5,
|
|
|
+ roam: true,
|
|
|
+ mapStyle: {
|
|
|
+ styleJson: [{
|
|
|
+ 'featureType': 'water',
|
|
|
+ 'elementType': 'all',
|
|
|
+ 'stylers': {
|
|
|
+ 'color': '#d1d1d1'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'land',
|
|
|
+ 'elementType': 'all',
|
|
|
+ 'stylers': {
|
|
|
+ 'color': '#f3f3f3'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'railway',
|
|
|
+ 'elementType': 'all',
|
|
|
+ 'stylers': {
|
|
|
+ 'visibility': 'off'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'highway',
|
|
|
+ 'elementType': 'all',
|
|
|
+ 'stylers': {
|
|
|
+ 'color': '#fdfdfd'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'highway',
|
|
|
+ 'elementType': 'labels',
|
|
|
+ 'stylers': {
|
|
|
+ 'visibility': 'off'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'arterial',
|
|
|
+ 'elementType': 'geometry',
|
|
|
+ 'stylers': {
|
|
|
+ 'color': '#fefefe'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'arterial',
|
|
|
+ 'elementType': 'geometry.fill',
|
|
|
+ 'stylers': {
|
|
|
+ 'color': '#fefefe'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'poi',
|
|
|
+ 'elementType': 'all',
|
|
|
+ 'stylers': {
|
|
|
+ 'visibility': 'off'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'green',
|
|
|
+ 'elementType': 'all',
|
|
|
+ 'stylers': {
|
|
|
+ 'visibility': 'off'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'subway',
|
|
|
+ 'elementType': 'all',
|
|
|
+ 'stylers': {
|
|
|
+ 'visibility': 'off'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'manmade',
|
|
|
+ 'elementType': 'all',
|
|
|
+ 'stylers': {
|
|
|
+ 'color': '#d1d1d1'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'local',
|
|
|
+ 'elementType': 'all',
|
|
|
+ 'stylers': {
|
|
|
+ 'color': '#d1d1d1'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'arterial',
|
|
|
+ 'elementType': 'labels',
|
|
|
+ 'stylers': {
|
|
|
+ 'visibility': 'off'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'boundary',
|
|
|
+ 'elementType': 'all',
|
|
|
+ 'stylers': {
|
|
|
+ 'color': '#fefefe'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'building',
|
|
|
+ 'elementType': 'all',
|
|
|
+ 'stylers': {
|
|
|
+ 'color': '#d1d1d1'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ 'featureType': 'label',
|
|
|
+ 'elementType': 'labels.text.fill',
|
|
|
+ 'stylers': {
|
|
|
+ 'color': '#999999'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series : [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'scatter',
|
|
|
+ coordinateSystem: 'bmap',
|
|
|
+ data: convertData(data),
|
|
|
+ symbolSize: function (val) {
|
|
|
+ return val[2] / 10;
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: '{b}',
|
|
|
+ position: 'right',
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'purple'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Top 5',
|
|
|
+ type: 'effectScatter',
|
|
|
+ coordinateSystem: 'bmap',
|
|
|
+ data: convertData(data.sort(function (a, b) {
|
|
|
+ return b.value - a.value;
|
|
|
+ }).slice(0, 6)),
|
|
|
+ symbolSize: function (val) {
|
|
|
+ return val[2] / 10;
|
|
|
+ },
|
|
|
+ showEffectOn: 'render',
|
|
|
+ rippleEffect: {
|
|
|
+ brushType: 'stroke'
|
|
|
+ },
|
|
|
+ hoverAnimation: true,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: '{b}',
|
|
|
+ position: 'right',
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'purple',
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: '#333'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ zlevel: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };;
|
|
|
+ if (option && typeof option === "object") {
|
|
|
+ myChart_map.setOption(option, true);
|
|
|
+ }
|
|
|
</script>
|
|
|
@endsection
|