首页 > > 网页制作 > css >

Echart--百度地图（散点图）

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

参考：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     },