Echart--百度地图(散点图)

2018-06-24 02:00:40来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

参考:http://blog.csdn.net/xieweikun7/article/details/52766676

1、首先,下载嘛

  Echarts  http://echarts.baidu.com/download.html

  百度地图  http://lbsyun.baidu.com/  >>>>  功能与服务>>>>地图>>>>获取密钥>>>>按提示操作

 

2、引入插件

1 <script type="text/javascript" src="echarts.min.js"></script>
2 <script type="text/javascript" src="bmap.js"></script> 
3 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=?"></script>      
  问号处是你获取的密钥
 
3、开始写js
  设置地图高度为宽的9/16,高度不能没有,没有高度地图显示不出来,高是多少你随意
  $('#statistics-map').height($('#statistics-map').width() * 8 / 16);
 
4、var geoCoordMap={‘北京市’: [116.395645, 39.929986],...}
  设置坐标经纬度Echarts实例就是写死的,我的也是写死的,要活的也行,在百度地图开发平台下载一个
  http://lbsyun.baidu.com/index.php?title=open/dev-res
  这是我能找到最全的,不过数据和var geoCoordMap{}不太一样,后面写方法的时候可以自己调
 
5、var data={}
  设置你的数据,当然了,写死也行,通过后台传值也行,但一定要有,毕竟没有数据就没有意义了
 
