效果图如下:

实现大致思路:

引入echarts最新版本,还有china.json,以及地级市坐标,(因为产品需求中不考虑省份,只考虑各个地级市),echarts官网已经不让下载地图了,网上很多地级市坐标不全,格式又不是想要的,没办法只能自己整理了;地级市坐标会放在下一篇文章中;

var bg_echarts_map = echarts.init(document.getElementById('bg_echarts_map')); //地图
//获取地图相关数据
function getMapData(){
$.ajax({
url: '/assets/statuserpercity',
type: 'get',
data: { },
success: function (res) {
var res = typeof res == 'object' ? res : JSON.parse(res);
if (res.result == 1) {
var arr = [];
if(res.data){
   var cityData = res.data.data.statUserPerCity;
   for(var i in cityData){
       arr.push({
                                        name: cityData[i].city.replace(/市/g, '').replace(/辖区/g, '').replace(/地区/g, ''),
                                        value: cityData[i].uv,
id: cityData[i].cityId,
                                    });
                                }
setMap(arr);
cityAllData = arr;
                             }
}
},
error: function (res) {
console.log(res);
}
})
}
 
//地图
            function setMap(data) {
             var cityObj = [];
var sum = 0;
             for(var i in cityJson ){
             cityObj.push({name: cityJson[i].properties.name ,cp: cityJson[i].properties.cp});
             }
for (var i = 0; i < data.length; i++) {
for(var j = 0; j < cityObj.length; j++){
if(data[i].name == cityObj[j].name){
sum += data[i].value;
}
}
}
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
for(var j = 0; j < cityObj.length; j++){
if(data[i].name == cityObj[j].name){
var geoCoord = cityObj[j].cp;
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
}
}
return res;
};
var optionMap = {
tooltip:{
padding: 0,
enterable:true,
transitionDuration:1,
textStyle : {
color: '#000',
decoration: 'none',
},
formatter: function () {
var tipHtml = '';
if(tootilpData.probeRtUserInfo){
tipHtml = ' <div class="tooltip" style="word-wrap:break-word; white-space:pre-wrap !important;">'+
'<div class="horn">'+
'<div class="lt"></div>'+
'<div class="rb"></div>'+
'</div>'+
'<div class="phoneData">'+'用户'+tootilpData.probeRtUserInfo.phone+'在'+tootilpData.probeRtUserInfo.address+'联网成功</div>'+
'</div>';
}
if(tootilpData.wiproRtUserInfo){
tipHtml = ' <div class="tooltip">'+
'<div class="horn">'+
'<div class="lt"></div>'+
'<div class="rb"></div>'+
'</div>'+
'<div class="imgData">'+
'<img class="tooltip_img" src='+tootilpData.wiproRtUserInfo.picId+'>'+
' <div class="tooltip_text">'+
'<span class="tooltip_text_span"><i>'+tootilpData.wiproRtUserInfo.gender+'</i>,<i>'+tootilpData.wiproRtUserInfo.age+'岁</i></span>'+
'<span class="tooltip_text_span2">到达'+tootilpData.wiproRtUserInfo.city+'的'+tootilpData.wiproRtUserInfo.shopName+'</span>'+
'</div>'+
'</div>'+
'</div>';
}
return tipHtml;
}
},
geo: {
map: 'china',
show: true,
roam: false,
layoutCenter: ['50%','50%'],
layoutSize: '127%',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#0266b4',
shadowColor: '#0266b4',
shadowBlur: 20
},
},
emphasis: {
itemStyle: {
areaColor: 'transparent',
}
},
},
series: [
{
name: '前30',
type: 'effectScatter',
coordinateSystem: 'geo',
hoverAnimation: false,
legendHoverLink: false,
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 31)),
symbolSize: function (val) {
return val[2] / sum * 300
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
itemStyle: {
normal: {
color: '#2fb6a5',
shadowBlur: 10,
shadowColor: '#31b8a6'
},
emphasis: {
show: false,
color: '#03FCDE'
}
},
zlevel: 0,
silent: true,
},
{
name: '城市',
type: 'scatter',
coordinateSystem: 'geo',
zoom: 2,
data: convertData(data),
legendHoverLink: false,
symbolSize: function (val) {
var a = val[2] / sum * 300;
if(a < 5){
a=5;
}
return a;
},
itemStyle: {
normal: {
color: '#2fb6a5',
},
emphasis: {
show: false,
color: '#03FCDE'
}
},
zlevel: 1,
silent: true,
},
]
};
bg_echarts_map.setOption(optionMap, true);
 
            }
 
//获取弹框气泡数据
function getAlertData (data){
$.ajax({
url: '/assets/wiprortuserinfo',
type: 'get',
async: false,
data: { },
success: function (res) {
var res = typeof res == 'object' ? res : JSON.parse(res);
if (res.result == 1) {
var apData = res.data;
if(apData){
if(apData.data.probeRtUserInfo){
apData.data.probeRtUserInfo.phone = apData.data.probeRtUserInfo.phone ? apData.data.probeRtUserInfo.phone.substr(0,3)+"****"+apData.data.probeRtUserInfo.phone.substr(7) : apData.data.probeRtUserInfo.phone;
apData.data.probeRtUserInfo.address = apData.data.probeRtUserInfo.city+'的'+apData.data.probeRtUserInfo.shopName;
apData.data.probeRtUserInfo.address = apData.data.probeRtUserInfo.address.length > 19 ? apData.data.probeRtUserInfo.address.substring(0,19)+'...' : apData.data.probeRtUserInfo.address;
tootilpData = apData.data;
}
if(apData.data.wiproRtUserInfo){
apData.data.wiproRtUserInfo.gender = apData.data.wiproRtUserInfo.gender == 'f' ? '女' : '男';
tootilpData = apData.data;
}
for(var i in data){
if(apData.data.probeRtUserInfo){
if(data[i].id == apData.data.probeRtUserInfo.cityId){
dataIndex = i;
}
}
if(apData.data.wiproRtUserInfo){
if(data[i].id == apData.data.wiproRtUserInfo.cityId){
dataIndex = i;
}
}
}
if(dataIndex !== null){
bg_echarts_map.dispatchAction({
type: 'downplay',
seriesIndex: 1,
});
bg_echarts_map.dispatchAction({
type: 'highlight',
seriesIndex: 1,
dataIndex: dataIndex
});
bg_echarts_map.dispatchAction({
type: 'hideTip',
seriesIndex: 1,
});
bg_echarts_map.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: dataIndex
});
}
}else{
bg_echarts_map.dispatchAction({
type: 'downplay',
seriesIndex: 1,
});
bg_echarts_map.dispatchAction({
type: 'hideTip',
seriesIndex: 1,
});
}
}
},
error: function (res) {
console.log("error...");
}
})
}

