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中直接访问.

posted @ 2021-09-01 15:15  tiancaiKG  阅读(921)  评论(0)  编辑  收藏  举报