博客 · Custom Web Control
仪表盘 Custom Web Control 精选：WinCC Unified 和 WinCC V8 最好用的 6 款（免费）
仪表盘 Custom Web Control 到底哪款好用？2026 年 10 月，我们把 HMIx 目录里的仪表类 Custom Web Control 挨个打开了一遍——九个表盘，外加两个数字仪表——凑近看了每一张预览图，读完了每一份产品说明，最后留下 6 款：放进 WinCC Unified 或 WinCC V8 画面里毫不犹豫的那种。全部免费，全部是 CWC ZIP 包，而且都有可以绑定到变量的属性。
- Custom Web Control
- CWC
- WinCC Unified
- WinCC V8
- TIA Portal
- 仪表盘
- HMI 看板
- SCADA 控件
速览清单
时间紧？直接跳到你需要的那块表。
为什么值得用仪表盘 Custom Web Control
仪表盘是仪表行业最古老的招数，但至今依然管用。操作员还没读数字，就已经看到指针落在绿区、黄区还是红区——这正是压力、速度、电流和温度总会以表盘的形式出现在 WinCC Unified 画面上的原因。
仪表盘 Custom Web Control（CWC）比一张静态图走得更远。它是一个小型 Web 应用：HTML、CSS 和 JavaScript 打包成一个 ZIP，由 WinCC Unified（TIA Portal）和 WinCC V8 在画面中运行。它开放一组接口属性，比如 minValue、maxValue 或 warnThreshold，你可以把它们绑定到 HMI 变量；而且和动态 SVG 不同，它能实时显示数值、让指针动起来，还能触发事件，比如数值超限。
什么样的仪表盘 Custom Web Control 才值得下载
上榜单之前，先亮出我们的标尺。下面是我们看重的几点，大致按“缺了它有多让人抓狂”排序：
- 数值要看得清。 指针适合看趋势，但操作员终究还是要看数字。最好的仪表会在表盘旁配上清晰的数字显示和单位。
- 区间和限值要能配置。 警告和报警阈值、设定值标记或彩色区间，能把一个好看的表盘变成一台真正的仪表，告诉操作员什么时候该紧张。
- 接口要有文档。 产品说明里写明属性名，打开 TIA Portal 之前你就知道要绑定什么。只写一句“九个属性”的说明，进不了前六。
- 外观要沉稳。 深色扁平背景、清晰的刻度，颜色要能调得素一些，好放进秉承 ISA-101 理念的高性能画面。
- 种类要丰富。 与其挑六个大同小异的表盘，我们宁可每种用途只选一位冠军：全能型、高度可配置型、速度、多区间工艺值、带设定值的压力表，以及适合小面板的极简仪表。
我们是怎么挑的（以及我们没做什么）
我们把 2026 年 10 月 HMIx 目录中以 Custom Web Control 形式发布的免费仪表、计量表和表盘全部搜了一遍。每一个都看了它的真实预览图（不是目录里那张顶着大标题的封面），并读了产品说明，看它在文档里列出了哪些属性、事件和方法。下载量和评价只在难分高下时才拿来参考，因为上个月才发布的仪表，还没来得及攒下这两样。
产品说明里没写属性名的仪表，哪怕再受欢迎，也只能进荣誉提名：我们不会让你去绑定连名字都说不出的属性。还有一点：那款极简弧形 Gauge 发布时用的是一块又高又空的画布，所以我们在本页裁掉了空白背景，图形本身一笔没动。也得先说句实话：我们评判的是预览图和文档，并没有把这些控件放进真实的 Runtime 里跑过。它们都是用 AI 生成的，每个产品页面都会提醒你：上生产之前，先在你自己的 TIA Portal 项目里测试。
6 款最佳仪表盘 Custom Web Control，逐一点评
每一款都附上真实预览图、我们喜欢的地方、需要留意的地方，以及产品说明中列出的属性，最后是目录缩略图：点击即可打开产品页面，免费下载这款仪表。
01综合最佳
Circular Analog Gauge
如果只能留一个，那就是它。一块带深色表圈的圆形仪表，240 度刻度从 0 到 100，涂成绿、黄、红三段，金属指针配着像模像样的轴心；下方是等宽字体的数字读数，琥珀色的 64.5 显示在单位“BAR”上方，两侧标着 MIN 和 MAX。它看起来就是一台真正的盘装仪表，而不是网页上的图表。
真正打动人的是它的接口读起来就像一份仪表数据表：value 是工艺值，minValue 和 maxValue 是量程，warnThreshold 和 alarmThreshold 是限值，safeZoneColor、warnZoneColor、alarmZoneColor 和 backgroundColor 用来对齐你的配色，深浅皆可。数值越过边界时触发 ThresholdExceeded 事件；想用脚本驱动，还有 setValue 和 resetLimits。
它也是榜单上最新的仪表，2026 年 9 月才发布，所以下载量还不高。别被这个数字骗了。
我们喜欢的
- 模拟指针和数字读数集于一台仪表
- 警告和报警阈值，并带事件
- 区间颜色可调成灰色调的 ISA-101 风格配色
需要留意
- 圆形表圈需要正方形区域：放在又宽又矮的位置会浪费空间
- 说明里提到单位字符串可自定义，却没写属性名：请在 TIA Portal 的接口列表中查找
可绑定属性
- value
- minValue
- maxValue
- warnThreshold
- alarmThreshold
- safeZoneColor
- warnZoneColor
- alarmZoneColor
- backgroundColor
02可配置性最强
Generic Gauge
如果你喜欢把每一根刻度线都调到满意，这款就是为你准备的。粗壮的青色弧沿 0 到 8000 的刻度伸展，数字大而清晰，量程上端变成红色，两个小三角——一黄一红——分别标出设定值和限值。感觉就像一台设计精良的机器上的转速表。
它有 40 个属性，几乎都在说明里写明了名字。minScale 和 maxScale 设定量程，minAngle 和 maxAngle 设定扫角，setpointValue 和 limitValue 放置标记，setpointVisible 和 limitVisible 控制标记的显示与隐藏。tickWidth 和 tickLength 能让它从精致的仪器变成粗犷的工业表；它可以顺时针或逆时针转动，数值超限时，LimitExceeded 事件还能触发 HMI 脚本。
我们喜欢的
- 设定值和限值标记可显示或隐藏
- 刻度数字大，非常易读
- 字体、刻度和布局全部可调
需要留意
- 在发布的预览图里，“PRESSURE”标签底部被截断，也看不到数字读数：调整边距类属性，并在你的项目中检查
- 四十个属性，第一次配置要花点时间
可绑定属性
- minScale
- maxScale
- minAngle
- maxAngle
- setpointValue
- limitValue
- setpointVisible
- limitVisible
- tickWidth
- tickLength
03速度和转速首选
Speedometer Gauge
榜单里的汽车仪表盘。深色表盘上是 0 到 220 的密集刻度，进度弧随数值上升逐渐变色，一根白色指针，下方“SPEED km/h”标签下还有一个大号数字读数。一个字都不用读，你就知道它测的是什么。
产品说明列出了 23 个属性。currentValue 驱动指针，startAngle 和 endAngle 决定刻度范围的形状，zones 数组把刻度划分成彩色区间，unitText 可以把 km/h 换成 rpm、m/min 或者你的输送线用的任何单位。showGlassEffect 加上一层径向玻璃效果；脚本方面，还有 HighLimitReached 事件以及 setValue 和 resetToZero 方法。
我们喜欢的
- 一眼就能认出是速度或转速表
- 数字读数大而清晰
- 区间和单位文字可配置
需要留意
- 彩色渐变弧放在灰色调的 ISA-101 风格画面上太抢眼
- 说明里有最大值属性（
maxValue），却没有最小值属性：请在 TIA Portal 中查看完整接口
可绑定属性
- currentValue
- maxValue
- startAngle
- endAngle
- zones
- progressColor
- showGlassEffect
- unitText
- valueFontSize
04分区着色工艺值首选
Gauge
一款干净、现代的表盘，适合任何工艺值。0 到 100 的蓝色刻度在接近上端时过渡为绿、黄、红三段，一根细长的红色指针指向当前值，中央显示“PRESSURE”和 65.5 bar 的读数。素净、利落，放在深色的中控室画面上非常协调。
它有 36 个属性，想要分区又不想折腾，选它就对了。currentValue、minValue 和 maxValue 设定量程，progressColor 和 pointerColor 保证数值清晰可读，splitNumber 和 subdivisionCount 决定刻度的疏密。说明里还列出了 ValueChanged 和 HighLimitReached 事件，以及 setValue 和 resetToZero 方法。
我们喜欢的
- 开箱即带清晰的多色区间
- 刻度疏密可精细调节
- 外观克制，适合深色 HMI 主题
需要留意
- 预览图里的刻度数字偏小：请按实际画面尺寸检查
- 说明里描述了区间，却没写定义区间的属性名
可绑定属性
- currentValue
- minValue
- maxValue
- startAngle
- endAngle
- progressColor
- pointerColor
- showGlassEffect
- splitNumber
- subdivisionCount
05设定值和高限标记首选
Pressure Gauge
专为液压和气动打造的一款。白色指针扫过青色弧段，弧段下衬一块椭圆形玻璃底板；绿色三角标出 120 处的设定值，红色三角标出高限，底部读数为“PRESSURE 145.5 BAR”。做过压力测试的人，一看就明白这两个标记是什么意思。
产品说明列出了 40 个属性：currentValue 管数值，startAngle、endAngle 和 splitNumber 管刻度。它也是榜单上事件最丰富的仪表：HighLimitReached、LimitExceeded 和 SetpointReached，外加一个 setLimit 方法，可在运行时调整阈值。setpointPadding 等径向偏移属性能把每个标记精确放到你想要的位置。
我们喜欢的
- 设定值和限值标记各带事件
setLimit可在线修改阈值- 布局控制项多，适合拥挤的看板
需要留意
- 预览图里刻度数字几乎看不见：用到面板上之前先提高对比度
- 椭圆底板比表盘更宽；如果和你的风格不搭，可以关掉
showGlassEffect或修改backgroundColor
可绑定属性
- currentValue
- startAngle
- endAngle
- splitNumber
- showGlassEffect
- pointerColor
- backgroundColor
- setpointPadding
06小面板极简仪表首选
Gauge
有时候，少即是多。这款就是一道粗粗的青色半圆，中间一个大大的“72”，下面是标签“Gauge”，底部标出量程两端的 0 和 100。没有刻度，没有玻璃效果，没有任何分散注意力的东西：正适合放进 Unified Comfort Panel 上的一排 KPI 卡片里。
八个属性，一分钟就能绑好：数据用 gaugeValue、minValue 和 maxValue，文字用 gaugeLabel 和 unitText，彩色分段用 zones，另外还有 backgroundColor 和 needleColor。数值跨越区间时触发 ThresholdExceeded 事件，resetValue 则把它恢复到基准值。
我们喜欢的
- 数值巨大清晰：非常适合 KPI 行
- 只有八个属性
- 说明称已针对桌面和移动 HMI 面板优化
需要留意
- 预览图里数值为 72 时弧段看起来已经全满，也看不到指针，尽管有
needleColor属性：真正依赖它之前，先测试填充的实际表现 - 0 和 100 两个标签在深色背景上偏暗
可绑定属性
- gaugeValue
- minValue
- maxValue
- gaugeLabel
- unitText
- zones
- backgroundColor
- needleColor
荣誉提名：另外 5 款值得一看的仪表和计量表
这些控件颜值都不错，没挤进前六，主要是因为产品说明里没写出你要绑定的属性名。点击任意缩略图即可打开产品页面。
没找到你要的仪表？用 AI 免费做一个自己的（或改一个现成的）
坦白一件事：本文里的每一款仪表，都是用 HMIx AI 生成器做出来的。所以我们可以脸不红心不跳地说：如果其中没有一款完全符合你的工艺需要，几分钟你就能生成一个自己的。
用大白话描述这台仪表（比如“270 度压力表，量程 0 到 16 bar，ISA-101 灰色调，带高限标记和保留一位小数的数字读数”），生成器会一步步带你走完：设计外观、确定要在 WinCC 中使用的属性、事件和方法、用仿真试各种数值，最后打包出适用于 WinCC Unified 和 WinCC V8 的 Custom Web Control。如果你只需要一幅轻量的图形，同一个工具还能生成动态 SVG。
- 改造榜单上的任意一款：在它的产品页面上点击“在 AI 生成器中编辑”按钮，就能直接在生成器里打开它，随时可以提修改要求，比如“去掉玻璃效果”“数值显示两位小数”或者“加一个低限标记”。本文中的“用 AI 编辑”链接也是同样的作用。
- 免费试用：不注册账号也能直接开始，每天有一小笔积分额度；Community 套餐也是免费的。
- 成果归你使用：下载控件包，像本页其他仪表一样放进你的 TIA Portal 项目即可。
如何在 WinCC Unified（以及 WinCC V8）中使用仪表盘 Custom Web Control
精简版，留给已经选好仪表的你。我们的 Custom Web Control 指南配有示意图和截图，每一步都讲得很细。
下载 ZIP
打开产品页面，用免费账号登录，然后下载仪表。下载的 ZIP 中包含说明文档，以及名为
{GUID}.zip的控件包：你需要的是这个内部文件。复制到你的 TIA Portal 项目中
把
{GUID}.zip文件保持压缩状态，复制到项目文件夹下的UserFiles\CustomControls中（如果这两个文件夹不存在，就自己新建）。不要解压。刷新“我的控件”并拖到画面上
在 TIA Portal 中，打开工具（Tools）任务卡，展开“我的控件”（My controls）窗格，然后点击更新按钮。仪表会出现在列表中：把它拖到画面上，并设置一个合适的尺寸。
绑定并测试属性
选中控件，在巡视窗口（Inspector window）中打开“属性 → 属性 → 接口”（Interface）。把数值属性（
value、currentValue、gaugeValue……每款仪表的叫法都不一样）绑定到一个内部变量，再为同一个变量添加一个 I/O 域，然后启动 Runtime：输入几个数值，看着指针动起来。确认没问题后，再换成真实的 PLC 变量。在 WinCC V8 中
本文所有入选仪表的产品页面都标注了兼容 WinCC V8。控件包是同一个；在该环境中导入和组态 Custom Web Controls 时，请按照 WinCC V8 的文档操作。
进阶提示：仪表只负责显示数据，所以绑定数值时请保留“只读”（Read only）勾选。只有控件本身需要回写变量的属性，才取消勾选，产品说明里也有这样的提醒。另外，量程属性要设成仪表的实际量程：0–16 bar 的变送器配上默认的 0–100 量程，指针就会指错位置。
阅读完整的 Custom Web Control 指南常见问题
这些仪表盘 Custom Web Control 真的免费吗？
是的。本文中的每款仪表都在 HMIx 上作为免费产品发布。你只需要一个免费账号就能下载。
它们能在 WinCC Unified Comfort Panel 和 WinCC V8 上使用吗？
它们的产品页面列出的兼容性包括 WinCC Unified（含 Unified Comfort Panel）和 WinCC V8。和任何 AI 生成的控件一样，上生产之前，请在你自己的项目和目标设备上测试实际表现。
做仪表盘，为什么用 Custom Web Control 而不是动态 SVG？
动态 SVG 是一幅轻量的图形，它的属性可以绑定到变量，但它不能在运行时修改文字，所以无法在指针旁显示实时数值。Custom Web Control 是一个小型 Web 应用：它能显示数值、让指针动起来、对阈值作出响应，并向你的 HMI 脚本触发事件。对于需要清晰读数和限值的仪表，CWC 是顺理成章的选择。
ZIP 要复制到 TIA Portal 项目的哪个位置？
把内部的 {GUID}.zip 文件不解压，直接复制到项目文件夹的 UserFiles\CustomControls 中。然后在工具（Tools）任务卡的“我的控件”中点击更新，再把控件拖到画面上。
可以把颜色和区间改成符合高性能 HMI 的配色吗？
可以。六款入选仪表都开放了颜色属性，大多数还有区间或阈值。背景设成灰色，鲜艳的颜色只留给警告和报警范围，这样颜色对操作员才有意义。
我可以修改其中某款仪表吗？
当然可以。你可以自己修改控件的 HTML、CSS 和 JavaScript，也可以在产品页面上点击“在 AI 生成器中编辑”，用大白话提出修改要求。第二种方式通常更快，因为生成器会替你处理好接口和打包。
我们的结论
如果只下载一个，就选 Circular Analog Gauge：指针、数字读数和报警阈值集于一台实实在在的仪表。速度或转速，选 Speedometer Gauge；带设定值的压力测试，选 Pressure Gauge；喜欢把每根刻度线都调到位，选 Generic Gauge；分区工艺值，选带蓝色刻度的那款 Gauge；紧凑的 KPI 行，选极简版 Gauge。
如果你的仪表比这些都更奇葩（现实中总是如此），别忘了，做出它们的那个生成器，离你只有一次点击。