电脑
浏览器
idea
首先进行初始化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
在获取数据的时候,设置了一个隐藏域放置已经点击的数据。 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); } }
bigFamilyChart.off('click').on('click', function(params){ });使用on 注册事件前先使用off,防止事件的重复注册
下面是防止重复点击的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,防止事件的重复注册