echarts 点击事件

来源：互联网发布：java手机游戏51 编辑：程序博客网时间：2024/06/06 03:52

下面分享一下，给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 serieserie = 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

6 0