echarts地图的问题。地图刷新点击事件重复
 var myChart = echarts.init(document.getElementById('map'));
 var option = {  
      title: {  
       text : '重庆市脱贫地区分布总览',  
       subtext : '当前区域信息',
       top:'20',
       textStyle: {
            fontSize: 18,
            color: '#333'          // 主标题文字颜色
        }
      },  
      series: [  
        {  
        name: '数据名称',  
        type: 'map',  
        mapType: '重庆', 
        top:'65',
        zoom:1.1, 
        selectedMode : 'single',  

            label: {
                        normal: {
                            show: true,//显示省份标签
                            textStyle:{color:"#fbfdfe"}//省份标签字体颜色
                        },    
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,
                            textStyle:{color:"#323232"}
                        } 
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: .5,//区域边框宽度
                            borderColor: '#0550c3',//区域边框颜色
                            areaColor:"#4ea397",//区域颜色

                        },

                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor:"#ece39e",
                        }
                    }, 

        }]  
      };  
myChart.setOption(option);   

myChart.on('click', function (params) {//点击事件
        if (params.componentType === 'series') {
             var provinceName =params.name;
             $('#box').css('display','block');
             $("#box-title").html(provinceName);

            }
});

在一个div中放的是echarts地图,有点击事件,页面会每隔一段时间生成一个新的底图,但是在点击的时候会把以前的点击事件里面的弹框内容给弹出。会反复叠加弹出很多框。。问大神怎么解决

0

5个回答

html中对按钮绑定点击事件的时候也遇到你这样的问题,明明只是绑定一个方法 ,为什么会走好几遍。
后来把$("#id").bind("click",function(){ ... }) 改成 $("#id").unbind('click').bind("click",function(){ ... })
这样成功了 你照这个思路修改一下 看看还有没有效果

0

