Oracle BIEE整合百度图形库ECharts

Posted on 2016-05-19 17:37  空余恨  阅读(588)  评论(0)  编辑  收藏  举报

BIEE虽然提供了丰富的图形组件，但是并不能满足所有用户的需求，尤其是互联网行业的用户。

这时我们可以考虑引入第三方的图形库，比如本次将要介绍的ECharts (Enterprise Charts 商业产品图表库)。

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力

更多详情请访问：http://echarts.baidu.com/

由于BIEE的分析提供了叙述视图，该视图支持用户自己编写Html代码，所以我们可以通过叙述视图来将ECharts作为我们的图形展示组件。

下面我们以BIEE自代的Sample Sales主题为例，介绍具体的实现过程。

首先创建包含如下字段的分析：

该分析的逻辑很简单，查看2010年每个月的Revenue及Target Revenue，我们打算以曲线图用来展示，首先我们用BIEE提供来的曲线图来实现

很容易的完成了任务，不过这时用户又提出了新的需求，能不能点击某个图例，就隐藏对应的曲线呢？比如点击1-Revenue，就隐藏1-Revenue对应的曲线，

并且现在的还要支持多选，这该怎么办呢？

答案就是使用ECharts。

叙述视图简介

在刚才的分析里创建一个叙述视图，然后编辑它，如下图所示：

可以看到叙述视图主要由3部分组成，Prefix(前缀)、Narrative(叙述)、Postfix(后缀)另外两个小的设置，分别是换行符和要显示的行数。

我们来简单的看一下，他们分别是怎么工作的：

通过上图，大家看明白了么？前缀和后缀只显示一次，叙述则会根据分析的行数循环执行，如果要引用第几列的内容就用@+编号(由左到右，从1开始)；

如果不想显示全部记录，比如只想显示第一行，那么就可以设置需要显示的行数即可。

注意：不要在中间的叙述区域定义函数，因为那样最终生成的代码里，你的函数会被重复定义

下面我们就开始采用ECharts来实现我们的需求了

1、部署ECharts

在$FMW/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/目录下创建echarts目录，

然后从官网下载echarts-1.3.1.zip，解压之后，将

echarts-1.3.1\echarts-1.3.1\doc\example\www\js目录中的echarts.js和esl.js上传到刚在服务器analyticsRes下创建的echarts目录下。

然后打开console(http://xxxx:7001/console)，更新analyticsRes应用程序

点击“更新”按钮之后，然后“下一步” 、“完成”即可；最后记得点击左上角的“激活更改”。

之后在浏览器中输入http://xxxxx:9704/analyticsRes/echarts/esl.js 如是提示下载文件或者直接在页面中显示了esl.js的内容即表示部署成功。

注：9704是默认端口，请根据自己的情况选择对应的端口

2、编写叙述视图

首先在前缀中引入ECharts，代码如下：

  1. <head>  
  2.     <meta charset="utf-8">  
  3.     <title>ECharts</title>  
  4.     <!--Step:1 Import a module loader, such as esl.js or require.js-->  
  5.     <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->  
  6.     <script src="/analyticsRes/echarts/esl.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10.     <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->  
  11.     <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->  
  12.     <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>  
  13.       
  14.     <script type="text/javascript">  
  15.     // Step:3 conifg ECharts's path, link to echarts.js from current page.  
  16.     // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径  
  17.     require.config({  
  18.         paths:{   
  19.             echarts:'/analyticsRes/echarts/echarts',  
  20.             'echarts/chart/bar' : '/analyticsRes/echarts/echarts',  
  21.             'echarts/chart/line': '/analyticsRes/echarts/echarts'  
  22.         }  
  23.     });  
  24.       
  25.     category_list = [] ; //水平标签数组，本例用于存放月份  
  26.     revenue_list = [] ;  // revenue数组，用于存放12个月的revenue  
  27.     target_revenue_list = []; //target revenue数据，用于存放 12个月的target revenue  
  28.       

可以看到，我们在<head>标签里引入了模块加载器，用来加载ECharts，路径请根据自己的部署情况填写，本例中是：/analyticsRes/echarts/esl.js

然后我们在require.config里配置了echarts的路径，该路径也请根据自己的部署情况填写。

最后我们还定义了三个数组，其含义见注释。

接下来，我们在中间的叙述区域里往三个数组中添加值

  1. category_list.push('@1');  
  2. revenue_list.push(@2);  
  3. target_revenue_list.push(@3);  

注意：字符串需要用单引号

最后在后缀区域添加ECharts的图形逻辑

  1. // Step:4 require echarts and use it in the callback.  
  2. // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径  
  3. require(  
  4.     [  
  5.         'echarts',  
  6.         'echarts/chart/bar',  
  7.         'echarts/chart/line'  
  8.     ],  
  9.     function(ec) {  
  10.         var myChart = ec.init(document.getElementById('main'));  
  11.         var option = {  
  12.             tooltip : {  
  13.                 trigger: 'axis'  
  14.             },  
  15.             legend: {  
  16.                 data:['1- Revenue','5- Target Revenue']  
  17.             },  
  18.             toolbox: {  
  19.                 show : true,  
  20.                 feature : {  
  21.                     mark : true,  
  22.                     dataView : {readOnly: false},  
  23.                     magicType:['line', 'bar'],  
  24.                     restore : true,  
  25.                     saveAsImage : true  
  26.                 }  
  27.             },  
  28.             calculable : true,  
  29.             xAxis : [  
  30.                 {  
  31.                     type : 'category',  
  32.                     data : category_list  
  33.                 }  
  34.             ],  
  35.             yAxis : [  
  36.                 {  
  37.                     type : 'value',  
  38.                     splitArea : {show : true}  
  39.                 }  
  40.             ],  
  41.             series : [  
  42.                 {  
  43.                     name:'1- Revenue',  
  44.                     type:'bar',  
  45.                     data: revenue_list  
  46.                 },  
  47.                 {  
  48.                     name:'5- Target Revenue',  
  49.                     type:'bar',  
  50.                     data: target_revenue_list  
  51.                 }  
  52.             ]  
  53.         };  
  54.           
  55.         myChart.setOption(option);  
  56.     }  
  57. );  
  58. </script>  
  59. /body>  

最终效果如下图所示：

当我们点击图例的，对应的条形图就会被隐藏掉，更多ECharts图形交互功能请参阅ECharts官方网站。

 

以上就是BIEE整合第三方JS图形库的简单流程，更多的情况需要大家自己去处理，另外，此方法最大的问题就是嵌入的图形和BIEE自身事件的交互问题，

 

例如，BIEE原生的曲线图是支持下钻功能的，但是第三方的是不支持的

Copyright © 2024 空余恨
Powered by .NET 9.0 on Kubernetes