6、我的地图基本上是从Echart实例拷贝过来的,做了一点修改,符合自己的项目要求,其中的注释其实大多是英文的中文翻译,英语好的挑不懂的看
  1 var option = {
  2     title: {  //标题
  3         text: '',  
  4         subtext: '',  //副标题
  5         sublink: '',  //副标题链接
  6         left: 'center'  //标题位置,居中
  7     },
  8     tooltip: {  //工具提示
  9         trigger: 'item'     // 触发类型,默认数据触发,见下图,可选为:'item' | 'axis'
 10     },
 11     bmap: {  //百度地图的设置
 12         center: [106.23248, 37.48644],  //中心点
 13         zoom: 5,         //缩放       
 14         roam: true,      //漫游
 15         mapStyle: {  //地图样式
 16             styleJson: [{
 17                     "featureType": "water",  //水
 18                     "elementType": "all",    //feature是特征,element是元素
 19                     "stylers": {
 20                         "color": "#044161"
 21                     }
 22                 },
 23                 {
 24                     "featureType": "land",  //陆地
 25                     "elementType": "all",
 26                     "stylers": {
 27                         "color": "#004981"
 28                     }
 29                 },
 30                 {
 31                     "featureType": "boundary",  //边界
 32                     "elementType": "geometry",
 33                     "stylers": {
 34                         "color": "#064f85"
 35                     }
 36                 },
 37                 {
 38                     "featureType": "railway",  //铁路
 39                     "elementType": "all",
 40                     "stylers": {
 41                         "visibility": "off"
 42                     }
 43                 },
 44                 {
 45                     "featureType": "highway",  //高速及国道
 46                     "elementType": "geometry",  //几何(图形)
 47                     "stylers": {
 48                         "color": "#004981"
 49                     }
 50                 },
 51                 {
 52                     "featureType": "highway",  
 53                     "elementType": "geometry.fill",  //几何填充
 54                     "stylers": {
 55                         "color": "#005b96",
 56                         "lightness": 1
 57                     }
 58                 },
 59                 {
 60                     "featureType": "highway",
 61                     "elementType": "labels",    //标签
 62                     "stylers": {
 63                         "visibility": "off"
 64                     }
 65                 },
 66                 {
 67                     "featureType": "arterial",  //城市主路
 68                     "elementType": "geometry",
 69                     "stylers": {
 70                         "color": "#004981"
 71                     }
 72                 },
 73                 {
 74                     "featureType": "arterial",
 75                     "elementType": "geometry.fill",
 76                     "stylers": {
 77                         "color": "#00508b"
 78                     }
 79                 },
 80                 {
 81                     "featureType": "poi",  //定位
 82                     "elementType": "all",
 83                     "stylers": {
 84                         "visibility": "off"
 85                     }
 86                 },
 87                 {
 88                     "featureType": "green",  //绿地
 89                     "elementType": "all",
 90                     "stylers": {
 91                         "color": "#056197",
 92                         "visibility": "off"
 93                     }
 94                 },
 95                 {
 96                     "featureType": "subway",  //地铁
 97                     "elementType": "all",
 98                     "stylers": {
 99                         "visibility": "off"
100                     }
101                 },
102                 {
103                     "featureType": "manmade",//人造区域
104                     "elementType": "all",
105                     "stylers": {
106                         "visibility": "off"
107                     }
108                 },
109                 {
110                     "featureType": "local",//普通道路
111                     "elementType": "all",
112                     "stylers": {
113                         "visibility": "off"
114                     }
115                 },
116                 {
117                     "featureType": "arterial",
118                     "elementType": "labels",
119                     "stylers": {
120                         "visibility": "off"
121                     }
122                 },
123                 {
124                     "featureType": "boundary",
125                     "elementType": "geometry.fill",
126                     "stylers": {
127                         "color": "#029fd4"
128                     }
129                 },
130                 {
131                     "featureType": "building",  //建筑物
132                     "elementType": "all",
133                     "stylers": {
134                         "color": "#1a5787"
135                     }
136                 },
137                 {
138                     "featureType": "label",//标签
139                     "elementType": "all",
140                     "stylers": {
141                         "visibility": "off"
142                     }
143                 }
144             ]
145         }
146     },
147     series: [{  //展示数据的分类系列
148             name: '校友分布',  //名称
149             type: 'scatter',  //类型
150             coordinateSystem: 'bmap',  //坐标系,使用上面定义的bmap
151             data: {},  //数据,这里设置空,等请求后台传过来数据之后再赋上
152             symbolSize: function(val) {  //数据显示的符号的大小
153                 return val[2];  //直径?半径?长度
154             },
155             label: {  //标签
156                 normal: {
157                     formatter: '{b}',  //格式化
158                     position: 'right',  标签显示位置
159                     show: false    //是否显示
160                 },
161                 emphasis: {  //强调
162                     show: false
163                 }
164             },
165             itemStyle: {  //样式
166                 normal: {
167                     color: '#FFD700'
168                 }
169             }
170         },
171         {
172             name: 'Top 5',  //分类系列的第二类
173             type: 'effectScatter',
174             coordinateSystem: 'bmap',
175             data: {},
176             symbolSize: function(val) {
177                 return val[2] / 10;
178             },
179             showEffectOn: 'emphasis',
180             rippleEffect: {  //连锁反应
181                 brushType: 'stroke'
182             },
183             hoverAnimation: true,  //hover操作
184             label: {
185                 normal: {
186                     formatter: '{b}',
187                     position: 'right',
188                     show: true
189                 }
190             },
191             itemStyle: {
192                 normal: {
193                     color: '#f4e925',
194                     shadowBlur: 10,
195                     shadowColor: '#333'
196                 }
197             },
198             zlevel: 1  //层级
199         }
200     ]
201 };

 7、修改滑动操作后的显示格式,具体想显示什么样的格式,大家根据返回的数据来写,具体问题具体分析

 1     //官方实例tooltip  
 2     tooltip: {  
 3         trigger: 'item'  
 4     },  
 5 
 6 
 7     //我改后的
 8     tooltip: {
 9         trigger: 'item',
10         //在这里添加一个函数来返回改变原来的格式
11         formatter: function(data) {
12             return data.name + ":" + data.value[2];
13         }
14     },

8、没有效果图,自己可以在Echarts官网实例上试一下

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:回到顶部案例

下一篇:html制作简单框架网页 实现自己的音乐驿站 操作步骤及源文件下载