之前有不少插件做图表的, 都是不怎么样, 再厉害也比不过 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=" 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,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...