最省事方案是用::before伪元素在body或主容器加固定水印，需设position:fixed、z-index≥9999、transform:rotate(-30deg)和opacity:0.08，并动态注入内容。

用 ::before 伪元素加固定水印最省事

仪表盘页面通常结构稳定、内容区域明确，::before 是最快落地的方案。它不污染 DOM，也不影响 React/Vue 组件的渲染逻辑，适合在 body 或主容器上直接覆盖一层轻量水印。

常见错误是直接写 body::before { content: "©2026" } 却没设 position: fixed 和 z-index，结果水印被内容遮住或随滚动消失。

• 必须加 position: fixed（不是 absolute），否则滚动时水印会移出视口
• z-index 至少设为 9999，避免被图表库（如 ECharts、Chart.js）的 canvas 层压住
• 用 transform: rotate(-30deg) + opacity: 0.08 控制可读性与干扰度，太淡看不清，太浓影响数据阅读
• 文字内容建议动态注入（比如从 data-user-id 属性读取），避免硬编码导致多人共用同一水印

Canvas 水印防截图盗用，但要注意 resize 重绘

仪表盘常被截图传播，纯 CSS 水印一删即没；Canvas 方案把水印“画进”视觉层，截图时会一并捕获，适合对版权敏感的场景。

关键坑在于：Canvas 初始尺寸按 window.innerWidth/window.innerHeight 设置后，窗口缩放或切换横竖屏时不会自动更新，水印会拉伸、错位甚至消失。

• 必须监听 resize 事件，每次触发都调用 canvas.width/canvas.height 重设尺寸，并重新 fillText
• 避免在 requestAnimationFrame 里反复绘制——仪表盘本身可能已有高频渲染，叠加 Canvas 绘制容易掉帧
• 水印文本别用固定像素字号（如 24px），改用 1.2rem 或 2vw，适配高分屏和缩放
• 如果仪表盘用了 iframe 嵌入子应用（如报表模块），Canvas 只能作用于当前 window，iframe 内容需单独注入

给 ECharts 图表加水印，别碰 graphic 配置项

ECharts 自带 graphic 支持图层绘制，但它是 SVG 渲染模式下的附加图形，导出 PNG 时默认不包含，且在 Canvas 渲染模式下完全无效——也就是说，你配置了也白配。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

真正可靠的方式，是把水印画在 ECharts 容器的父级 DOM 上，用绝对定位盖住整个图表区域。

• 不要依赖 option.graphic，它既不跨渲染引擎，也不保证导出一致性
• 给 ECharts 的 div 容器加 position: relative，再用一个 div.watermark-overlay 绝对定位覆盖，设置 pointer-events: none
• 如果图表支持多主题（light/dark），水印颜色要同步切换，否则深色背景上灰字看不见
• 避免用 z-index: -1 把水印塞到图表下面——ECharts 的 tooltip、markLine 等浮层会把它挡住

动态水印内容别写死，用 document.currentScript 读取参数

仪表盘常需绑定用户身份（如工号、部门）、访问时间或会话 ID，这些不能靠后端模板硬塞，得前端运行时注入，否则多个用户看到同一份静态 HTML 就全一样了。

最容易被忽略的是加载时机：如果水印 JS 在 DOMContentLoaded 后才执行，而仪表盘数据已渲染完毕，水印可能盖不住刚插入的卡片或表格。

• 把水印脚本放在 末尾，用 document.currentScript 获取当前 script 标签的 dataset 属性传参，例如：<script data-user="U12345" src="watermark.js"></script>
• 不要等 window.onload，它等所有图片、字体加载完，延迟太高；改用 requestIdleCallback 或直接在 script 标签内执行
• 时间戳别用 Date.now() 一次生成，应每 30 秒刷新一次 DOM 中的水印文本节点，防止截图后水印时间长期不变
• 若仪表盘支持离线缓存（PWA），水印 JS 必须标记 defer 或用 type="module"，否则 Service Worker 可能缓存旧版本导致用户信息错乱

Canvas 水印看似牢靠，但仪表盘里大量使用第三方可视化库、iframe 和动态 DOM 插入，真正难的从来不是“怎么画”，而是“画在哪、什么时候画、画几次、画完会不会被覆盖”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！