echarts vue 柱状图实例_【UE4】嵌入ECharts大数据可视化图表

上纲上线了，先自来水一篇啦。

图表 背景半透明效果参见下篇：

X Tesla：【UE4】嵌入ECharts大数据可视化中国地图​zhuanlan.zhihu.com

【前言】：

虚幻好看的可视化图表要么实现起来麻烦，要么少得可怜，只能借力网页了。

ue4，用蓝图如何实现，数学函数参数的可视化模拟？​www.zhihu.com

所以先说说两种做法：

• 直接网页中整合好6个UI，整体index.html 引入到虚幻中
• 分开的六个UI，6个index[n].html 在虚幻中整合自适应

因为只用到网页图表，所以用第二种方法，而且第二种方法在UE中设置布局较为灵活,添加Button啥的也方便。

【目录】：

1. 引入Echarts图表
2. 虚幻嵌入图表
3. 自定义图表
4. 网页源代码

一、引入Echarts图表

【步骤】：

先按照 大数据可视化【03】——引入各式各样的Echarts 图表 中第二节的步骤（5分钟快速上手Echarts）将单个图表制作出来，（详细代码参见大数据可视化文章步骤）

1. 引入构建好的echarts代码
   1. 把echarts.min.js复制粘贴到Content->EchartsUI->js文件夹路径中 (获取echarts.min.js需要到这里：ECharts Online Builder (apache.org) 在线定制点击下载)
   2. Content->EchartsUI->html文件夹中新建html标准代码( VS新建、然后html:5 生成标准代码)
   3. 代码引入script:src ()
2. 准备DOM容器
   1. css

---

【实现】：

【1】勾选插件

需要勾选 Web Browser 插件我们才可以在UMG中用到它。

【2】创建子UI

• 就WebBrowser（删掉默认的Canvas）
• 调用不同的html文件路径

【3】创建父UI

---

【注意事项】：

• 注意顺序，引入打包好的echarts.min.js文件要先于下面的option js脚本
• 去掉多余下载button的UI的话，toolbox:{feature:{saveAsImage:{}}},这一大堆删掉。

• 虚幻中去掉网页的拖动条需要 overflow:hidden

三、自定义图表

如果想装饰得好看一点，添加其他图表

• 折线图 line
• 圆饼图 pie
• 南丁格尔图 pie
• 竖直柱状图 bar
• 水平柱状图 bar
• 雷达图 radar

Gallery社区中还有一大堆。

• 然后配色自己配，改代码中相应属性的颜色就行了，很直观的。
• 如果要改动多的话，可以css 写好 导入到html当中去。
• 需要注意的是，option 中的color 会覆盖掉我们在css中style声明的color。同时呢，也会将黑色文字变成白色。

然后颜色、文本内容自己随便设置去。

透明感觉还行。

四、网页源代码

    
    
    





   
    

      //引入Echarts脚本