中国地图、散点图结合点击后显示当前城市数量 不显示经纬度坐标
 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. tomcat配置加密的连接器https

    对称加密:加密和解密用的是同样的密钥. 非对称加密:使用一对密钥,公钥和私钥,私钥只由一方保管,不能外泄:公钥可以发给任何请求它的人 那么得到公钥的一方怎么确定这个公钥是服务器发过来的呢? 这个就需要 ...

  2. php下intval()和(int)转换使用与区别

    没啥区别,一般用(int),另外还有 float, string, array 等 intval()而言,如果参数是字符串,则返回字符串中第一个不是数字的字符之前的数字串所代表的整数值.如果字符串第一 ...

  3. Volley源码分析

    取消请求的源码分析: public void cancelAll(RequestFilter filter) { synchronized (mCurrentRequests) { for (Requ ...

  4. 集成学习之Adaboost算法原理

    在boosting系列算法中,Adaboost是最著名的算法之一.Adaboost既可以用作分类,也可以用作回归. 1. boosting算法基本原理 集成学习原理中,boosting系列算法的思想:

  5. UDP打洞原理介绍

     NAT穿越模块的设计与实现 Internet的快速发展以及IPv4地址数量的不足使得NAT设备得到了大规模的应用,然而这也给越来越多的端到端通信也带来了不少的麻烦.一般来说,NAT设备允许内网内主机 ...

  6. Ubuntu16.04中安装VirtualBox及简单配置

    sudo apt-get -y install virtualbox 注:将该图表拖到桌面上即可 往下的过程都不变..... 将左边的菜单栏移动到下面 打开一个终端输入:gsettings set c ...

  7. apache thrift 入门(一)

    1.简介 Apache Thrift软件框架,是用来开发可扩展的跨语言的软件服务.通过软件堆栈和代码生成引擎相结合的方式来构建服务,使C++, Java, Python, PHP, Ruby, Erl ...

  8. C语言:“冒泡排序”与“二分法”

    1.冒泡排序: what:将元素进行两两比较,大的(小的)向后排. when:数组中有多个元素,需要进行比较排序比较的时候使用. how:N个数字来排队,两两比较小靠前.(升序) 外层循环:N-1(控 ...

  9. C++ vector的详细用法

    vector容器类型 vector容器是一个模板类,可以存放任何类型的对象(但必须是同一类对象).vector对象可以在运行时高效地添加元素,并且vector中元素是连续存储的.vector的构造 函 ...

  10. JS apply 、call和bind

    JS当中的call .apply.和bind 这三个方法都是js function当中自带的方法,用来改变this的指向. call()方法 语法格式: fun.call(thisArg[,arg1[ ...