echarts地图散点高亮弹框制作的更多相关文章

  1. 3.0+百度地图在地图初始化的时候就弹框展示一个信息框,而不是用户点击poi时才弹出

    有些时候我们会有这样的业务:当用户根据地址跳转到地图后,希望能够立即弹框展示该poi的地址信息. 实现方法: 百度地图3.0+的类BaiduMap中提供了一个方法showInfoWindow(Info ...

  2. 弹框内画echarts图dom元素无法获取的问题

    弹框内画echarts图dom元素无法获取的问题? 什么意思呢?就是当我们打开弹框之后,此时要画eachars图,可是echarts图的容器dom此时为null, 因此我们需要做的就是在dom元素获取 ...

  3. 【04】openlayers 地图弹框

    效果: 创建地图: //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection: 'EPSG:4326', //投 ...

  4. Unity3D之Ugui 制作弹框

    创建一个UI控件. 这里通过按钮的点击取控制弹框的显示或者隐藏.给按钮Button绑定一个脚本. 将Panel初始化设置为隐藏.就可以实现了. using UnityEngine; using Sys ...

  5. onload + setTimeout 用法,制作广告弹框效果

    一般来说,只有 <body>,<img>, <link>, <script>,<frame>, <frameset>, < ...

  6. 十四、制作优美的div弹框

    功能描述:确认[调整按钮]弹出精美div弹框 1.jsp页面:perfectAlertDiv.jsp <%@ page contentType="text/html;charset=U ...

  7. 制作一个简单的toast弹框

    toast弹框的作用 toast弹框顾名思义,就是为了弹出一个提示框,效果如图: 使用toast弹框可以可用户带来更好的交互体验 toast弹框的使用 Toast组件 制做出toast的样式以及出现的 ...

  8. popover带箭头弹框

    我们先来看一下效果吧: 分析:这个带箭头的弹框其实是一个控制器,通过Modal方式展现,但跟传统模态方式效果不一样,我们一眼就能看出. Xib方式实现popover: 1.segue的时候选择Pres ...

  9. Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据

    在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...

随机推荐

  1. QT创建TCP Socket通信

    最近在学习QT,了解到QT可以进行SOCKET网络通信,进行学习,并建立一个简单的聊天DEMO.为了测试是否能与VS2012下的程序进行通信,在VS2012下建立一个客户端程序,进行通信测试,发现可以 ...

  2. 提交SR的一些小技巧

    在平时的时候,遇到一些问题总会在metalink上提交SR(Service Request,SR,过去也叫Technical Assistance Request,TAR ),我们提交sr的时候,总是 ...

  3. 实体关系图应用——google ads

    实体关系 本页展示了 AdWords 实体的关系图,其中的可点击图片可帮助您找到最合适的文档. 表示法图例 实体:链接到相关性最高的指南. 基数:允许的实例数量.例如,1..\* 表示允许一个或多个. ...

  4. HDFS初次编程

    hadoop是用Java语言实现的开源软件框架,可以支持多种语言,我学习的时候用得自然就是Java了. 在开始编程之前需要做一些配置工作: Hadoop开发:Hadoop为HDFS和Mapreduce ...

  5. 组合,多态与多态性,封装以及property装饰器介绍

    一:组合: 什么是组合:组合指的是某一个对象拥有一个属性,该属性的值是另外一个类的对象. 为何要用组合:通过为某一个对象添加属性(属性的值是另外一个类的对象)的方式,可以间接地将两个类关联/整合/组合 ...

  6. 元注解——java.lang.annotation.Target(1.8)

    参考资料:https://docs.oracle.com/javase/8/docs/api/java/lang/annotation/Target.html 普通注解’只能用来注解’代码’,而’元注 ...

  7. spring-data-jpa——如果使用了one-to-many,many-to-one的注解,在Jackson进行json字符串化时出现错误的解决方案

    参考资料: http://blog.csdn.net/remote_roamer/article/details/51330843 http://blog.csdn.net/xiaodaiye/art ...

  8. collections.deque

    d = collections.deque([])  # 创建双端队列d.append('a') # 在最右边添加一个元素,此时 d=deque('a')d.appendleft('b') # 在最左 ...

  9. 英语发音规则---I字母常见发音组合有哪些

    英语发音规则---I字母常见发音组合有哪些 一.总结 一句话总结: I/y在开音节中发/aɪ/,例如:bite /baɪt/ n. 咬 I/y在闭音节中发 /ɪ/,例如:clinic /'klɪnɪk ...

  10. IDEA-------破解方法

    ① 到这个地方下载 IntelliJ IDEA 注册码:http://idea.lanyus.com/  就是这个jar包:JetbrainsCrack-2.6.10-release-enc.jar ...