一、引言

最近在工作中遇到了這麼一個需求：

產品想要讓我們的桌面客戶端中顯示覆雜的圖表，類似下圖所示的樣子（圖片來自網路），不排除後期會增加更多複雜圖示的可能性，因此我們需要考慮如何實現這種需求，並能夠支援其需求的擴充套件性

那麼，看到這個需求，我腦海裡進行了一系列的思考：

1. 我們能不能使用 SOUI 原生介面來製作？

答案是肯定的。至少在我現有的實力和時間精力來說，這是不可行的。

2. 那麼，我們能不能考慮嵌入瀏覽器，然後使用 Web 技術完成呢？

通過同事的建議，我找到了百度的開源視覺化庫 ECharts。看了下文件，覺得這個庫做的非常的好，而且穩定更新了很多版本了，非常適合使用 Web 技術跨平臺的需求。因此，我選擇了它。

3. 那麼，在我們現在使用的 Soui 框架中，我們選擇什麼技術嵌入瀏覽器呢？

在我接觸 Soui 的過程中，一共接觸了 3 種嵌入瀏覽器的方法，分別是 wke 、cef 和這篇部落格使用的 miniblink 方式。wke 因為比較老了，對於 H5 的支援並不好，有些需求就無法滿足了（這是 SOUI 官方 Demo 中自帶的嵌入瀏覽器的方式）；cef，嵌入瀏覽器的學習門檻較高，要熟練使用還需要很多時間去探索（關於 cef 我有專門探索過一段時間，在這裡因為專案的特殊性，不能使用 cef）；最後，選擇了國人一位高人開發的 miniblink。

MiniBlink 是一個全新的、追求極致小巧的瀏覽器核心專案（厚顏無恥的使用了作者的話 ）。其相容了 wke 的介面，自己實現了渲染層，並集成了 node，是基於 blink 核心的。本人對於 MiniBlink 還並不瞭解，此處只是作為一個使用者來看待它的。

這一篇部落格中借鑑了 Soui 群裡的一位大神的 SouiAndMb 程式碼，想要獲取的同學可以去 Soui 群裡下載，群號為 229313785。

二、咦？wke 居然不能完全支援 ECharts！

為了偷懶，當然是儘量能少寫程式碼就少寫程式碼咯：）

因此，我這裡直接使用了 Soui 官方 Demo 中的那個預設使用了 wke 核心的嵌入瀏覽器。現在我們使用嵌入瀏覽器來開啟百度 ECharts 的官方示例。

結果是非常尷尬的 T_T

比如說：

這是 Soui 使用 wke 核心顯示的 ECharts 餅圖

而這是 Chrome 中顯示正常的 ECharts 餅圖

但 wke 也不是什麼都不能顯示出來，比如說折線圖還是可以 Hold 住的：

這是 Soui 使用 wke 核心顯示的 ECharts 線圖

而這是 Chrome 中顯示正常的 ECharts 線圖

可見，對於 wke 來說，ECharts 有些是顯示不出來的，那麼這是為什麼呢？

因為 wke 太老了，很多 H5 的特性都沒能支援，而 Chrome 是支援 H5 最好的瀏覽器。

也就是說，ECharts 在顯示某些圖表的時候，使用到了 H5 的新特性，導致我們比較老的 wke 核心無法支援其顯示。

那，接下來我們肯定就要尋找一款能夠支援 H5 的嵌入瀏覽器核心了。

注：這一塊的探索程式碼在 ECharts In Soui 解決方案中的 ECharts In Soui with Wke，很明顯最後的結果是失敗的。

三、在 Soui 中嵌入 MiniBlink

通過網友推薦，我接觸到了 MiniBlink 這一個強大的國人開發的庫。其輕巧、對於 H5 的良好支援給我留下了深刻的印象。

此處，正好 Soui 群裡有位前輩研究過 Soui 中嵌入 MiniBlink 的方法。這裡我直接下載了他的包進行了研究。

這裡，我從使用 Soui 嚮導建立一個 Soui 新專案開始，手把手總結如何在 Soui 中嵌入 MiniBlink 瀏覽器：