没见你怎么更新的,click只需要绑定一次就行了吧,更新数据的时候不需要再myChart.on('click'绑定,一定要执行绑定,先off掉原来的

 myChart.off('click');
myChart.on('click'...............
1
qq_29994541
Jwen116 正解
9 个月之前 回复

可能是你创建的myChart对象,没有调用dispose()方法给kill掉,刷新后有很多对象

1
qq_27794403
残炎黯然 感谢老铁
10 个月之前 回复

2种方案
1 像楼上说的
//先解除以前绑定的click事件
myChart.off('click');
//再绑定新的点击事件
myChart.on('click', function (params) {

});
2 点击事件只绑定一次 , 把绑定点击事件的方法提出来 . 不要重复执行 下面这段代码.
myChart.on('click', function (params) {

});

1

你点击事件是在更新函数里面写的吗?

应该是重复绑定造成的,你在绑定点击事件之前先解绑下.unbind('click').on()

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts 地图点击事件问题
有个需求,在同一个div里面放置多个地图(切换页面按钮,该div的地图随之变化为相应数据的地图) 发现有个问题就是每个地图都设置了点击事件。然后无论切换到那个地图,都会响应前一个地图的相应事件!!! 找了一下网上的说法,说要先清除点击事件,然后设置点击事件。 myChart.off('click'); myChart.on('click', function(){ // d...
echarts3.0--地图和其点击事件及地图内文字内容样式位置控制
echarts的很多属性在不同的图中都是共用的,在本文中没有找到想要的,可以在我博客其他关于echarts3中看看,可能就找到了。 准备工作: ①到echarts3(注意是echarts3,不是echarts2)官方下载echarts或者自定义下载,下载地址:http://echarts.baidu.com/download.htm ②准备地图的坐标文件,就是本文示例中引用的
echarts动态生成图片绘制在地图上,同时实现图片的点击事件
**项目需求:**根据后台数据,生成pie,并绘制在地图上,点击pie时实现点击事件。 一开始在div内生成echarts饼图,再通过经纬度将div放在指定位置,但是div的范围内地图自身的滚轮和双击事件失效,几经周折,找到了另一种解决方案:将div内的echarts饼图以图片的形式输出,隐藏掉当前div,再将图片通过经纬度绘制在地图上。当点击时,通过hitTest()判断是点击在地图上还是图片上...
echarts 地图的点击事件 触发了两次
重点的代码是fireChart.off("click"); 在给ehcart绑定事件时,要先写上以上代码。
echarts 3D地图,地图区域点击触发事件
echarts 3D地图,地图区域点击触发事件,3d地图加数据
echarts 3D地图区域点击触发事件
搞了一天也没解决echart 3d地图点击区域事件响应,现在把成果共享给大家,csdn里面很多下载,但都不能解决问题 常规方法为: myChart.on('click',function(e){ funcOnClick(e); }); 修改为: myChart.getZr().on('click',function(e){ funcOnClick(e); }); 地图上的点击事件分为数据区域和非数...
Echarts3里的地图标记点事件效果实现
echarts官方api:http://echarts.baidu.com/index.html
echarts 3D地图,地图区域点击触发事件
echarts 3D地图,地图区域点击触发事件,3d地图加数据
echarts地图如何实时刷新散点
                                                       每天学习一点点,进步一点点,努力给自己、给我爱的人一个更好的未来!                                                                                                              ...
echarts 全国地图 点击地图上的点,打开超链接 地图点击事件
echarts 全国地图 点击地图上的点,打开超链接 ,地图点击事件
echart地图点击事件使用一例
公司准备在旅博会来一发,做几张炫酷的报表,打算用echart,demo里有一张迁徙图比较符合需求  改造开始:在地图上标注一些地点,鼠标经过展示一张报表 1、修改浮层提示为图片 tooltip就是鼠标放在地图上显示的浮层提示 自定义提示需要修改formatter option = { tooltip : { trigger: ‘item‘, for
ECharts中国地图篇-名称经纬度调整
一、 网址: http://echarts.baidu.com/download.html 点击: 完整 下载文件: echarts.min.js网址: http://echarts.baidu.com/download-map.html 点击: 中国地图 - JS 下载文件:
关于Echarts渲染地图(不创建地图实例)如何修改基础配置的方法
今天想分享下百度地图的心得,我也是一个新手,若有什么不对的或者说错了的地方,还请大家多评论告诉我!废话不多说了,进入正题。        关于地图修改基础配置的方法大致上百度都能搜到,最常见莫过于创建实例然后进行各种参数配置。第一种 创建实例方法如下:            var map = new BMap.Map("container");                    
echarts点击地图弹出地名
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="main" style=&qu
Echarts中mapselected事件的引用
var option = { title : { text : '企业对外投资分布图', left : 'center' }, tooltip : { trigger : 'item' }, legend : { orient : 'vertical', left : 'left', data : ['北京','上海',...
echarts的重复绑定事件
在用echarts结合react制作图表,在柱状图是需要点击一栏之后调用后台数据,渲染一个数据表格,开始直接使用histogram.on绑定事件,但出现点击一次之后连续触发多次回调,调查原因之后发现是事件绑定多次的坑;histogram.setOption(option); histogram.on("mouseover", function (params) { ...
echarts+bmap地图去掉底图可点功能
之前一篇echarts+百度地图API实现自定义底图后,这次测试提出了bug:地图上的点可点击,弹出地点信息。于是开始研究如何去掉底图可点的功能。上网搜索无果后,还是自己研究吧。  首先确定这个底图是地图提供而非Echarts,所以去百度地图查看API,发现在初始化Map的时候设置一个配置即可实现:enableMapClick:boolean。但是地图初始化是在echarts中进行的,所以
南京市GeoJson地图,echarts数据绑定,地区点击事件
南京市GeoJson地图和echarts各区数据绑定,各地区点击事件
vue 项目引入 echarts 添加点击事件
main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts vue文件中 _this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar')) _this.calendarChart.on...
Echarts地图点击省份能跳转到相应的页面,并解决了在支付宝和微信内置浏览器地图不能手控制放大的问题,叮~
本人所在的公司接触到Echarts比较多,上次领导要求公司支付宝生活号上加上地图显示统计,一定要能手控制大小,上网搜了好多资料一都不行,后来发现在谷歌浏览器运行的时候会显示不安全脚本,于是搜索了加载Echarts地图的时候解决不安全脚本的方法,就解决了上述的问题,耶~~~~ <!DOCTYPE html> <html style="height: 100%"> &
echarts 图的点击事件(含:点击重复触发的问题及其解决方法)
要求:在echart图表中,点击每个项,需要跳转对应页面或者显示对应的数据详情列表。 如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表。 var myChart = echarts.init(document.getElementById('chartBox')); var option = {...}; myChart.setOption(option); ...
echarts地图下钻+散点图
一、效果 散点图地图下钻,全国时打点全国,下钻到省级打点省级点。 全国打点 下钻省级打点 二、实现 const _this = this this.chart = chart // 监听chart点击事件 chart.on('click', function (params) {...
echarts点击图例 数据叠加 多次触发
echarts的的图例点击第一次是正常获取当前点击的数据,但是重复点击获取的越来越多,即点击多次触发。 所以在点击之前要对加上一个off事件 myChart.off('click') 清楚之前的点击事件。 myChart.setOption(eOption,true); 在Option后添加参数true,是否不跟之前设置的option进行合并,默认为false,即合并,设置true不合并。...
用echarts绘制地图
用echarts绘制地图需要引入china.js 实例代码如下: drawAdMap(); function drawAdMap() { // 基于准备好的dom,初始化echarts图表 var myChart = echarts.init(document.getElementById('main'))
echarts3 Map去除指示点
上图是单选模式 下图是去除了指示点 去除指示点的方法是: 在series属性中加入一句:showLegendSymbol: false 例如:
地图js点击事件
绑定事件完成交互 这里,我们为每个省级的Marker绑定一个click事件。当Marker点被点击的时候,我们将显示其下级的Marker标记,setFitView方法用来将地图调整到合适的范围来显示我们需要展示的markers。 地图缩放事件完成markers的更新 地图根据缩放级别显示该地域的数据。对上级数据进行清除,该处用到了map.clearMap()内置方法清楚地图点坐标,AMap.
奇怪的问题-ECharts的自适应位置
1. 在做ECharts地图或者图表的时候,发现将页面扩大ECharts里面的组件是固定位置并不移动.但是在官方示例上是可以自适应的. 2. 通过查阅资料: 在当前的页面加入以下的js代码来控制页面的自适应: //用于使chart自适应高度和宽度 window.onresize = function () { //重置容器高宽 myChart.resize()
ECharts 去掉地图(map)的指示图(visualMap)
ECharts 去掉地图(map)的指示图(visualMap): 只需要将visualMap的show改为false即可(只是隐藏指示,设置的颜色,最大最小值等映射都不会影响): myChart.setOption(option = { visualMap: { show: false } });
echarts地图label重叠 位置地点名称标签
echarts地图label重叠
echarts地图悬浮层点击渗透到地图层的解决
在项目中,全国地图上显示各个省的销量情况;鼠标悬浮到具体某个省上时,显示各个供应商的销量情况列表。 但是悬浮层空间有限,只能显示名称和销量,供应商的具体信息不可能完全显示,那我们可以在名称上加链接,点击之后弹出一个页面用于显示供应商的详细信息。 那么问题来了,当鼠标悬浮在悬浮层某个a标签的时候,地图上的某个省份进入到选中状态。当鼠标点下时,不仅触发了a标签里的JavaScrip
echarts连续多次刷新,出现白屏不渲染的解决方案
将echarts的渲染方式改成myChart = echarts.init(document.getElementById("dom"),null,{renderer:'svg'});默认是canvas方式,移动端svg方式好于canvas。假如更改之后,报如下错误: 请将:label下的show:true整行删除。如有疑问,私聊我。 label:{ show:true } ...
Echarts地图标记重合问题原因
这两天在做页面的时候发现了一个bug,全国地图在下钻到省级地图并返回时,
china.js echarts中国地图 去掉南海诸岛
china.js echarts中国地图 去掉南海诸岛 使用的时候在注册地图参数map中填写china2
echarts地图制作的一些问题总结
1.echarts地图不显示,只显示上面的图标。        这个问题很头大,一开始当我从官网把示例copy下来运行发现,中国地图没有显示,只显示在地图上标注各个城市位置的图标,上网查了才知道,原来是因为我没有引入china.js中国地图这个js文件才导致的地图没有加载出来,把这个js引入就可以了。现在由于官网不提供下载可以直接引入这个地址来获取china.js文件:
echarts中国地图使省份选择性滑动或点击高亮
本文介绍echarts显示中国省份图,对于需要高亮的省份进行筛选。并且对省份进行选择性交互。 首先我们需要一个颜色集合,代表我们要设置多少种颜色。这里用到了dataRange。 dataRange: { show:false, x: 'left', y: 'bottom', splitList: [ ...
实现echarts地图监听缩放事件效果
echarts地图缩放事件 做项目时遇到一个需求,要在地图放大时显示markpoint标记点数据,缩小时标记点消失。 以上就是效果图,主要就是用到了echarts的georoam事件,官方文档没有看到这个事件,这个事件能监听缩放与拖曳事件,话不多说直接上代码 georoam事件可以取到zoom值,但是是一个固定值,需要变通一下,通过getOption()方法取到当前zoom值,然后就可以通过判...
如何解决echarts地图只出现南海部分的问题
使用echarts画地图时只出现这部分,中国地图没有出现 报出以下错误: Map china not exists. You can download map file on http://echarts.baidu.com/download-map.htmlmapNotExistsError @ (program):95 http://localhost:8081/favicon.ico
echarts 地图显示问题
echarts貌似是在3.0版本以前是把地图数据内置在echarts文件中的,所以只要引入echarts就可以直接使用地图了,比如省份地图、中国地图。 但是在3.0之后可能是由于法律问题吧,地图数据不在内置了。而需要通过geo也就是json文件加载引入。 目前我这边是用es6 import引入的。这其中也有不熟的地方。我这里引入的是省份地图。 步骤实现: 1.网上—github上就有各个...
用echarts 中的地图来显示区域分布情况(vue),包括地理数据来源生成的制作注意事项
由于国家测绘部门的一些相关法律规定,现在版本的ecahrts 中的地图资源已经不能制作和直接使用,只能通过自己注册地图regiseterMap(name,json),来实现地图的区域,这些数据,学GIS的获取和制作应该都不是什么大问题,只需将相关区域的地理要素转换成geojson即可,如果不知道怎么转换,我的文章WebGIS常用的空间分析,地图发布,底图自定义,QGIS插件,地理矢量数据格式转换工...
解决echarts多个点击事件的重复调用
// 解决点击事件调用n次的问题 // 1、清除画布 myChart.clear() // 2、调用setOption myChart.setOption(option) ///3、在渲染点击事件之前先清除点击事件 ...