企业官网建设流程全解析

1. 方案整体设计与思路拆解

先说说我为什么折腾这件事。之前在做一个某水处理站的上位机监控界面，组态王本身自带的XY曲线、温控曲线用起来总差点意思，客户看到之后提了一嘴：“能不能像网页上那种图表，鼠标放上去能看数值、能缩放、能切换曲线？”这就麻烦了，组态王内置的历史趋势控件虽然也能看趋势，但交互体验和颜值都赶不上现在Web端图表库。当时脑子里第一反应就是ECharts——这东西在Web圈用了很多年，图表类型丰富、交互流畅，而且完全开源免费。问题就剩一个：怎么把ECharts塞进组态王画面里。

其实组态王是支持ActiveX控件的，ECharts本质上是个JS库，没法直接作为ActiveX控件加载，但组态王有一个“HTML控件”或者说WebBrowser控件，能嵌入一个网页。那思路就清楚了：把ECharts相关的HTML页面放在本地，用组态王的HTML控件加载它，再把组态王里的实时变量传给网页，网页里的JS代码收到数据后更新图表。这个方案对既有项目侵入很小，不用改PLC程序，也不用额外装数据库，纯上位机层面就能完成。

这套方案能解决什么问题？我认为最重要的是解决了两类痛点：一是传统组态控件交互能力弱，二是多系统数据展示割裂。以前想看个趋势曲线，要么在组态王里拖个历史曲线控件，配置起来繁琐，要么干脆导到Excel里看，时效性太差。用HTML控件嵌ECharts之后，图表交互性、美观度、二次开发灵活性都上来了，而且ECharts的图表类型足够丰富，折线图、柱状图、饼图、仪表盘、散点图都有，一套代码通吃。

适合谁来参考？如果你在用组态王做上位机开发，或者类似组态软件（比如力控、杰控、WinCC）里做数据可视化，那这篇文章的整个思路都能复用。哪怕你完全没接触过ECharts，只要会写一点HTML和JavaScript，跟着做也能搞定。我会从环境准备、控件配置、页面编写、变量传递几个环节一步步来，并且把我踩过的坑也一并列出来。

2. 环境准备与工具选型

2.1 准备好三样基础物料

在做这件事之前，先把以下三样东西准备好：

• 组态王安装环境，我这边用的版本是组态王6.55，其他版本的操作逻辑大体相近
• ECharts库文件，建议直接去官网下载，我这里用到的是5.x版本的echarts.min.js
• HTML编辑器，手写记事本也行，但推荐用Visual Studio Code，写代码带高亮，调格式方便

组态王版本虽老，但HTML控件在6.5x系列里已经比较成熟，关键的坑不在版本，而在控件属性和路径处理，后面我会专门讲。

2.2 ECharts库文件如何放置

ECharts的echarts.min.js和你的HTML页面最好放在同一个目录下，或者一个明确的子目录里。我把它们放在组态王工程目录下的一个新建文件夹中，这里命名为ChartWeb，路径大致是：

D:\Projects\WaterStation\ChartWeb

里面放了两个文件：一个是echarts.min.js，一个是trend.html。trend.html里面通过相对路径引用echarts.min.js，这样做的好处是，如果整个工程拷到别的电脑上，只要工程目录一起拷走，路径不会出错。组态王工程本身就包含画面、变量、脚本等文件，而HTML资源默认不会被组态王打包管理，所以需要你手动维护这个文件夹，最好在工程文件夹里单独建一个目录，和组态王的文件放在一起，这样整个工程拷贝时不会丢。

2.3 为什么选ECharts而不是其他图表库

这里多说一句选型问题。市面上常见的Web图表库有ECharts、Chart.js、Highcharts、D3.js等，但要嵌入组态王这种老牌工控软件里，稳定性、离线可用性、上手门槛是第一位的。ECharts完全支持离线运行，不需要联网加载CDN资源，对工业现场这种多数时候无法访问外网的场景非常友好。而且它的中文文档齐全，遇到问题查起来快。Chart.js虽然轻量，但图表类型少一些；D3.js自由度最高但学习成本太高；Highcharts商用授权对部分企业不友好。综合下来ECharts是做组态王图表展示的优选方案。

