F2 icon indicating copy to clipboard operation
F2 copied to clipboard

自定义Tooltip内容 如何实现文本两行展示?

Open enjkvbej opened this issue 1 year ago • 0 comments

f2:4.0.44

<Tooltip
                        showCrosshairs
                        crosshairsStyle={{ stroke: '#FF3837' }}
                        background={{ fill: '#fff', radius: '10px' }}
                        showItemMarker={false}
                        customText={record => {
                            console.log(111, record);
                            const { name, value } = record;
                            return (
                                <group
                                    style={{
                                        minWidth: '106px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        alignItems: 'center',
                                    }}
                                >
                                    <text
                                        attrs={{
                                            fontSize: '20px',
                                            fill: '#fff',
                                            text: `${name}日:`
                                        }}
                                    />
                                    <text
                                        attrs={{
                                            fontSize: '24px',
                                            fill: '#fff',
                                            text: `111,111,000元`
                                        }}
                                    />
                                </group>
                            );
                        }}
                    />

flexDirection: 'column'这种能实现两行但是辅助线会盖到tooltip里的文字上,求助怎么实现

enjkvbej avatar Apr 21 '23 05:04 enjkvbej