👑 [需求]滑动需求

fooliker commented 3 months ago

🥰 需求描述 [详细地描述需求，让大家都能理解]

手机端好几个折线图，需求要可以点击显示tooltip，再折线图区域滑动也可以上下滑动界面现在看起来有tooltip的话没法滑动界面

🧐 解决方案 [如果你有解决方案，在这里清晰地阐述]

🚑 其他信息 [如截图等其他信息可以贴在这里]

return ( <div style={{ width: isMobile ? window.innerWidth - 50 : 600, position: 'relative', zIndex: 200, backgroundColor: 'white' }}> <DatePicker allowClear={false} picker="month" defaultValue={selectedMonth} onChange={handleMonthChange} disabledDate={(current) => current && current > moment().endOf('month')} style={{ zIndex: 10 }} /> {!loading && ( <div style={{ backgroundColor: 'transparent', height: '100%', }}

            >
                <div>
                    {monthData.length > 0 && <Line {...config1} />}
                </div>
                <div>
                    {monthTouristData.length > 0 && <Line {...config2} />}
                </div>
                <div>
                    {monthResidentData.length > 0 && <Line {...config3} />}
                </div>
            </div>
        )}
    </div>
);

fooliker commented 3 months ago

const getAnnotations = (data: any[]) => {
    if (data.length <= 0) return [];
    const maxItem = data.reduce((max, item) => (item.value > max.value ? item : max), data[0]);
    return [
        {
            type: 'text',
            data: [maxItem?.day, maxItem?.value],
            style: {
                text: `${maxItem?.value}`,
                wordWrap: true,
                wordWrapWidth: 164,
                dx: 20,
                dy: -20,
                fill: '#2C3542',
                fillOpacity: 0.65,
                fontSize: 10,
                background: true,
                backgroundRadius: 2,
                connector: true,
                startMarker: true,
                startMarkerFill: '#2C3542',
                startMarkerFillOpacity: 0.65,
            },
        },
    ];
};

const config1 = {
    animate: { enter: { type: 'waveIn' } },
    title: '本月上岛人数汇总',
    data: monthData,
    xField: 'day',
    yField: 'value',
    colorField: 'type',
    seriesField: 'type',
    annotations: getAnnotations(monthData),

};

lxfu1 commented 2 months ago

移动端目前没做兼容性测试，建议实现 @antv/f2

ant-design / ant-design-charts