多语言展示
当前在线:1170今日阅读:103今日分享:49

echarts如何解决点击事件重复执行问题

echarts如何解决点击事件重复执行问题,如何监控多次点击,防止多次点击
工具/原料
1

电脑

2

浏览器

3

idea

方法/步骤
1

首先进行初始化require.config({packages: [  {  name: 'echarts',  location: '../../JavaScript/echarts',  main: 'echarts'  },  {  name: 'zrender',  location: '../../JavaScript/zrender',// zrender与echarts在同一级目录  main: 'zrender'  }]});require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/pie'],function (ec) { var myChart_Category = ec.init(document.getElementById('div_pieCategory')); var myChart_State = ec.init(document.getElementById('div_pieState')); var myChart_Bar = ec.init(document.getElementById('div_bar')); SetStatisticsByCategory(ec, myChart_Category); SetStatisticsByState(ec, myChart_State); SetStatisticsByBeginTime(ec, myChart_Bar); //设置点击事件 var ecConfig = require('echarts/config'); myChart_Category.on(ecConfig.EVENT.PIE_SELECTED, function (param) { var selected = param.selected; //deBugger; var serie serie = optionpie_category.series[0]; if (jQuery.inArray(true, selected[0]) > -1) { for (var i = 0; i < serie.data.length; i++) { if (selected[0][i]) { $('#hid_category').val(serie.data[i].name); } } } else { $('#hid_category').val(''); } GetList(true); }) myChart_State.on(ecConfig.EVENT.PIE_SELECTED, function (param) { var selected = param.selected; var serie; serie = optionpie_state.series[0]; if (jQuery.inArray(true, selected[0]) > -1) { for (var i = 0; i < serie.data.length; i++) { if (selected[0][i]) { $('#hid_state').val(serie.data[i].name);                       } } } else { $('#hid_state').val(''); } GetList(true); }) myChart_Bar.on(ecConfig.EVENT.CLICK, function (param) { var selected = param; var xAxis; xAxis = optionpie_bar.xAxis[selected.seriesIndex]; for (var i = 0; i < xAxis.data.length; i++) { if (i == selected.dataIndex) { if ($('#hid_date').val() != xAxis.data[i]) { $('#hid_date').val(xAxis.data[i]);                   } else { $('#hid_date').val(''); } GetList(true); } } })})说明:1、设置时间需要引用config.js :var ecConfig = require('echarts/config');2、饼图的数据获取很简单:饼图点击事件:ecConfig.EVENT.PIE_SELECTED饼图的数据:var selected = param.selected;3、柱状图:ecConfig.EVENT.CLICK

2

在获取数据的时候,设置了一个隐藏域放置已经点击的数据。  var selected = param;            var xAxis;            xAxis = optionpie_bar.xAxis[selected.seriesIndex];            for (var i = 0; i < xAxis.data.length; i++) {                if (i == selected.dataIndex) {                    if ($('#hid_date').val() != xAxis.data[i]) {                        $('#hid_date').val(xAxis.data[i]);                                      } else {                        $('#hid_date').val('');                    }                    GetLawCaseList(true);                }            }

3

bigFamilyChart.off('click').on('click', function(params){ });使用on 注册事件前先使用off,防止事件的重复注册

4

下面是防止重复点击的demo/* timeId=window.setTimeout('method()',1000); window.clearTimeout(timeId);定时执行 timeId=window.setInterval('method()',1000); window.clearInterval(timeId);循环执行 */ var nn = 30; var tipId; function show() { tipId = window.setInterval('start()', 1000); //每隔1秒调用一次start()方法 } function start() { if (nn > 0) { var vv = '点下我(' + nn + ')'; $('#btn').attr('disabled', 'disabled'); //使按钮不能被点击 $('#btn').attr('value', vv); //更改按钮上的文字 nn--; } else { nn = 30; $('#btn').removeAttr('disabled'); //使按钮能够被点击 $('#btn').attr('value', '点下我'); //更改按钮上的文字 window.clearInterval(tipId); //清除循环事件 } }

注意事项

使用on 注册事件前先使用off,防止事件的重复注册

推荐信息