百度地图 echarts tooltip属性 经纬度坐标不显示
echarts.appMap = function (id, opt) {
// 实例
var chart = this.init(document.getElementById(id));
// var curGeoJson = {};
var cityMap = {
"河南": "henan",
"河北": "hebei",
'北京': 'beijing',
'天津': 'tianjin',
'山西': 'sx',
'内蒙古': 'neimenggu',
'辽宁': 'liaoning',
'吉林': 'jilin',
'黑龙江': 'heilongjiang',
'上海': 'shanghai',
'江苏': 'jiangsu',
'浙江': 'zhejiang',
'安徽': 'anhui',
'福建': 'fujian',
'江西': 'jiangxi',
'山东': 'shandong',
'湖北': 'hubei',
'湖南': 'hunan',
'广东': 'guangdong',
'广西': 'guangxi',
'海南': 'hainan',
'重庆': 'chongqing',
'四川': 'sichuan',
'贵州': 'guizhou',
'云南': 'yunnan',
'西藏': 'xizang',
'陕西': 'shanxi',
'甘肃': 'gansu',
'青海': 'qinghai',
'宁夏': 'ningxia',
'新疆': 'xinjiang',
'香港': 'hongkong',
'澳门': 'macau',
'台湾': 'taiwan'
};
var treeMap = {
"河南": 410000,
"河北": 130000,
'北京': 110000,
'天津': 120000,
'山西': 140000,
'内蒙古': 150000,
'辽宁': 210000,
'吉林': 220000,
'黑龙江': 230000,
'上海': 310000,
'江苏': 320000,
'浙江': 330000,
'安徽': 340000,
'福建': 350000,
'江西': 360000,
'山东': 370000,
'湖北': 420000,
'湖南': 430000,
'广东': 440000,
'广西': 450000,
'海南': 460000,
'重庆': 500000,
'四川': 510000,
'贵州': 520000,
'云南': 530000,
'西藏': 540000,
'陕西': 610000,
'甘肃': 620000,
'青海': 630000,
'宁夏': 640000,
'新疆': 650000,
'香港': 810000,
'澳门': 820000,
'台湾': 710000
};
var geoCoordMap = {
'河南': [113.65, 34.76],
'河北': [114.52, 38.05],
'北京': [116.4, 39.9],
'天津': [117.2, 39.12],
'山西': [112.55, 37.87],
'内蒙古': [111.73, 40.83],
'辽宁': [123.43, 41.8],
'吉林': [125.32, 43.9],
'黑龙江': [126.53, 45.8],
'上海': [121.47, 31.23],
'江苏': [118.78, 32.07],
'浙江': [120.15, 30.28],
'安徽': [117.25, 31.83],
'福建': [119.3, 26.08],
'江西': [115.85, 28.68],
'山东': [116.98, 36.67],
'湖北': [114.3, 30.6],
'湖南': [112.93, 28.23],
'广东': [113.27, 23.13],
'广西': [108.37, 22.82],
'海南': [110.32, 20.03],
'重庆': [106.55, 29.57],
'四川': [104.07, 30.67],
'贵州': [106.63, 26.65],
'云南': [102.72, 25.05],
'西藏': [91.13, 29.65],
'陕西': [108.93, 34.27],
'甘肃': [103.82, 36.07],
'青海': [101.78, 36.62],
'宁夏': [106.28, 38.47],
'新疆': [87.62, 43.82],
'香港': [114.08, 22.2],
'澳门': [113.33, 22.13],
'台湾': [121.520, 25.03]
};
//level的三种水平 按等级给定每个等级颜色
// var levelColorMap = {
// '1': 'rgba(0,255,255)',//蓝
// '2': 'rgba(0,255,127)',//黄色
// '3': 'rgba(255,0,255)'//红色
// };
var defaultOpt = {
mapName: 'china', // 地图展示
goDown: false, // 是否下钻
bgColor: '#404a59', // 画布背景色
activeArea: [], // 区域高亮,同echarts配置项
data: [],
// 下钻回调(点击的地图名、实例对象option、实例对象)
callback: function (cc, option, instance) {}
};
// var ProvinceNames = []; //类别数组(实际用来盛放X轴坐标值)
var TowerNumbers = []; //销量数组(实际用来盛放Y坐标值)
var provinceData = [];
var valMap = new Map();
//var sum =0;
/*获取地图数据*/
$.ajax({
url: "../sdTree/showChildCountByTreeId.do",
type: "post",
dataType: "json",
data: {
id: 86
},
success: function (data) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (data) {
provinceData = [];
avg = 1;
sum = 0;
// var sum = 0;
var count = data.length;
for (var i = 0; i < data.length; i++) {
provinceData.push({
name: data[i].ProvinceName,
value: data[i].TowerNumber,
})
//sum+=data[i].TowerNumber;
valMap.set(data[i].TowerNumber, i);
// ProvinceNames.push(data[i].ProvinceName); //挨个取出类别并填入类别数组
TowerNumbers.push(data[i].TowerNumber); //挨个取出销量并填入销量数组
sum += data[i].TowerNumber;
// console.log(sum)
}
//console.log(ProvinceNames)
myChart.setOption({ //加载数据图表
title: {
text: '各省市接地项目分布',
subtext: '',
x: 'center',
textStyle: {
color: '#000'
}
},
tooltip: {
trigger: 'item',
// formatter: '{b}'+'{c}',
trigger: 'item',
formatter: function (params) {
//判断是否有数量,若无数量,点击后只显示城市名
if (typeof (params.value)[2] == "undefined") {
return params.name
}
//有数量时,显示城市和当前城市所做项目数
else {
return params.name + ':' + params.value[2] //params.value[2] 取出value值中的第三个值 前两个值是经纬度,第三个值是数量
}
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['sell_area'],
textStyle: {
color: '#fff'
}
},
visualMap: {
show: false,
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本,默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
// color: ['#3B5077', '#031525'] // 蓝黑
// color: ['#ffc0cb', '#800080'] // 红紫
// color: ['#3C3B3F', '#605C3C'] // 黑绿
//color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
// color: ['#23074d', '#cc5333'] // 紫红
color: ['#339966'] // 蓝绿
}
},
/**/
geo: {
show: true,
map: opt.mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: true, //是否拖动地图,鼠标滚轮控制地图大小
// left: '10%',
// center: [117.98561551896913, 31.205000490896193],
zoom: 1, // 改变这个值的大小就可以了
// data: convertData(provinceData),
itemStyle: {
normal: {
areaColor: '#4169E1',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [
{
showAllSymbol: true,
type: 'map',
map: 'china',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: provinceData
},
{
// name: '数量',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) {
return 30;
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: '#32CD32', //标志颜色
}
},
encode: { //可以定义 data 的哪个维度被编码成什么
label: 2 // 表示 label 使用维度 3。
},
data: convertData(provinceData),
},
],
});
}
},
//错误提示
error: function (XMLHttpRequest, textStatus, errorThrown) {
},
})
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;
};
/*右侧图表的数据*/
//从大到小排序
TowerNumbers.sort(function (a, b) {
return b - a; //当其改为a-b时,下面的排序反转参数就要去掉
})
var option = {};
chart.setOption(option); //加载右侧图表数据
window.onresize = chart.resize; //地图大小自动适应浏览器
return chart;
};
散点图+地图 tooltip不显示经纬度
参考了 https://gallery.echartsjs.com/editor.html?c=xBJDR584vG
最终的效果图:

