Ant Design Charts 对外暴露了一些事件，用于获取图表的生命周期，以及交互信息。Ant Design Charts 导出了一个 ChartEvent 类型，用于定义事件的类型。

null;

生命周期事件

如果想要获取图表的生命周期信息，可以通过下面的方式：

chart.on(ChartEvent.AFTER_RENDER, (ev) => {
  console.log(ev);
});

Ant Design Charts 目前提供了以下生命周期事件：

• 渲染前：指 Ant Design Charts 着手开始处理数据，进行布局，绘制图形等操作。
• 绘制前： 指完成数据处理，布局，绘制图形等操作，但是还没有进行绘制。
• 绘制后： 指 Ant Design Charts 完成所有的绘制操作，但可能存在动画，动画结束后，图表才算真正的渲染完成。
• 渲染后： 指 Ant Design Charts 完成所有的绘制操作，包括动画。
• 清理画布后： 容器中的图表已经被清理，但是 Ant Design Charts 实例还存在，可以继续使用。
• 销毁画布后： Ant Design Charts 实例已经被销毁，无法再使用。

交互事件

如果你想要获取图表的交互信息，可以通过下面的方式：

• 监听全局 element 事件

chart.on(`element:${ChartEvent.EventType}`, (ev) => {
  console.log(ev);
});

• 监听指定 element 事件

chart.on(`${markType}:${ChartEvent.EventType}`, (ev) => {
  console.log(ev);
});

chart.on(`interval:${ChartEvent.CLICK}`, (ev) => {
  console.log(ev);
});

• 监听 plot 区域事件

chart.on('plot:click', (event) => console.log(event));

• 监听全局 component 事件

chart.on('component:click', (event) => console.log(event));

• 监听全局 label 事件

chart.on('label:click', (event) => console.log(event));

点击事件

指针事件

拖拽事件

如果希望监听拖拽事件，需要设置 draggable 和 droppable 属性

{
  "style": {
    "droppable": true,
    "draggable": true
  }
}