1. 新建一個 Soui 專案，此處我命名為了 ECharts In Soui with MiniBlink。
此時，我們的Soui 專案是空的，執行出來只是一個簡單的視窗而已，我們要達到顯示 ECharts 的目標，還需要編寫一個封裝了 MiniBlink 的瀏覽器控制元件。

2. 編寫封裝了 MiniBlink 的瀏覽器控制元件。
a. 在專案目錄下建立一個 controls 資料夾，用來放置我們的 SMiniBlink 瀏覽器控制元件。
b. 這裡，我直接參考了 Soui 群裡前輩封裝的 SMiniBlink 程式碼（想要獲取的同學，可以直接檢視我在 GitHub 上託管的專案，或者進入 Soui 群下載 SouiAndMb 檔案即可）
c. 注意，SMiniBlink.h 需要包含一個 wkedefine.h 的標頭檔案，這是 MiniBlink 自帶的標頭檔案，我們需要包含進去。在專案目錄下建立一個 miniblink 資料夾，將 wkedefine.h 放置進去。同時，修改 SMiniBlink.h 中包含 wkedefine.h 的目錄為 ../miniblink/wkedefine.h。建立好的檔案目錄結構如下：

d. 為了使我們的控制元件可以使用，我們還需要進行控制元件的註冊：開啟 ECharts In Soui with MiniBlink.cpp 檔案，將

SWkeLoader wkeLoader;
theApp->RegisterWindowClass<SWkeWebkit>();

註冊程式碼加入到 Run Application 之前。同時，為了讓其能訪問到 SWkeLoader 這個類（定義在 SMiniBlink 中，控制瀏覽器控制元件的生命週期），我們還需要包含我們的瀏覽器控制元件類

#include "controls/SMiniBlink.h"

3. 至此，我們已經可以通過編譯了。但是，MiniBlink 使用到了 node.dll 動態連結庫，如果程式訪問不到這個檔案，就會報錯。因此，我們還需要拷貝 node.dll 到當前的編譯目錄（解決方案目錄下的 Debug 資料夾中）。

4. 編寫 xml 程式碼使用我們定義的瀏覽器控制元件：完成了這步，執行程式碼你就可以看到一個百度搜索介面了，我們進去搜索 ECharts 開啟示例程式碼，就能看到 ECharts 的顯示了

<wkeWebkit pos="0,0,-0,-0" url="http://www.baidu.com/" name="wke_test"/>

如圖，這就是我們 Soui 使用了 MiniBlink 顯示出來的 ECharts 餅狀圖效果：

嘿嘿，至此，我們就完成了一個支援百度 ECharts 瀏覽器的嵌入啦：）

四、總結

到目前為止，我完成了 Soui 中嵌入 MiniBlink 的任務，卻留下了很遺憾的一個問題未能解決，那就是：

當我在本地編寫 Html 檔案，呼叫 ECharts 庫想要進行圖表的顯示時。通過 Soui 中的 MiniBlink 瀏覽器控制元件來開啟介面，會發現 ECharts 的渲染失敗；但是直接點選 Html 檔案通過 Chrome 瀏覽器開啟，就可以看到 ECharts 的渲染效果。

這是專案 ECharts In Soui with Miniblink 中開啟本地的 Html 檔案試圖顯示 ECharts 的結果：

這是使用 Chrome 直接開啟 Html 檔案的效果：

可見啊，本地彷彿就沒有自動去拉取 ECharts 的 js 庫一樣，直接忽略了後面的柱形圖表的顯示，而後者加載出來了。

不管怎麼樣，儘管開啟本地 Html 網頁顯示 ECharts 還需要繼續調研，但是通過訪問網頁顯示 ECharts 還是沒有問題的（這是當然的咯，MiniBlink 支援 H5 嘛 T_T）

探索總是有益處的，比如說這次去探索了下 MiniBlink 在 Soui 中的嵌入，認識到了這個小巧的庫能夠帶來的喜悅感。

最後，感謝 Soui 和 MiniBlink 的作者和大神們，這是一次愉快的探索過程。

To be Stronger ：）

ps: 想要獲取本篇部落格的實驗程式碼的同學，可以看看這裡（儘管沒有解決本地 Html 載入顯示 ECharts 的問題 T_T 如果你有什麼線索，一定要提供給我，在此謝謝了哈~~~）
wangying2016/ECharts-In-Soui