中国地图、散点图结合点击后显示当前城市数量 不显示经纬度坐标
 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属性 经纬度坐标不显示的更多相关文章

  1. 利用百度地图API,获取经纬度坐标

    利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...

  2. 批量调用百度地图API获取地址经纬度坐标

    1 申请密匙 注册百度地图API:http://lbsyun.baidu.com/index.php?title=webapi 点击左侧 “获取密匙” ,经过填写个人信息.邮箱注册等,成功之后在开放平 ...

  3. PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例

    原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程序--> <!DOCTYPE html> <html&g ...

  4. IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息

    IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息 /**当获取到定位的坐标后,回调函数*/ - (void)didUpdateBMKUserLocation:(BMKUserLocati ...

  5. Python调用百度地图API实现批量经纬度转换为实际省市地点(api调用,json解析,excel读取与写入)

    1.获取秘钥 调用百度地图API实现得申请百度账号或者登陆百度账号,然后申请自己的ak秘钥.链接如下:http://lbsyun.baidu.com/apiconsole/key?applicatio ...

  6. 百度地图API,根据经纬度实现车辆移动轨迹绘制

    百度地图,实现车辆轨迹绘制 实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连 ...

  7. js 调用百度地图,并且定位用户地址,显示省市区街,经纬度

    网上的一些百度地图例子,基本上没有连套的 定位 例子.下面我分享一套我自己弄的,废话不多说,看代码,里面有注释! <!DOCTYPE html> <html> <head ...

  8. ArcEngine 地图导航 查找路径 经纬度坐标导航 最优路径分析

    本文来自CSDN博客.转载请标明出处 http//blog.csdn.net/zdb330906531 需求:依据经纬度坐标.取得两个起点与终点,显示最优路径实现导航. 參考官方样例后.我在arcMa ...

  9. Android使用百度地图出现闪退及定位时显示蓝屏问题

     目录 1.Android使用百度地图出现闪退 2.Android使用百度地图定位出现蓝屏问题     1.Android使用百度地图出现闪退 一般情况下出现闪退是在AndroidManifest.x ...

随机推荐

  1. 微信小程序 改变radio(单选钮)默认大小

    /* 单选钮样式 */ radio { transform:scale(0.5); }

  2. flask-数据库 进阶

    1. 级联操作 Cascade意为“级联操作”,就是在操作一个对象的同时,对相关的对象也执行某些操作.我们通过一个Post模型和Comment模型来演示级联操作,分别表示文章(帖子)和评论,两者为一对 ...

  3. LeetCode---Sort && Segment Tree && Greedy

    307. Range Sum Query - Mutable 思路:利用线段树,注意数据结构的设计以及建树过程利用线段树,注意数据结构的设计以及建树过程 public class NumArray { ...

  4. (十三)C语言之break、continue

  5. mysql统计前24小时数据没有补0

    SELECT t1. HOUR HOUR, COUNT(t2. HOUR) count FROM ( SELECT DATE_FORMAT( HOUR), '%y-%m-%d %H' ) HOUR F ...

  6. 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 ...

  7. OGG 从Oracle备库同步数据至kafka

    OGG 从Oracle备库同步数据至kafka Table of Contents 1. 目的 2. 环境及规划 3. 安装配置JDK 3.1. 安装jdk 3.2. 配置环境变量 4. 安装Data ...

  8. WARNING: inbound connection timed out (ORA-3136)

    WARNING: inbound connection timed out (ORA-3136) WARNING: inbound connection timed out (ORA-3136) Ta ...

  9. flask 学习(三)

    继续flask的学习.尝试了使用程序context这一部分: 而在hello.py文档的旁边发现新出现了hello.pyc,看来运行过程中也被编译成字节码文件了,也不清楚是在哪个步骤的,留着后面研究. ...

  10. python 中 __dict__函数的使用

    class F: def __init__(self, name, age): self.name = name self.age = age obj = F('tom', 20)s = obj.__ ...