这个效果是怎么做出来的
范围折线图最惊艳的是「同一条线在变形」：切换一周、一月、一年时，折线不是擦掉重画，而是从旧形状连续扭到新形状。实现要点是把新旧两组数据点数量对齐——点数少的补齐（在现有路径上插值出中间点），点数多的抽稀——然后用 requestAnimationFrame 在 300 到 400 毫秒里逐帧做点位插值，每一帧 polyline 的 points 都重算，看起来就是一条线在流动重组。下方的面积渐变是一个 polygon，跟折线共用同一份插值点，同步变形毫无违和。
如果不想逐帧插值，退一步的方案是新旧两组点数固定相等（都重采样成 30 个点），用 SVG 的 SMIL 或 CSS 过渡 points 属性，写法更省但曲线感稍弱。
怎么用这条提示词
适合股价、体温、访客量这类需要多粒度回看的数据。发给 AI 时给出三个范围的示例数据，它会生成重采样和插值逻辑。数据点数差异大时（7 个对 365 个），叮嘱 AI「重采样到固定点数再过渡」，不然插值动画会糊成一瞬。
想效果更好？试试这些
插值时长 350 毫秒封顶，变形动画超过半秒用户就开始等了。切换时旧线先快速淡到 60% 透明再变形，层次感更强。面积渐变的底部基线固定不动，只有上沿跟着折线走，变形才稳。y 轴刻度在切换时同步做数值滚动，上下呼应。最后留意折线拐点圆滑度：用 Catmull-Rom 之类平滑曲线代替直线连线，变形过程的美感翻倍。