从零开始把echarts接入到unity中使用

之前写了一些通过vue.js把echarts引入到unity中的,但是相对于没有js基础的人,使用vue还是有点困难的,很多小伙伴私聊我甚至连vue.js的环境都不会搭建,基于这个原因,我这一篇就使用最简单的js,不使用任何框架,把echarts接入unity的流程从头到尾讲一遍。

首先,我们打开echarts官网https://www.echartsjs.com/zh/index.html,找到下载页,通过github下载echarts的依赖文件

从零开始把echarts接入到unity中使用_第1张图片

对于小白来说,直接下载是最方便的,我下载的是4.5.0的版本,下载好后解压文件,如果你把源码都下载下来了,只需要dist文件里面的内容就足够了,因为dist是经过编译打包出来的文件

从零开始把echarts接入到unity中使用_第2张图片

接下来,我们新建一个文本,重命名为mychart.html,为了方便,我直接把这个文件放到dist里面

从零开始把echarts接入到unity中使用_第3张图片

接着,我们通过文档来写这个文件,打开echarts文档下面的教程

从零开始把echarts接入到unity中使用_第4张图片

从零开始把echarts接入到unity中使用_第5张图片

在教程中我们可以看到,它是先引入echarts文件,然后在设置尺寸,最后是具体的代码,这个我们就不多说了,我们直接把教程中的完整代码粘贴上去:




    
    ECharts
    
    


    
    

注意:因为我们前面是把我们自己建的mychart文件放在dist里面,它跟我们需要引入的echarts.min.js是同一个目录下,才这样引的,如果你放在别的位置,需要修改一下引入的路径

接着,我们可以直接代开我们建的html文件,预览一下效果:

从零开始把echarts接入到unity中使用_第6张图片

如果你想要其他类型的图表,直接找到echarts的官网实例,直接打开,粘贴相应的代码就可以了

从零开始把echarts接入到unity中使用_第7张图片

接下来,就轮到我们的unity了,首先,在unity中导入Embedded Browser插件,插件可以在我们的公众号后台回复关键字“browser”获取

插件导入unity后,在跟Assets文件同一目录下,新建一个文件夹,命名BrowserAssets,不可以其他名称从零开始把echarts接入到unity中使用_第8张图片

然后,把我们刚刚的dist里面的文件,包括我们新建的html文件拷贝进去

从零开始把echarts接入到unity中使用_第9张图片

接着打开unity,找到插件其他一个demo,路径设置为localGame://mychart.html

从零开始把echarts接入到unity中使用_第10张图片

运行unity,看看效果

从零开始把echarts接入到unity中使用_第11张图片

最后提醒一下,如果图表需要请求后台数据,需要在链接上加上http,具体可以查看插件的readme文件,考虑到有些同学下载github的文件比较慢,我把echarts的dist文件上传了,关注我公众号,回复关键字“echarts”获取,unity网页插件回复关键字“browser”获取

 

你可能感兴趣的:(Unity3D)