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地图，有点击事件，页面会每隔一段时间生成一个新的底图，但是在点击的时候会把以前的点击事件里面的弹框内容给弹出。会反复叠加弹出很多框。。问大神怎么解决

答

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

答

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

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

答

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

 myChart.off('click');
myChart.on('click'...............

答

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

答

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

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

});

echarts地图的问题。地图刷新点击事件重复

相关推荐