Canvas自绘仪表盘需手动实现缓动动画，通过requestAnimationFrame插值计算currentAngle与targetAngle；ECharts则依赖animationEasingUpdate等配置项驱动数据更新过渡，二者原理不同、参数不通用。
Canvas 自绘仪表盘必须手动实现缓动，ECharts 等图表库则靠配置项驱动过渡 —— 二者原理不同，不能混用同一套参数或写法。
Canvas 指针旋转必须自己写 easing 函数
Canvas 没有内置动画系统，ctx.rotate() 是瞬时变换。要让指针“有物理感”地转过去，就得在 requestAnimationFrame() 循环里做插值计算。
- 每次更新前记录当前角度
currentAngle和目标角度targetAngle - 用缓动函数（如
easeOutCubic(t) = 1 - Math.pow(1 - t, 3)）控制进度比例t ∈ [0,1] - 新角度 =
currentAngle + (targetAngle - currentAngle) * easeOutCubic(t) - 别直接用
Math.PI * value / 100算完就画，那会跳变
ECharts 的 animationEasingUpdate 不是万能的
这个配置只对「数据更新触发的重绘」生效，比如调用 setOption() 时的系列变化。它对坐标轴缩放、图例切换、tooltip 显隐这些操作无效。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 常见误配：
animationEasingUpdate: 'bounceOut'→ 实际不生效，因为 ECharts 内部未注册该缓动名 - 可用值限定在内置列表里：
'linear'、'quinticInOut'、'elasticOut'等（不是 CSS easing 名称） - 若开启
universalTransition.enabled: true，部分组件（如饼图扇区）会额外启用路径级过渡，但性能开销明显上升
环形进度条 arc() 绘制时的起止角别硬编码
用 ctx.arc(x, y, r, startAngle, endAngle) 画动态圆弧时，startAngle 和 endAngle 必须随数值实时重算，且要配合缓动更新，否则弧长突变。
- 错误写法：
endAngle = Math.PI * 2 * percent→ 百分比一变，弧线立刻伸缩，无过渡 - 正确做法：把
endAngle当作状态变量，在动画帧中按缓动比例逐步逼近目标值 - 注意单位统一：Canvas 角度用弧度，别混用
deg或% - 高频更新（如每秒 20 次）时，建议用
Math.min()限幅，防止因卡顿导致角度超调回弹
最易被忽略的是：Canvas 缓动必须绑定到具体实例的状态上，不能共用一个全局 currentAngle；多个仪表并存时，每个都要维护自己的角度缓动上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
