这个效果是怎么做出来的
柱状图的两个交互各有一条技术线。切换周月：两组数据的柱子数量可能不同，处理办法是柱子总数取两组的最大值，多出来的柱子高度过渡到 0 再隐藏，这样切换时每根柱子都在原地平滑长高或缩短，而不是整组重建。柱高用百分比加 transition 过渡 0.4 秒，缓动用标准 easeOut，切换像液体一样流动。
长按聚焦：pointerdown 起计时 300 毫秒，超时判定为长按，给容器加一个聚焦类——除目标柱外其余柱子透明度压到 0.25，目标柱上方浮出数值气泡。期间手指移动可以把焦点跟着换柱，抬起或移出时解除聚焦。整套交互用 pointer 事件而不是 mouseenter，触屏和鼠标一套逻辑通吃。
怎么用这条提示词
适合支出统计、步数对比这类需要切换粒度看数据的场景。发给 AI 时给出两组示例数据，它会生成切换与过渡逻辑。如果你的柱子需要显示多组颜色（比如收入支出双色），在提示词里说明分段方式。
想效果更好？试试这些
长按阈值 250 到 350 毫秒之间，短了和点击冲突，长了没耐心。聚焦时给目标柱加一点 Y 向上浮 2px 的位移，和变暗的其余柱子形成双重对比。气泡跟随柱子顶部留 8px 间距，别贴着数值。切周月时如果柱子数量差异大（7 根对 30 根），宽度变化也要加过渡，柱子挤开的过程才连续。最后锁一个细节：过渡期间禁用长按判定，避免用户在柱子长高时误触发聚焦。