Canvas刻度高亮最稳方案是用shadowBlur+shadowColor模拟发光：设shadowBlur为8～15、shadowColor为带alpha的颜色（如'rgba(255,200,0,0.7)'），并配合save()/restore()隔离状态，仅对主刻度启用以避免视觉过载。
Canvas 刻度高亮用 shadowBlur + shadowColor 最稳
直接改 strokeStyle 颜色或加 border 不会“发光”，只会变粗或偏色。真正模拟发光效果，得靠 canvas 2D 上下文的阴影 API：它不增加绘制开销，且在所有支持 canvas 的浏览器（IE9+）都可用。
-
ctx.shadowBlur控制光晕扩散程度，建议设为8～15；值太小看不出效果，太大则边缘糊成一团 -
ctx.shadowColor必须是带 alpha 的颜色，比如'rgba(255, 200, 0, 0.7)'，纯 opaque 色（如'#ffcc00'）会变成硬边光斑 - 高亮前必须调用
ctx.save()，画完立刻ctx.restore()，否则阴影会污染后续所有绘制（比如数字、指针） - 只对主刻度（如每 10% 一条）启用阴影，次刻度保持普通描边，避免视觉过载
SVG 刻度发光别碰 filter，用 feGaussianBlur + feMerge 手写滤镜
SVG 中用 filter 属性看似简单，但浏览器对 url(#glow) 的解析在旧版 Safari 和 Electron 旧内核里极不稳定——常出现滤镜不生效、错位或整个 group 消失。稳妥做法是定义可复用的内联滤镜：
<defs>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
- 把
<line class="tick-major"></line>加上filter="url(#glow)"即可生效 -
stdDeviation="2"对应中等发光强度；若要更锐利，降到1.2；要柔光，升到3.5 - 切勿在
<filter></filter>外层加style="filter: ..."，CSS filter 会覆盖 SVG filter 且无法继承坐标系
CSS transform 刻度（如伪元素生成）发光受限，慎用 text-shadow
用 ::before 画刻度线再加 text-shadow 是常见误区：它只对文字有效，对 border 或 background 生成的线无效；而且 text-shadow: 0 0 6px #ff9 在高 DPI 屏上会虚、在低帧率设备上易闪烁。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 如果坚持用 CSS，唯一可行路径是：用
box-shadow模拟单向发光，例如box-shadow: 4px 0 8px rgba(255, 153, 0, 0.6)（仅向右发散） - 必须配合
transform: rotate()动态调整方向，否则所有刻度光都朝同一侧，看起来像打灯失误 - 性能隐患：每条刻度都是独立 DOM 节点，
box-shadow触发重绘成本远高于 canvas 或 SVG 方案
发光不是装饰，是视觉层级信号。主刻度高亮必须和数值映射强绑定——比如 value ≥ 80 时才激活 glow，而不是无条件常亮。这点容易被忽略：很多实现把发光写死在样式里，导致异常状态失去辨识度。
立即学习“前端免费学习笔记（深入）”；
