echarts如何解决点击事件重复执行问题
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;
//de<a target="_blank" href="http://www.suchso.com/programmer/chengxuyuan-duanzi-bug-shangwang.html" class="keylink" title=" Bug修复" style="text-decoration:none; color:rgb(51,51,51)">Bug</a>ger;
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); //清除循环事件
}
}