Unity3D 显示图表
之前有不少插件做图表的, 都是不怎么样, 再厉害也比不过 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中直接访问.