zoukankan      html  css  js  c++  java
  • 【转】ECharts3.x中的点击事件与行为

    在ECharts中主要通过 on 方法添加事件处理函数,ECharts中的事件主要分为两种,1)鼠标事件,在鼠标click  or  hove 时触发鼠标事件; 2)另外一种是在ECharts在做图形交互时触发的事件,即调用 dispatchAction  后触发的事件。

    鼠标事件:'click','dblclick','mousedown','mouseup','mouseover','mouseout','globalout'

    myChart.on('click', function (params) {
        console.log(params);
    });

    事件触发的参数为对象数据的各个属性,列出部分主要的属性:

    {
        // 当前点击的图形元素所属的组件名称,
        // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
        componentType: string,
        // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
        seriesType: string,
        // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
        seriesIndex: number,
        // 系列名称。当 componentType 为 'series' 时有意义。
        seriesName: string,
        // 数据名,类目名
        name: string,
        // 数据在传入的 data 数组中的 index
        dataIndex: number,
        // 传入的原始数据项
        data: Object,
        // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
        // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。
        // 其他大部分图表中只有一种 data,dataType 无意义。
        dataType: string,
        // 传入的数据值
        value: number|Array
        // 数据图形的颜色。当 componentType 为 'series' 时有意义。
        color: string
    }

    上面的点击事件参数,只是列出部分,不同的事件也有一些额外附加参数。

    可以通过jq 的遍历查看他的参数属性

    $.each(params, function(k,v){  console.log( 'k='+k+':v=' + v)  });


    图例交互事件:

    1) legendselectchanged : 切换图例选中状态后的事件 (注:图例组件用户切换图例开关会触发该事件,不管你有没有选择,点击了就触发)

    2)legendselected:例组件用legendSelect 图例选中后的事件,即点击显示该图例时,触发就生效。

    3)legendunselected: legendUnSelect 图例取消选中后的事件。

    4)datazoom:数据区域缩放后的事件。缩放视觉映射组件。

    5)datarangeselected:selectDataRange 视觉映射组件中,range 值改变后触发的事件。

    6)timelinechanged:timelineChange 时间轴中的时间点改变后的事件。

    7)timelineplaychanged:timelinePlayChange 时间轴中播放状态的切换事件。

    8)restore: restore 重置 option 事件。

    9)dataviewchanged:工具栏中数据视图的修改事件。

    10)magictypechanged:工具栏中动态类型切换的切换事件。

    11)geoselectchanged:geo 中地图区域切换选中状态的事件(用户点击选中会触发该事件。)。

    12)geoselected:geo 中地图区域选中后的事件(使用geoselectchanged))。

    13)geounselected:geo 中地图区域取消选中后的事件,使用geoselectchanged)。

    14)pieselectchanged:series-pie 中饼图扇形切换选中状态的事件,用户点击选中会触发该事件。

    15)pieselected:series-pie 中饼图扇形选中后的事件,使用pieselectchanged)。

    16)pieunselected:series-pie 中饼图扇形取消选中后的事件,使用pieselectchanged)。

    17)mapselectchanged: series-map 中地图区域切换选中状态的事件,用户点击选中会触发该事件。

    18)mapselected:series-map 中地图区域选中后的事件,使用mapselectchanged)

    19)mapunselected:series-map 中地图区域取消选中后的事件,使用mapselectchanged)。

    20)axisareaselected:平行坐标轴 (Parallel) 范围选取事件,

    当进行坐标轴范围选取时,可以用如下方式获取当前高亮的线所对应的 data indices (即 data 中的序号列表)。

    chart.on('axisareaselected', function () {
        var series1 = chart.getModel().getSeries()[0];
        var series2 = chart.getModel().getSeries()[0];
        var indices1 = series1.getRawIndicesByActiveState('active');
        var indices2 = series2.getRawIndicesByActiveState('active');
        console.log(indices1);
        console.log(indices2);
    });
    // 数据区域缩放后事件
    myChart.on('datazoom', function (params) {
        var opt = myChart.getOption();
        var dz = opt.dataZoom[0];
        var tstart = opt.xAxis[0].data[dz.startValue];
        var tend = opt.xAxis[0].data[dz.endValue];
        console.log("S=" + tstart);
        console.log("E=" + tend);
    });
    // 重置事件
    myChart.on('restore', function (params) {
        console.log("restore");
    });

    原文出处: http://blog.csdn.net/a82793510/article/details/51756272

  • 相关阅读:
    MongoDB 创建账户
    MongoDB高可用集群配置方案
    学习CEGUI亟待解决问题一:文本控件的格式问题
    第一讲
    ERP初阶(三):MRP基本原理
    ERP初阶(四):MRP基本构成
    学习CEGUI亟待解决问题二:消息事件传递机制问题
    Groovy处理null对象为空字符串
    silverlight与CSLA的快速应用05安装CslaExtension
    silverlight与CSLA的快速应用08客户端的CSLA代码
  • 原文地址:https://www.cnblogs.com/yangyxd/p/7865238.html
Copyright © 2011-2022 走看看