现在位置首页 / 项目实战 /正文

基于html5、js的超强报表控件Echarts系列教程(3)--事件使用

作者: IT小兵 | 2014年4月2日| 热度:℃ | 评论: |参与:

echarts的安装及asp.net环境下的部署,请参考下面链接

[Echarts asp.net+ashx项目部署及代码实例(附demo)]

[ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条]

[ECharts--完善的人物关系图-连线点击事件/样式/标注文字及源代码]

[ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-节点样式和点击事件]

[ECharts教程--基于力导向布局图功能更完善的人物关系图插件扩展开发(1)]

[基于html5、js的超强报表控件Echarts系列教程(2)-使用及环境部署]

[基于html5、js的超强报表控件Echarts系列教程(1)-与其他报表的区别和介绍]


下面分享一下,给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;
		//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);
                }
            }


转发注明:IT分享  http://www.suchso.com 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询