echarts 点击事件
2015-08-07 17:14
471 查看
下面分享一下,给echarts的报表添加事件,并通过事件获取点击到的数据:
1、初始化:
说明:
1、设置时间需要引用config.js :var ecConfig = require('echarts/config');
2、饼图的数据获取很简单:饼图点击事件:ecConfig.EVENT.PIE_SELECTED
饼图的数据:var selected = param.selected;
3、柱状图:ecConfig.EVENT.CLICK
在获取数据的时候,设置了一个隐藏域放置已经点击的数据。
转发注明:IT分享 http://www.suchso.com
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
相关文章推荐
- UnityShader实例11:积雪材质
- 【Android应用开发技术:用户界面】自定义View类设计
- 也谈不甘
- 静帧效果图——Maya的节点材质案例
- 让你网页同时兼容FireFox和IE
- jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
- win10无法打开这个应用解决办法
- context与getApplication()的使用
- 安装VCenter提示数据库排序规则有问题
- MySQL中DATETIME、DATE和TIMESTAMP类型的区别
- OGG_创建一个带有data pump功能的OGG配置
- 常用时间函数
- poj 3667 Hotel(线段树区间更新)
- android mediaplayer状态机
- 选择排序与冒泡法排序的C代码实现
- range()和xrange()
- 倒杨辉三角形
- nc修改表字段
- 维护网站小笔记
- VS2013如何添加LIb库及头文件的步骤