[Feat]: 当图表宽度比较小，气泡自定义name较长时，其会超出区域被遮挡，v1版本好像是超出的话会自动吸附区域边缘

[wjw131211]

Describe the feature / 功能描述

import React from 'react';
import ReactDOM from 'react-dom';
import { Area } from '@ant-design/plots';

const DemoArea = () => {
const config = {
data: [
{
"pay_ord_cnt": 26,
"taobao_se_imps_pv_index": 85.83932478899656,
"item_id": "712801411260",
"pay_ord_amt": 2289.55,
"stat_date": "20250116",
"pay_ord_pqt": 78.95,
"pcvr_cate": 0.05043327301563829,
"ipv": 538,
"taobao_se_pay_ord_cnt": 24,
"ipv_2_pay_cvr": 0.048327137546468404,
"taobao_se_pctr": 0.14769410391126678,
"taobao_se_pctr_index": 77.80556423882463,
"taobao_se_exp_pv": 1713,
"taobao_se_pay_exp_pv": 0,
"pay_itm_qty": 29,
"taobao_se_pcvr": 0.09486166007905138,
"taobao_se_ipv_pv_2_pay_cvr_index": 69.80306345733041,
"taobao_se_free_exp_pv": 1713,
"taobao_se_ipv": 253
},
{
"pay_ord_cnt": 14,
"taobao_se_imps_pv_index": 77.14910909659268,
"item_id": "712801411260",
"pay_ord_amt": 1263.2000000000003,
"stat_date": "20250117",
"pay_ord_pqt": 78.95000000000002,
"pcvr_cate": 0.05961904307692434,
"ipv": 354,
"taobao_se_pay_ord_cnt": 8,
"ipv_2_pay_cvr": 0.03954802259887006,
"taobao_se_pctr": 0.1374133949191686,
"taobao_se_pctr_index": 72.58518286964676,
"taobao_se_exp_pv": 866,
"taobao_se_pay_exp_pv": 0,
"pay_itm_qty": 16,
"taobao_se_pcvr": 0.06722689075630252,
"taobao_se_ipv_pv_2_pay_cvr_index": 59.04970303219756,
"taobao_se_free_exp_pv": 866,
"taobao_se_ipv": 119
},
{
"pay_ord_cnt": 15,
"taobao_se_imps_pv_index": 73.62671660424469,
"item_id": "712801411260",
"pay_ord_amt": 1263.2000000000003,
"stat_date": "20250118",
"pay_ord_pqt": 78.95000000000002,
"pcvr_cate": 0.05952825611732762,
"ipv": 239,
"taobao_se_pay_ord_cnt": 7,
"ipv_2_pay_cvr": 0.06276150627615062,
"taobao_se_pctr": 0.11092150170648464,
"taobao_se_pctr_index": 49.06367041198502,
"taobao_se_exp_pv": 586,
"taobao_se_pay_exp_pv": 0,
"pay_itm_qty": 16,
"taobao_se_pcvr": 0.1076923076923077,
"taobao_se_ipv_pv_2_pay_cvr_index": 74.59425717852685,
"taobao_se_free_exp_pv": 586,
"taobao_se_ipv": 65
},
{
"pay_ord_cnt": 10,
"taobao_se_imps_pv_index": 75.67229518449031,
"item_id": "712801411260",
"pay_ord_amt": 789.5000000000001,
"stat_date": "20250119",
"pay_ord_pqt": 78.95000000000002,
"pcvr_cate": 0.051566541227049095,
"ipv": 275,
"taobao_se_pay_ord_cnt": 7,
"ipv_2_pay_cvr": 0.03636363636363636,
"taobao_se_pctr": 0.1270718232044199,
"taobao_se_pctr_index": 63.539712320200124,
"taobao_se_exp_pv": 724,
"taobao_se_pay_exp_pv": 0,
"pay_itm_qty": 10,
"taobao_se_pcvr": 0.07608695652173914,
"taobao_se_ipv_pv_2_pay_cvr_index": 61.632270168855534,
"taobao_se_free_exp_pv": 724,
"taobao_se_ipv": 92
},
{
"pay_ord_cnt": 15,
"taobao_se_imps_pv_index": 73.5625,
"item_id": "712801411260",
"pay_ord_amt": 1342.1500000000003,
"stat_date": "20250120",
"pay_ord_pqt": 78.95000000000002,
"pcvr_cate": 0.05549722586861699,
"ipv": 270,
"taobao_se_pay_ord_cnt": 7,
"ipv_2_pay_cvr": 0.05555555555555555,
"taobao_se_pctr": 0.11755725190839694,
"taobao_se_pctr_index": 61.40625,
"taobao_se_exp_pv": 655,
"taobao_se_pay_exp_pv": 0,
"pay_itm_qty": 17,
"taobao_se_pcvr": 0.09090909090909091,
"taobao_se_ipv_pv_2_pay_cvr_index": 66.96875,
"taobao_se_free_exp_pv": 655,
"taobao_se_ipv": 77
},
],
xField: 'stat_date',
yField: 'pay_ord_amt',
width: 288,
height: 65,
margin: 0,
padding: 0,
axis: {
x: false,
y: false,
},
colorField: '#30B30E',
style: {
fill: 'linear-gradient(90deg, rgba(48,179,14,0.3) 0%, rgba(48,179,14,0.1) 100%)',
},
line: {
style: {
stroke: '#30B30E',
lineWidth: 1.5,
},
tooltip: false,
connectNulls: {
connect: true,
connectStroke: '#eee',
},
},
connectNulls: {
connect: true,
connectFill: 'grey',
connectFillOpacity: 0.5,
},
tooltip: {
title: (d) => {
const date = d?.stat_date;
return date ? date : '-';
},
items: [{
name: '近七日成交金额GMV', // item.label
channel: 'y',
valueFormatter: (d) => d?.toFixed?.(2) || '-',
}],
},
};
return <Area {...config} />;
};

ReactDOM.render(, document.getElementById('container'));

Are you willing to contribute? / 是否愿意参与贡献？

Please select / 请选择