西门子(中国)授权总代理-西门子工控机授权总代理-绥化市SIEMENS一级经销商

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 柱状图。