之前有不少插件做圖表的, 都是不怎么樣, 再厲害也比不過 ECharts 這些, 於是本地圖表的加載就用它就解決了.
首先 Unity 里面要找一個網頁插件能顯示網頁的, 最強的 ZFBrowser, 它可以提供本地的加載, 只需要在 Assets 同級目錄創建一個 BrowserAssets 文件夾放里面就行了 :
我們直接下 ECharts 的源碼放里面, 就能使用了 :
https://echarts.apache.org/zh/download.html
然后加載網頁就使用 localGame://index.html 這樣的形式就能加載了, 很方便, 因為前面已經做了數據映射的邏輯了 Json的數據映射(基於LitJson), 所以只需要打開 echarts.html 作為基本頁面, 然后往里面傳數據結構就行了, 看一下它的代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 echarts.js --> <script src="./apache-echarts-5.1.2-src/echarts.min.js"></script> <script src="./apache-echarts-5.1.2-src/theme/sakura.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 200px;height:150px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main'), 'sakura'); // 基於准備好的dom，初始化echarts實例 function SetChartSize(width, height) { var mainDiv = document.getElementById("main"); mainDiv.style.width = Number(width) + 'px'; mainDiv.style.height = Number(height) + 'px'; if(myChart != null){ myChart.resize(); } } function SetEChartsDataJson() { var option = JSON.parse(arguments[0]); myChart.setOption(option); if(arguments.length >= 3) { var width = arguments[1]; var height = arguments[2]; SetChartSize(width, height); } } function GetChartSize() { var mainDiv = document.getElementById("main"); var style = getComputedStyle(mainDiv); var width = style.getPropertyValue('width').split('px')[0]; var height = style.getPropertyValue('height').split('px')[0]; return {width:width,height:height} } </script> </body> </html>
在基礎頁面里面添加了幾個方法:
SetChartSize : 可以改變頁面的大小, 一般習慣把它跟UI大小一致, 減少拉伸.
GetChartSize : 獲取頁面大小
SetEChartsDataJson : 這個就是接受C#傳入的數據結構來顯示了, 我們可以先下載各種模板到本地, 然后建立映射然后把修改后的模板傳入.
就這樣, 簡單.
C#調用web的函數也是很簡單的, ZFBrowser 有封裝, 只不過需要都傳入它的一個 JsonNode 里面罷了 :
public static void WebBrowserFunctionCall(ZenFulcrum.EmbeddedBrowser.Browser browser, string functionName, ZenFulcrum.EmbeddedBrowser.JSONNode[] param, System.Action<ZenFulcrum.EmbeddedBrowser.JSONNode> result = null) { if(browser) { var retVal = param != null && param.Length > 0 ? browser.CallFunction(functionName, param) : browser.CallFunction(functionName); if(retVal != null) { retVal.Done((_ret) => { if(result != null) { result.Invoke(_ret); } }); } } }
設置數據需要在 Web 的 onload 之后就行了.
PS : 網頁資源在 Assets 之外的 BrowserAssets 下也是可以正常打包的, 它有自己的打包邏輯, 不過貌似沒有經過壓縮, 還有這個插件不支持 WebGL...
補充一下本地路由的方法, 在使用前端路由的時候一般是 xxx/#/xxx的, 不過本地訪問要減少一個斜杠, 寫成 xxx#/xxx 這樣, 然后前端路由的設置在前端網頁打包的時候要設置好, 不要依賴服務器才行, 這樣才能把網頁包放到Unity中直接訪問.