ECharts(六)

ECharts提供丰富的事件处理机制,包括鼠标事件和组件交互行为事件。用户可以通过监听这些事件来实现图表的动态交互,例如点击图表跳转、图例开关、高亮显示等。示例中展示了如何绑定点击事件并处理,以及如何监听图例选择变化和调度行为来高亮饼图的扇形。此外,还可以通过区分不同类型的事件来判断鼠标点击的位置,如标记点、系列或空白处。
摘要由CSDN通过智能技术生成

ECharts 事件与行为

  1. ECharts 图表中用户的操作将会触发相应的事件,如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。

  2. ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串

  3. 如下是一个绑定点击操作的示例:

    myChart.on('click', function(params) {
      // 控制台打印数据的名称
      console.log(params.name);
    });
    
  4. 在 ECharts 中事件分为两种类型,

    1. 一种是用户鼠标操作点击,或者 hover 图表的图形时触发的事件,
    2. 一种是用户在使用可以交互的组件后触发的行为事件

ECharts 鼠标事件的处理

  1. ECharts 支持常规的鼠标事件类型,包括 'click'、 'dblclick'、 'mousedown'、 'mousemove'、 'mouseup'、 'mouseover'、 'mouseout'、 'globalout'、 'contextmenu' 事件

    // 基于准备好的dom,初始化ECharts实例
    // var myChart = echarts.init(document.getElementById('main'));
    
    // 指定图表的配置项和数据
    var option = {
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 处理点击事件并且跳转到相应的百度搜索页面
    myChart.on('click', function(params) {
      window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
    });
    
  2. 所有的鼠标事件包含参数params,这是一个包含点击图形的数据信息的对象

    type EventParams = {
      // 当前点击的图形元素所属的组件名称,
      // 其值如 '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;
    };
    
  3. 区分鼠标点击到了哪里:

    myChart.on('click', function(params) {
      if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
          // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
      } else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
          if (params.dataType === 'edge') {
            // 点击到了 graph 的 edge(边)上。
          } else {
            // 点击到了 graph 的 node(节点)上。
          }
        }
      }
    });
    
  4. 使用 query 只对指定的组件的图形元素的触发回调:query 可为 string 或者 Object。

    chart.on(eventName, query, handler);
    

组件交互的行为事件

  1. 在 ECharts 中基本上所有的组件交互行为都会触发相应的事件

  2. 监听一个图例开关的示例

    // 图例开关的行为只会触发 legendselectchanged 事件
    myChart.on('legendselectchanged', function(params) {
      // 获取点击图例的选中状态
      var isSelected = params.selected[params.name];
      // 在控制台中打印
      console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
      // 打印所有图例的状态
      console.log(params.selected);
    });
    
  3. 通过 dispatchAction 去轮流高亮饼图的每个扇形

    option = {
      title: {
        text: '饼图程序调用高亮示例',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    
    let currentIndex = -1;
    
    setInterval(function() {
      var dataLen = option.series[0].data.length;
      // 取消之前高亮的图形
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      currentIndex = (currentIndex + 1) % dataLen;
      // 高亮当前图形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      // 显示 tooltip
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
    }, 1000);
    

监听“空白处”的事件

  1. zrender 事件和 echarts 事件

  2. zrender 事件 是当鼠标在任何地方都会被触发,echarts 事件只有当鼠标在图形元素上时才能被触发

  3. 当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件

    myChart.getZr().on('click', function(event) {
      // 该监听器正在监听一个`zrender 事件`。
    });
    myChart.on('click', function(event) {
      // 该监听器正在监听一个`echarts 事件`。
    });
    
  4. 实现监听空白处的事件:

    myChart.getZr().on('click', function(event) {
      // 没有 target 意味着鼠标/指针不在任何一个图形元素上,它是从“空白处”触发的。
      if (!event.target) {
        // 点击在了空白处,做些什么。
      }
    });
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值