百度地图 echarts tooltip属性 经纬度坐标不显示

中国地图、散点图结合点击后显示当前城市数量 不显示经纬度坐标
  1 echarts.appMap = function (id, opt) {
  2     // 实例
  3     var chart = this.init(document.getElementById(id));
  4     // var curGeoJson = {};
  5     var cityMap = {
  6         "河南": "henan",
  7         "河北": "hebei",
  8         '北京': 'beijing',
  9         '天津': 'tianjin',
 10         '山西': 'sx',
 11         '内蒙古': 'neimenggu',
 12         '辽宁': 'liaoning',
 13         '吉林': 'jilin',
 14         '黑龙江': 'heilongjiang',
 15         '上海': 'shanghai',
 16         '江苏': 'jiangsu',
 17         '浙江': 'zhejiang',
 18         '安徽': 'anhui',
 19         '福建': 'fujian',
 20         '江西': 'jiangxi',
 21         '山东': 'shandong',
 22         '湖北': 'hubei',
 23         '湖南': 'hunan',
 24         '广东': 'guangdong',
 25         '广西': 'guangxi',
 26         '海南': 'hainan',
 27         '重庆': 'chongqing',
 28         '四川': 'sichuan',
 29         '贵州': 'guizhou',
 30         '云南': 'yunnan',
 31         '西藏': 'xizang',
 32         '陕西': 'shanxi',
 33         '甘肃': 'gansu',
 34         '青海': 'qinghai',
 35         '宁夏': 'ningxia',
 36         '新疆': 'xinjiang',
 37         '香港': 'hongkong',
 38         '澳门': 'macau',
 39         '台湾': 'taiwan'
 40     };
 41 
 42     var treeMap = {
 43         "河南": 410000,
 44         "河北": 130000,
 45         '北京': 110000,
 46         '天津': 120000,
 47         '山西': 140000,
 48         '内蒙古': 150000,
 49         '辽宁': 210000,
 50         '吉林': 220000,
 51         '黑龙江': 230000,
 52         '上海': 310000,
 53         '江苏': 320000,
 54         '浙江': 330000,
 55         '安徽': 340000,
 56         '福建': 350000,
 57         '江西': 360000,
 58         '山东': 370000,
 59         '湖北': 420000,
 60         '湖南': 430000,
 61         '广东': 440000,
 62         '广西': 450000,
 63         '海南': 460000,
 64         '重庆': 500000,
 65         '四川': 510000,
 66         '贵州': 520000,
 67         '云南': 530000,
 68         '西藏': 540000,
 69         '陕西': 610000,
 70         '甘肃': 620000,
 71         '青海': 630000,
 72         '宁夏': 640000,
 73         '新疆': 650000,
 74         '香港': 810000,
 75         '澳门': 820000,
 76         '台湾': 710000
 77     };
 78     var geoCoordMap = {
 79         '河南': [113.65, 34.76],
 80         '河北': [114.52, 38.05],
 81         '北京': [116.4, 39.9],
 82         '天津': [117.2, 39.12],
 83         '山西': [112.55, 37.87],
 84         '内蒙古': [111.73, 40.83],
 85         '辽宁': [123.43, 41.8],
 86         '吉林': [125.32, 43.9],
 87         '黑龙江': [126.53, 45.8],
 88         '上海': [121.47, 31.23],
 89         '江苏': [118.78, 32.07],
 90         '浙江': [120.15, 30.28],
 91         '安徽': [117.25, 31.83],
 92         '福建': [119.3, 26.08],
 93         '江西': [115.85, 28.68],
 94         '山东': [116.98, 36.67],
 95         '湖北': [114.3, 30.6],
 96         '湖南': [112.93, 28.23],
 97         '广东': [113.27, 23.13],
 98         '广西': [108.37, 22.82],
 99         '海南': [110.32, 20.03],
100         '重庆': [106.55, 29.57],
101         '四川': [104.07, 30.67],
102         '贵州': [106.63, 26.65],
103         '云南': [102.72, 25.05],
104         '西藏': [91.13, 29.65],
105         '陕西': [108.93, 34.27],
106         '甘肃': [103.82, 36.07],
107         '青海': [101.78, 36.62],
108         '宁夏': [106.28, 38.47],
109         '新疆': [87.62, 43.82],
110         '香港': [114.08, 22.2],
111         '澳门': [113.33, 22.13],
112         '台湾': [121.520, 25.03]
113     };
114     //level的三种水平  按等级给定每个等级颜色
115     // var levelColorMap = {
116     //     '1': 'rgba(0,255,255)',//蓝
117     //     '2': 'rgba(0,255,127)',//黄色
118     //     '3': 'rgba(255,0,255)'//红色
119 
120     // };
121 
122     var defaultOpt = {
123         mapName: 'china', // 地图展示
124         goDown: false, // 是否下钻
125         bgColor: '#404a59', // 画布背景色
126         activeArea: [], // 区域高亮,同echarts配置项
127         data: [],
128         // 下钻回调(点击的地图名、实例对象option、实例对象)
129         callback: function (cc, option, instance) {}
130     };
131 
132     // var ProvinceNames = [];    //类别数组(实际用来盛放X轴坐标值)
133     var TowerNumbers = []; //销量数组(实际用来盛放Y坐标值)
134     var provinceData = [];
135     var valMap = new Map();
136     //var sum  =0;
137     /*获取地图数据*/
138     $.ajax({
139         url: "../sdTree/showChildCountByTreeId.do",
140         type: "post",
141         dataType: "json",
142         data: {
143             id: 86
144         },
145         success: function (data) {
146             //请求成功时执行该函数内容,result即为服务器返回的json对象
147             if (data) {
148                 provinceData = [];
149                 avg = 1;
150                 sum = 0;
151                 // var sum = 0;
152                 var count = data.length;
153                 for (var i = 0; i < data.length; i++) {
154                     provinceData.push({
155                         name: data[i].ProvinceName,
156                         value: data[i].TowerNumber,
157                     })
158                     //sum+=data[i].TowerNumber;
159                     valMap.set(data[i].TowerNumber, i);
160                     // ProvinceNames.push(data[i].ProvinceName);    //挨个取出类别并填入类别数组
161                     TowerNumbers.push(data[i].TowerNumber); //挨个取出销量并填入销量数组
162 
163                     sum += data[i].TowerNumber;
164                     // console.log(sum)
165                 }
166 
167                 //console.log(ProvinceNames)
168                 myChart.setOption({ //加载数据图表
169                     title: {
170                         text: '各省市接地项目分布',
171                         subtext: '',
172                         x: 'center',
173                         textStyle: {
174                             color: '#000'
175                         }
176                     },
177                     tooltip: {
178                         trigger: 'item',
179                         // formatter: '{b}'+'{c}',
180                         trigger: 'item',
181                         formatter: function (params) {
182                             //判断是否有数量,若无数量,点击后只显示城市名
183                             if (typeof (params.value)[2] == "undefined") {
184                                 return params.name
185                             }
186                             //有数量时,显示城市和当前城市所做项目数
187                             else {
188                                 return params.name + ':' + params.value[2] //params.value[2]  取出value值中的第三个值  前两个值是经纬度,第三个值是数量
189                             }
190                         }
191                     },
192                     legend: {
193                         orient: 'vertical',
194                         y: 'bottom',
195                         x: 'right',
196                         data: ['sell_area'],
197                         textStyle: {
198                             color: '#fff'
199                         }
200                     },
201                     visualMap: {
202                         show: false,
203                         min: 0,
204                         max: 500,
205                         left: 'left',
206                         top: 'bottom',
207                         text: ['高', '低'], // 文本,默认为数值文本
208                         calculable: true,
209                         seriesIndex: [1],
210                         inRange: {
211                             // color: ['#3B5077', '#031525'] // 蓝黑
212                             // color: ['#ffc0cb', '#800080'] // 红紫
213                             // color: ['#3C3B3F', '#605C3C'] // 黑绿
214                             //color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
215                             // color: ['#23074d', '#cc5333'] // 紫红
216                             color: ['#339966'] // 蓝绿
217                         }
218                     },
219                     /**/
220                     geo: {
221                         show: true,
222                         map: opt.mapName,
223                         label: {
224                             normal: {
225                                 show: false
226                             },
227                             emphasis: {
228                                 show: false,
229                             }
230                         },
231                         roam: true, //是否拖动地图,鼠标滚轮控制地图大小
232                         // left: '10%',
233                         // center: [117.98561551896913, 31.205000490896193],
234                         zoom: 1, // 改变这个值的大小就可以了
235                         // data: convertData(provinceData),
236                         itemStyle: {
237                             normal: {
238                                 areaColor: '#4169E1',
239                                 borderColor: '#3B5077',
240                             },
241                             emphasis: {
242                                 areaColor: '#2B91B7',
243                             }
244                         }
245                     },
246 
247                     series: [
248 
249                         {
250                             showAllSymbol: true,
251                             type: 'map',
252                             map: 'china',
253                             geoIndex: 0,
254                             aspectScale: 0.75, //长宽比
255                             showLegendSymbol: false, // 存在legend时显示
256                             label: {
257                                 normal: {
258                                     show: false
259                                 },
260                                 emphasis: {
261                                     show: false,
262                                     textStyle: {
263                                         color: '#fff'
264                                     }
265                                 }
266                             },
267                             roam: true,
268                             itemStyle: {
269                                 normal: {
270                                     areaColor: '#031525',
271                                     borderColor: '#3B5077',
272                                 },
273                                 emphasis: {
274                                     areaColor: '#2B91B7'
275                                 }
276                             },
277                             animation: false,
278                             data: provinceData
279                         },
280                         {
281                             // name: '数量',
282                             type: 'scatter',
283                             coordinateSystem: 'geo',
284                             symbol: 'pin',
285                             symbolSize: function (val) {
286                                 return 30;
287                             },
288                             label: {
289                                 normal: {
290                                     show: true,
291                                     textStyle: {
292                                         color: '#fff',
293                                         fontSize: 9,
294                                     }
295                                 }
296                             },
297                             itemStyle: {
298                                 normal: {
299                                     color: '#32CD32', //标志颜色
300                                 }
301                             },
302                             encode: { //可以定义 data 的哪个维度被编码成什么
303                                 label: 2 // 表示 label 使用维度 3。
304                             },
305                             data: convertData(provinceData),
306                         },
307                     ],
308                 });
309             }
310 
311         },
312         //错误提示
313         error: function (XMLHttpRequest, textStatus, errorThrown) {
314 
315         },
316     })
317 
318 
319 
320     var convertData = function (data) {
321         var res = [];
322         for (var i = 0; i < data.length; i++) {
323             var geoCoord = geoCoordMap[data[i].name];
324 
325             if (geoCoord) {
326                 res.push({
327                     name: data[i].name,
328                     value: geoCoord.concat(data[i].value)
329                 });
330             }
331         }
332         return res;
333     };
334 
335     /*右侧图表的数据*/
336 
337     //从大到小排序
338     TowerNumbers.sort(function (a, b) {
339 
340         return b - a; //当其改为a-b时,下面的排序反转参数就要去掉
341     })
342 
343     var option = {};
344 
345     chart.setOption(option); //加载右侧图表数据
346     window.onresize = chart.resize; //地图大小自动适应浏览器
347 
348     return chart;
349 };
散点图+地图 tooltip不显示经纬度

 

参考了 https://gallery.echartsjs.com/editor.html?c=xBJDR584vG

最终的效果图:

 

posted @ 2019-08-06 11:43  贺小鸣  阅读(3192)  评论(0编辑  收藏  举报
为尊重他人劳动成果,转载/摘抄请标明来源!