3. 组态王HTML控件的配置与加载

3.1 在画面上放置HTML控件

打开组态王开发系统（TouchExplorer），在画面编辑器中，从工具箱里找到“ActiveX控件”这一类，双击或者拖拽到画面上。弹出的ActiveX控件列表里，能找到HTML控件，不同版本名称略有差异，确认是“Microsoft Web Browser”或者类似描述即可。选定后会在画面上生成一个矩形区域，那就是网页显示区。

放上去之后，右键点击控件，进入控件属性设置。关键的属性是“URL”或“LocationURL”，这个值决定控件加载哪个网页。这里有个非常重要的注意事项：URL一定要写成完整路径，不能用相对路径，而且文件协议要写对。我最初写的是：

D:\Projects\WaterStation\ChartWeb\trend.html

结果死活加载不出来，后来改成：

file:///D:/Projects/WaterStation/ChartWeb/trend.html

也就是把反斜杠换成正斜杠，前面加上file协议，这才能正常显示。如果你把网页放到组态王安装目录下，路径写起来也差不多，但建议还是统一按我上面的方式管理。

有的版本里，HTML控件加载时会调用系统默认浏览器内核，如果组态王运行在旧版Windows Server上，IE版本较老，可能导致ECharts的某些渲染效果异常，这个在后文常见问题里我再详细讲。

3.2 画面打开时自动加载页面

实现了控件加载网页后，下一步要考虑的是加载时机。如果每次打开画面都要手动点一下刷新，体验会很糟糕。所以我在画面的“显示时”命令语言里写了一段脚本，主动刷新一下控件，让页面在画面打开时立即加载。

这里要说一下，为什么需要主动刷新：HTML控件在组态王启动时，经常有一定概率不自动加载URL，尤其是工程文件从其他电脑拷过来或者修改过路径后，很容易出现白屏。手动刷新是最好的兜底方案。具体做法是，打开画面的命令语言编辑器，在“显示时”标签页里添加：

!Controls["HTML控件"].Refresh();

注意，控件名称要和画面上实际放置的控件名称一致。如果你一开始没有给控件命名，默认可能是“控件1”之类的，最好在控件属性里手动给它一个明确的名字，比如HTMLChart，脚本里引用时既清晰又不容易错。

3.3 运行时的免弹窗设置

组态王运行系统在打开含有HTML控件的画面时，默认可能会弹出脚本调试器或安全提示，这是因为WebBrowser控件在加载本地页面时被IE安全策略拦截。解决方式有两种：

• 在画面编程环境里找到“系统配置”里的安全选项，把控件脚本执行级别调低
• 在HTML页面里加入兼容性声明，也就是后面在HTML页面写法中提到的meta标签

我这边是页面代码和系统配置两手抓。系统配置上，如果你熟悉组态王的“系统配置”对话框，找到“运行系统”相关设置，勾选允许ActiveX脚本执行。这两步都做到，运行画面时就不会有弹窗干扰了。

4. HTML页面编写与ECharts图表实现

4.1 页面基本框架与本地引用

这一节是整个方案的核心，我直接给出一个可用的HTML页面模板，并逐段解释每部分的作用。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>实时趋势</title> <script src="echarts.min.js"></script> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #1b2a3a; } #chart { width: 100%; height: 100%; } </style> </head> <body> <div id="chart"></div> <script> // 后续代码放这里 </script> </body> </html>

这里有几个细节需要留意。第一个meta标签是告诉IE内核使用最新模式渲染页面，这在工控机上尤为重要，因为工控机系统普遍老，默认的IE兼容模式会导致ECharts显示异常或动画卡顿。第2个细节是样式里把html和body的宽高都设为100%，并且去掉滚动条，这样图表才能完整撑满整个HTML控件的显示区域。第3个细节是背景色，我用了深色底，这样整个画面和组态王本身的深色工业风格能融合，如果你要嵌入亮色监控界面，可以自行修改背景色。

4.2 初始化图表并配置动态数据

