01
第一步
访问 Apache ECharts 官网:https://echarts.apache.org/zh/index.html
单击“示例”菜单。
向下滚动左侧条目,单击“3D柱状图”。
单击“Bar3D - Punch Card”图形。
单击“下载示例”按钮,下载 bar3d-punch-card.html 文件。
将文件拷贝至 WinCC项目文件夹/GraCS文件夹下面。
02
第二步
访问 github 网站,https://github.com/search。
在搜索框中输入“echarts”。
单击 apache/echarts。
单击“dist”文件夹。
单击“echarts.min.js”。
单击“Download raw file”按钮,下载 echarts.min.js 文件。
将文件拷贝至 WinCC项目文件夹/GraCS 文件夹。
03
第三步
在 github 网站搜索“echarts-gl”。
单击 ecomfe/echarts-gl。
单击“dist”文件夹。
单击“echarts-gl.min.js”。
单击“Download raw file”按钮,下载 echarts-gl.min.js 文件。
将文件拷贝至 WinCC项目文件夹/GraCS 文件夹。
04
第四步
在 bar3d-punch-card.html 文件上右键单击,选择“打开方式>记事本”。
找到 echarts.min.js 文件的引用位置,将其路径删除只保留文件名称。
找到 echarts-gl.min.js 文件的引用位置,将其路径删除只保留文件名称。同时取消其注释。
然后退出并保存文件。
保持 html 文件选中状态,然后单击资源管理器“主页”菜单,单击“复制路径”按钮。
05
第五步
打开 WinCC 图形编辑器,从 ActiveX 控件列表中拖动“WinCCWebBrowserControl(Chromium)”控件到画面中。
自动弹出属性窗口。
设置“窗口标题”为“0 - 无”。
取消勾选“可调整尺寸”。
在 URL 输入框中选中 about:blank,按 Ctrl+V 组合键,将刚刚复制的 html文件的路径粘贴到这里,然后手动删除路径首尾的双引号。
单击“工具栏”页签,取消勾选“显示工具栏”。
单击“状态栏”页签,取消勾选“显示状态栏”。
然后单击“确定”按钮。
调整控件的位置和尺寸。
Zui后单击“保存”按钮,然后单击“运行”按钮激活WinCC。
现在就可以看到在 WinCC 画面中显示的 ECharts 3D 柱状图。