Ant Design Pro 项目图表组件点击事件

最新推荐文章于 2024-08-07 09:02:36 发布

小猫去钓鱼

最新推荐文章于 2024-08-07 09:02:36 发布

阅读量1.4k

点赞数

文章标签： javascript react.js

本文链接：https://blog.csdn.net/weixin_46424838/article/details/123420658

版权

本文介绍了如何在Ant Design Charts中为柱形图设置点击事件。通过onReady方法，结合柱形图的'interval:click'事件监听，实现了点击柱形图后隐藏主页面并显示详细信息的功能。示例代码展示了事件处理函数的实现，包括获取点击数据、更新显示状态及调用详情获取方法。

摘要由CSDN通过智能技术生成

背景:使用框架配套图表组件charts 要求柱形图可实现点击事件
方法:onReady
官网:https://charts.ant.design/zh/docs/api/options/events

实际项目示例:
柱形图实现点击事件

 <Column {...colConfig1} loading={loading} onReady={onReadyLocCol} />

  //科室 柱形图的柱子被 click 的时候
  const onReadyLocCol = (plot: any) => {
    plot.on('interval:click', (...args: any) => {
      const data = args[0].data?.data;
      //隐藏主页面
      setMianVisible(false);
      //显示明细
      setSecondaryVisible(true);
      const params = {
        locID: data.LocID,
        docID: '',
        startdate: data.Startdate,
        enddate: data.Enddate,
        Type: stateData.type,
      };
      const allParams = {
        ...defaultPagination,
        ...params,
      };
      setDetailsParams(params);
      getDetails(allParams);
    });
  };