@antv/g2plot，散点气泡图中的四象限图，怎么监听每个象限的点击事件，产品需要拿每个象限的点击事件去做业务

@antv/g2plot，散点气泡图中的四象限图，怎么监听每个象限的点击事件，产品需要拿每个象限的点击事件去做业务
目前试过通过添加下面的方法，不行
scatterPlot.on('element:click', (evt) => {
const xBaseline = 4;
const yBaseline = 4;

const data = evt.data.data;
const x = data[scatterPlot.options.xField];
const y = data[scatterPlot.options.yField];

if (x > xBaseline && y > yBaseline) {
console.log('点击了热门市场象限');
} else if (x < xBaseline && y > yBaseline) {
console.log('点击了潜力市场象限');
} else if (x < xBaseline && y < yBaseline) {
console.log('点击了提频市场象限');
} else if (x > xBaseline && y < yBaseline) {
console.log('点击了空白象限');
}
});

完整代码如下：
import { Scatter } from '@antv/g2plot';
const data = [
{
city: '上海',
搜索UV: 1.5,
端DAU: 6,
搜索DAU渗透率: 3,
},
{
city: '台北',
搜索UV: 2,
端DAU: 5,
搜索DAU渗透率: 13,
},
{
city: '北京',
搜索UV: 7,
端DAU: 3.6,
搜索DAU渗透率: 16,
},
{
city: '济南',
搜索UV: 5,
端DAU: 5,
搜索DAU渗透率: 16,
},
{
city: '青岛',
搜索UV: 2,
端DAU: 1,
搜索DAU渗透率: 19,
},
{
city: '杭州',
搜索UV: 7,
端DAU: 2,
搜索DAU渗透率: 90,
},
{
city: '广东',
搜索UV: 7.4,
端DAU: 1.5,
搜索DAU渗透率: 30,
},
{
city: '无锡',
搜索UV: 1,
端DAU: 1,
搜索DAU渗透率: 34,
},
{
city: '重庆',
搜索UV: 7,
端DAU: 5,
搜索DAU渗透率: 46,
},
{
city: '成都',
搜索UV: 3.4,
端DAU: 2.3,
搜索DAU渗透率: 49,
},
{
city: '哈尔滨',
搜索UV: 0.5,
端DAU: 6.5,
搜索DAU渗透率: 51,
},
{
city: '内蒙古',
搜索UV: 2.5,
端DAU: 5,
搜索DAU渗透率: 51,
},
{
city: '云南',
搜索UV: 1,
端DAU: 5,
搜索DAU渗透率: 53,
},
{
city: '河北',
搜索UV: 6,
端DAU: 5,
搜索DAU渗透率: 57,
},
{
city: '陕西',
搜索UV: 2,
端DAU: 3,
搜索DAU渗透率: 57,
},
{
city: '苏州',
搜索UV: 3,
端DAU: 4.6,
搜索DAU渗透率: 65,
},
{
city: '四川',
搜索UV: 6,
端DAU: 7,
搜索DAU渗透率: 68,
},
{
city: '贵阳',
搜索UV: 5,
端DAU: 3.4,
搜索DAU渗透率: 68,
},
{
city: '台湾',
搜索UV: 5,
端DAU: 2,
搜索DAU渗透率: 69,
},
{
city: '哈尔滨',
搜索UV: 2,
端DAU: 7,
搜索DAU渗透率: 78,
},
{
city: '天津',
搜索UV: 4.4,
端DAU: 5,
搜索DAU渗透率: 45,
},
{
city: '长沙',
搜索UV: 3.4,
端DAU: 7,
搜索DAU渗透率: 29,
},
{
city: '沧州',
搜索UV: 3,
端DAU: 1,
搜索DAU渗透率: 94,
},
{
city: '宁波',
搜索UV: 6,
端DAU: 3,
搜索DAU渗透率: 99,
},
];
const scatterPlot = new Scatter('container', {
width: 800,
height: 400,
autoFit: false,
appendPadding: 16,
data,
xField: '搜索UV',
yField: '端DAU',
sizeField: '搜索DAU渗透率',
size: [12, 30],
shape: 'circle',
pointStyle: {
fill: '#D6E3FD',
fillOpacity: 0.6,
stroke: '#6d9bf9',
},
tooltip: {
showTitle: true,
showMarkers: false,
fields: ['搜索UV', '端DAU', '搜索DAU渗透率'],
customContent: (title, items) => {
const field = items?.[0];
const formatterInfo = {
搜索UV: (value) => value + '万',
端DAU: (value) => value + '万',
搜索DAU渗透率: () => '%',
};
let htmlStr =

Start from the supplied Scatter configuration and the scatterPlot.on('element:click') handler, then inspect how G2Plot's quadrant regions and chart events are implemented. Reproduce the reported click behavior with the provided data and annotations. Done means quadrant clicks can be distinguished reliably for application callbacks, with the relevant behavior documented or covered by a test.

Written by the indexing model from the issue text.