这个效果是怎么做出来的
这个控件是两个经典组件的联动。上半部分是磁吸游标：手指在图表上横向滑动时，把触点换算成图表坐标，找最近的数据点，游标的横线和小圆点用 transform: translateX 过渡过去，曲线带一点弹簧味，到位时有被「吸」住的顿挫感。下半部分是滚动码表：把数字按位拆开，每一位是一个竖直排列的 0 到 9 数字条，改数值时只需要把对应条 translateY 到目标数字的行数，过渡 0.3 秒，数字就像老虎机一样滚到位，千分位逗号是固定字符不参与滚动。
两个组件靠一个状态值联动：游标吸到第几个点，码表就滚到那个点的数值。注意 SVG 里游标要用 transform 而不是改属性坐标，过渡才能走合成层不掉帧。
怎么用这条提示词
适合步数、收入、电量这类需要逐点回看的时间序列数据。发给 AI 时给它你的数据数组和取值范围，它会生成对应的坐标映射。如果你的数据点很多（几十个以上），让 AI 把磁吸改为按像素距离阈值触发，滑动会更跟手。
想效果更好？试试这些
码表每一位的高度要和字体行高严格一致，否则滚动会露出台阶。数值变化跨度大时给码表加一个最快的位滚动上限，避免万位狂转抢戏。游标吸附半径设为相邻点间距的一半，正好无死角全覆盖。触屏设备记得在 pointerdown 时调用 setPointerCapture，手指滑出图表区域也能继续跟手，松手才算结束。