百度地图 echarts tooltip属性 经纬度坐标不显示的更多相关文章
- 利用百度地图API,获取经纬度坐标
利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...
- 批量调用百度地图API获取地址经纬度坐标
1 申请密匙 注册百度地图API:http://lbsyun.baidu.com/index.php?title=webapi 点击左侧 “获取密匙” ,经过填写个人信息.邮箱注册等,成功之后在开放平 ...
- PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例
原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程序--> <!DOCTYPE html> <html&g ...
- IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息
IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息 /**当获取到定位的坐标后,回调函数*/ - (void)didUpdateBMKUserLocation:(BMKUserLocati ...
- Python调用百度地图API实现批量经纬度转换为实际省市地点(api调用,json解析,excel读取与写入)
1.获取秘钥 调用百度地图API实现得申请百度账号或者登陆百度账号,然后申请自己的ak秘钥.链接如下:http://lbsyun.baidu.com/apiconsole/key?applicatio ...
- 百度地图API,根据经纬度实现车辆移动轨迹绘制
百度地图,实现车辆轨迹绘制 实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连 ...
- js 调用百度地图,并且定位用户地址,显示省市区街,经纬度
网上的一些百度地图例子,基本上没有连套的 定位 例子.下面我分享一套我自己弄的,废话不多说,看代码,里面有注释! <!DOCTYPE html> <html> <head ...
- ArcEngine 地图导航 查找路径 经纬度坐标导航 最优路径分析
本文来自CSDN博客.转载请标明出处 http//blog.csdn.net/zdb330906531 需求:依据经纬度坐标.取得两个起点与终点,显示最优路径实现导航. 參考官方样例后.我在arcMa ...
- Android使用百度地图出现闪退及定位时显示蓝屏问题
目录 1.Android使用百度地图出现闪退 2.Android使用百度地图定位出现蓝屏问题 1.Android使用百度地图出现闪退 一般情况下出现闪退是在AndroidManifest.x ...
随机推荐
- 微信小程序 改变radio(单选钮)默认大小
/* 单选钮样式 */ radio { transform:scale(0.5); }
- flask-数据库 进阶
1. 级联操作 Cascade意为“级联操作”,就是在操作一个对象的同时,对相关的对象也执行某些操作.我们通过一个Post模型和Comment模型来演示级联操作,分别表示文章(帖子)和评论,两者为一对 ...
- LeetCode---Sort && Segment Tree && Greedy
307. Range Sum Query - Mutable 思路:利用线段树,注意数据结构的设计以及建树过程利用线段树,注意数据结构的设计以及建树过程 public class NumArray { ...
- (十三)C语言之break、continue
- mysql统计前24小时数据没有补0
SELECT t1. HOUR HOUR, COUNT(t2. HOUR) count FROM ( SELECT DATE_FORMAT( HOUR), '%y-%m-%d %H' ) HOUR F ...
- LC 245. Shortest Word Distance III 【lock, medium】
Given a list of words and two words word1 and word2, return the shortest distance between these two ...
- OGG 从Oracle备库同步数据至kafka
OGG 从Oracle备库同步数据至kafka Table of Contents 1. 目的 2. 环境及规划 3. 安装配置JDK 3.1. 安装jdk 3.2. 配置环境变量 4. 安装Data ...
- WARNING: inbound connection timed out (ORA-3136)
WARNING: inbound connection timed out (ORA-3136) WARNING: inbound connection timed out (ORA-3136) Ta ...
- flask 学习(三)
继续flask的学习.尝试了使用程序context这一部分: 而在hello.py文档的旁边发现新出现了hello.pyc,看来运行过程中也被编译成字节码文件了,也不清楚是在哪个步骤的,留着后面研究. ...
- python 中 __dict__函数的使用
class F: def __init__(self, name, age): self.name = name self.age = age obj = F('tom', 20)s = obj.__ ...