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 控件列表中拖動“WinCC WebBrowserControl（Chromium）”控件到畫面中。

自動彈出屬性窗口。

設置“窗口標題”為“0 - 無”。

取消勾選“可調整尺寸”。

在 URL 輸入框中選中 about:blank，按 Ctrl+V 組合鍵，將剛剛復制的 html 文件的路徑粘貼到這里，然后手動刪除路徑首尾的雙引號。

單擊“工具欄”頁簽，取消勾選“顯示工具欄”。

單擊“狀態欄”頁簽，取消勾選“顯示狀態欄”。

然后單擊“確定”按鈕。

調整控件的位置和尺寸。

Zui后單擊“保存”按鈕，然后單擊“運行”按鈕激活WinCC。

現在就可以看到在 WinCC 畫面中顯示的 ECharts 3D 柱狀圖。