接下来是ECharts本体部分的代码。我先初始化一个折线图实例，然后定义了图表的基本配置项。

var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); var option = { backgroundColor: 'rgba(0,0,0,0)', title: { text: '实时流量趋势', textStyle: { color: '#ffffff' } }, tooltip: { trigger: 'axis' }, legend: { data: ['瞬时流量'], textStyle: { color: '#ffffff' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: [], axisLine: { lineStyle: { color: '#ffffff' } } }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#ffffff' } } }, series: [{ name: '瞬时流量', type: 'line', smooth: true, data: [], lineStyle: { width: 2 } }] }; myChart.setOption(option);

这段代码定义了一个最基础的折线图，坐标轴、图例、提示框都配置好了。现在x轴和y轴的数据都是空数组，等组态王把数据传进来后，我再更新这两个数组。对于一个初次接触ECharts的读者，我建议先把这一套跑通，再慢慢增加图例、平滑曲线、面积填充等效果。要特别注意tooltip的trigger设置成axis，这样鼠标悬浮在图表上时，会以十字线形式显示当前点的值，这种交互在工业数据监控场景里非常实用。

4.3 接收组态王变量的两种方式

组态王和HTML页面之间传数据，最简单的方式是通过URL参数。比如画面加载时URL是这样的：

file:///D:/Projects/WaterStation/ChartWeb/trend.html?value=12.5

trend.html页面在启动时用JavaScript解析URL里的value参数，然后把这个值追加到图表的数据序列里。这种方式实现简单，不需要额外写文件、不需要数据库，适合数据量小、刷新频率不高的场景。但如果页面已经加载完成，想继续更新数据，靠URL跳转就不太合适了，因为你不想让页面反复刷新，否则图表会闪烁、动画会中断。

第二种方式是组态王变量写入本地文件，然后HTML页面定时读取文件内容。这种方式适合高频刷新和持续积累数据的场景，但会引入文件读写延迟和磁盘占用问题，而且需要额外的脚本参与。工程上最常见的做法还是第一种：用组态王画面里的定时脚本或循环脚本，周期性地向控件发出导航请求，每请求一次就往URL参数里塞一个新的数值。页面收到新URL后，不刷新整个页面，而是通过Event或定时轮询的方式去读取最新参数，更新图表。

我实际采用的是定时轮询方式，具体做法是在HTML页面里写一个setInterval定时器，每3秒读取一次URL参数中的value，然后更新图表的数据点。这样既避免了页面整体刷新，也不会因为变量更新太快而频繁操作DOM。组态王侧只需要在画面中添加一个“每隔3000毫秒”执行的循环脚本，脚本里用控件的Navigate方法，给URL追加当前时间的随机参数和最新的变量值，页面就会因为URL变化而触发更新。

4.4 组态王脚本侧变量传递示例

下面给出组态王一侧的脚本写法。假设组态王里已经定义好了“瞬时流量”这个变量，画面上的HTML控件叫HTMLChart，在画面的“循环脚本”里每3秒执行一次，往控件发送带参数的URL：

STRING strUrl; STRING strValue; STRING strTime; strValue = "value=" + StrFromReal(瞬时流量, 2, "f"); strTime = "&t=" + StrFromInt(HTM_GetTickCount(), 10); // 用时间戳避免缓存 strUrl = "file:///D:/Projects/WaterStation/ChartWeb/trend.html?" + strValue + strTime; !Controls["HTMLChart"].Navigate(strUrl);

这里有几个关键细节：

• StrFromReal用来把实数变量转成字符串，且保留两位小数，比如12.34这样显示比较规整
• strTime是一个时间戳参数，因为浏览器内核遇到完全相同的URL可能不触发加载，时间戳能强制每次URL都是新的，页面才会重新解析
• Navigate方法让WebBrowser控件跳转到新URL，这样HTML页面里的JS能获取到最新的value值

这个方案运行起来后，你再打开组态王运行画面，就能看到图表上每3秒多点一个点，同时推进时间轴。如果希望数据点保持在最近N个点，我就在HTML页面里维护一个固定长度的数组，超出长度就把最早的点shift掉，视觉上就是一个滚动更新的实时趋势图。很多工业监控场景不关心很久以前的数据，只看最近几分钟或几小时的变化，这个设计刚好满足需求。

4.5 页面端JavaScript解析参数与更新图表

trend.html里解析URL参数并更新图表的脚本，我做了一个简单的封装：

function getQueryParam(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); var r = window.location.search.substr(1).match(reg); if (r != null) { return decodeURIComponent(r[2]); } return null; } var maxPoints = 60; var xData = []; var yData = []; function updateChart() { var val = getQueryParam('value'); if (val == null || isNaN(parseFloat(val))) { return; } var num = parseFloat(val); var now = new Date(); var timeStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds(); xData.push(timeStr); yData.push(num); if (xData.length > maxPoints) { xData.shift(); yData.shift(); } myChart.setOption({ xAxis: { data: xData }, series: [{ data: yData }] }); } setInterval(updateChart, 3000);

这段代码看起来不长，但里面有几个容易踩坑的地方。第一个坑是用window.location.search来获取参数，如果URL中带中文，可能解析不出来，所以我在URL拼接时只传数字和时间戳，从源头避免编码问题。第二个坑是setInterval的间隔时间和组态王脚本的循环时间要匹配或略小于组态王的刷频率，否则页面还没来得及更新，下一次导航又来了，数据会堆积。我这里采用的是组态王3秒刷新、页面也3秒读取一次，保持同步。第三个坑是ECharts在连续更新大量数据时，如果每次都重建整个option，会造成性能损耗，所以只更新变化的xAxis数据和时间轴的data，这是ECharts增量更新的推荐做法。

4.6 历史曲线与多变量图表扩展

上面讲的是实时曲线。实际工程中，客户还经常要看历史趋势。组态王自带的历史数据库如果配置好，你可以把某段时间范围内的历史数据通过ODBC或DDE方式导出，但因为HTML控件装载的是本地页面，直接访问组态王历史数据不太方便。所以我通常的做法是：组态王侧在运行时按周期把需要的变量值写入一个文本文件，HTML页面里通过JavaScript读取这个文件，再渲染历史趋势。这里不展开文件读写的细节，但思路是一致的：组态王负责采集和存储，HTML页面负责展示。

多变量展示也很容易扩展，你只需要在URL参数里同时传递多个变量值，比如：

?v1=12.3&v2=45.6&v3=78.9

然后在页面里解析三个值，并分别推入三个数据系列。图表的legend里显示三个变量的名称，就能在一个图表里看到多条曲线。实际做水处理项目时，我把进水流量、出水流量、水箱液位都放在一张图上，值班人员一眼就能看出波动关联，工作效率提升非常明显。

5. 实操过程与核心环节实现

5.1 控件加载白屏问题一次解决

我实际操作过程中，最让人头疼的一步就是控件加载后白屏。第一次测试时，画面运行起来，HTML控件区域灰蒙蒙一片，什么都没有。我当时第一反应是URL路径写错了，检查了一下file协议没问题，页面单独在浏览器里打开也正常。后来发现是ECharts库文件本身加载失败了。因为我直接把echarts.min.js放在了ChartWeb目录下，但trend.html里写的引用路径是：

<script src="js/echarts.min.js"></script>

我当时想当然地把JS文件放进了子目录，但实际目录里根本没有js文件夹。这类问题很隐蔽，因为页面本身能打开，只是图表区域不渲染，控制台又没弹错，排查起来浪费时间。建议你写完HTML页面后，先在这个页面上右键查看源代码，确认script标签引用地址是否正确，或者直接用浏览器打开本地页面，按F12查看Console有没有404错误。这段经验让我后面写其他页面时都习惯性地检查资源路径，很多类似问题都能提前避免。

5.2 组态王与HTML页面变量联调

页面代码写好之后，下一步就是联调。先在组态王开发系统里定义一个简单的内存变量，比如“瞬时流量”，初始值设为10。然后在画面上放置一个按钮，按钮的“弹起时”命令语言里写：

瞬时流量 = 瞬时流量 + 1;

这样就有一个手动递增的数据源，方便观察图表是否在更新。接着启动运行系统，打开画面，观察图表上是否每隔3秒多一个点。这里要特别留意一个点：如果图表数据不更新，不要急着怀疑ECharts代码，先确认组态王这边有没有真的把变量值传出去。调试小技巧是在画面里再放一个文本显示框，绑定同一个变量，看看数值有没有变化。如果文本在变但图表不变，问题出在页面JS解析上；如果文本都不变，问题就出在组态王变量刷新或路径传递上。这样逐环节定位，很快就能找到症结。

5.3 刷新频率和数据量权衡

在实际项目中，组态王变量数量多的时候，每3秒刷新一个数据点没问题，但如果画面上同时有好几个HTML控件，每个控件都每3秒导航一次，系统开销就会增加。我的建议是，单个画面里HTML控件的数量控制在3个以内，刷新频率不低于2秒，否则整个运行画面可能会出现卡顿。对于特别高频率的数据更新，比如1秒一次或更快的场景，就不要用HTML控件实时刷新了，可以改为组态王将数据写入内存共享区域，HTML侧用更底层的WebSocket或定时读文件来获取，但这已经超出本文范围，就不展开了。

5.4 图表样式与组态王风格统一

最后一步是风格统一。组态王的画面通常都是深蓝色或灰色调的工业风格，如果HTML页面是白底黑字，嵌进去会特别突兀。我在页面里把背景色设为深色，文字、坐标轴、图例都设为白色，边框也处理成半透明，这样整体看起来是一体的。ECharts默认的主题颜色偏亮，在深色背景上显示效果也可以，但如果你追求更高质感，可以自己定义颜色列表，甚至直接引入ECharts的暗色主题。具体方式是引入主题JS文件，然后初始化时传入主题名称：

var myChart = echarts.init(chartDom, 'dark');

ECharts官方提供了dark等几个主题，效果不错。不过引入主题文件也会增加本地资源，看项目需求取舍。

6. 常见问题与排查技巧实录

6.1 HTML控件白屏的几大成因

白屏这个问题我会单独列一个速查表，因为遇到的概率太高：

白屏的时候不要着急改代码，先在电脑上用浏览器直接打开那个HTML文件，验证页面本身是否正常。页面正常就一定是组态王和HTML控件之间的路径或缓存问题；页面报错就先把页面调通再回到组态王环境里测试，可以节省大量时间。

6.2 变量值不更新的检查顺序

如果变量值不更新，按照以下顺序排查：先检查组态王画面循环脚本是否在执行，可以在脚本里临时加一个写日志动作，确认脚本有没有被触发；然后确认HTML页面里getQueryParam解析到的value值是否为空，可以在图表上方临时加一个div显示解析到的值，调试完再隐藏；最后检查组态王波形刷新是否与脚本周期同步运行，如果组态王运行系统的画面刷新频率设置过低，也会导致变量在画面显示滞后。我因为这个原因吃过亏：组态王默认画面刷新频率需要检查，如果刷新频率调成“仅当改变时”，一些变量变化频率高但脚本周期固定时，画面数据会看起来像卡住了一样。

6.3 旧版IE内核导致渲染异常

工控机普遍装的还是Windows 7或者Windows Server 2008，组态王运行系统调用的WebBrowser控件内核是IE7或IE8甚至更低。ECharts 5.x版本对旧浏览器的兼容性一般，某些动画效果和半透明渲染可能在旧IE上表现不佳。解决办法有两个：一是，在页面head里加上X-UA-Compatible的meta标签，让浏览器以Edge模式渲染；二是，如果工控机环境实在过于老旧，把ECharts版本降级到3.x，我当时在某个现场就是因为客户机器还在用老旧的IE内核，ECharts 5版本图表完全无法显示，换成3.x版本后恢复正常。如果你工控机的系统比较旧，建议优先选择ECharts 3.x或者4.x，稳定性更好。

6.4 大屏展示场景的字体与缩放问题

做大屏展示时，客户通常会用1080P甚至更高分辨率的显示器，如果HTML页面里的文字是固定像素大小，在高分屏下会显得很小。解决办法是在ECharts配置里使用百分比和rem单位，或者根据屏幕宽度动态计算字体大小。我提供一个简单的方式，在初始化ECharts之前，根据window.devicePixelRatio调整canvas的清晰度，同时设置图表的字体为相对值：

myChart = echarts.init(chartDom, null, { devicePixelRatio: window.devicePixelRatio || 1 });

这样在高分屏上，图表边缘会更清晰，字体大小也可以配合CSS中的vw单位做自适应。不过说实话，组态王画面本身的分辨率是固定的，HTML控件的大小也是固定的，所以字体问题的处理优先级并不高，更多是细节打磨时做做调整。

6.5 现场部署时资源文件丢失的坑

最后一个常见问题是工程拷贝后HTML资源文件丢失。很多工程师会把组态王工程从开发电脑拷贝到现场工控机，结果发现图表不显示，原因往往就是ChartWeb这个文件夹没有跟着工程拷贝，或者拷过去之后路径变了。这里强烈建议在组态王工程主目录下建立固定的资源子目录，比如工程根目录下的ChartWeb，然后URL使用相对路径形式：

file:///./ChartWeb/trend.html

但组态王里的URL是写死字符串，不好动态获得工程根目录。有个取巧的办法：在组态王画面的“显示时”脚本里，先获取当前工程路径，再拼出完整URL。组态王提供了函数可以获得当前开发工程路径，你可以用它拼接，这样工程不管放到哪台电脑、哪个目录，都能自动适配路径，不会因为路径写死而找不到资源。这也是我后来养成的习惯，所有外部资源都通过脚本动态拼接路径，不会再出现拷机后白屏的问题。

7. 进阶扩展：从单张图表到数据驾驶舱

当单张趋势图稳定运行后，不少项目会提出更进一步的需求：把多个图表聚合到一个画面里，形成一个数据驾驶舱。比如水处理项目中，除了实时流量趋势，还要显示各水池液位、设备运行状态、告警信息等。这个需求用HTML控件可以继续扩展，只要在同一个HTML页面里多放几个div，分别初始化为不同的图表实例，然后通过组态王侧传递不同的URL参数，页面端就可以一次更新所有图表。

我实际做的某跨平台系统中，页面里放了4个图表，分别显示流量趋势、压力趋势、液位柱状图和设备运行状态饼图，URL参数一次传了6个变量。组态王侧每3秒导航一次，页面端每3秒解析一次全部参数，并分发给对应的图表实例。运行时整体流畅，CPU占用也正常。不过这也意味着调试复杂度增加了，万一某一个图表出问题，整个页面都会受影响，所以建议增加错误捕获机制，比如把一个图表的数据更新单独包在try-catch里，避免一个异常导致全页面卡死。

如果你后续要做数据驾驶舱，强烈建议把页面组织成一个单页应用，所有图表的数据更新逻辑集中统一管理，组态王侧只负责传数据，页面端负责数据处理和展示。这样后期加图表、改布局都方便得多。

8. 关于这个方案的真实体会

我在实际项目里反复折腾过这个方案，最大的感受是：组态王加HTML控件这条路，几乎把工控组态软件的封闭性打开了一个口子。以前想做复杂可视化，总被组态软件自身的控件能力限制住，现在网页端成熟的技术栈都能往里搬。ECharts只是其中之一，你还可以用同样的方式内嵌地图、视频监控、3D模型，原理都是一样的。

我个人的实际体会是，做这类集成时一定要有“最小可运行原型”的意识。先把最简单的折线图画出来，确认组态王变量能传到页面里，再逐步加多变量、加样式、完善交互。不要一上来就想着做得很复杂，因为组态王环境里的调试手段比纯Web开发少得多，出问题时定位问题的时间成本很高。

最后再分享一个小技巧：调试这类HTML页面时，不要只盯着组态王运行画面看。你把trend.html在普通浏览器里打开，通过手动修改URL参数的方式模拟组态王传值，先把页面端调通，再回到组态王环境里联调。这样两边隔离调试，效率会提升很多。希望这篇文章能帮你少走一些弯路。