BIEE整合百度图形库ECharts

来源：互联网发布：网络等级保护五级编辑：程序博客网时间：2024/05/19 12:29

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，代码如下：

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

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

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

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

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

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

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

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

    // Step:4 require echarts and use it in the callback.    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径    require(        [            'echarts',            'echarts/chart/bar',            'echarts/chart/line'        ],        function(ec) {            var myChart = ec.init(document.getElementById('main'));            var option = {                tooltip : {                    trigger: 'axis'                },                legend: {                    data:['1- Revenue','5- Target Revenue']                },                toolbox: {                    show : true,                    feature : {                        mark : true,                        dataView : {readOnly: false},                        magicType:['line', 'bar'],                        restore : true,                        saveAsImage : true                    }                },                calculable : true,                xAxis : [                    {                        type : 'category',                        data : category_list                    }                ],                yAxis : [                    {                        type : 'value',                        splitArea : {show : true}                    }                ],                series : [                    {                        name:'1- Revenue',                        type:'bar',                        data: revenue_list                    },                    {                        name:'5- Target Revenue',                        type:'bar',                        data: target_revenue_list                    }                ]            };                        myChart.setOption(option);        }    );    </script></body>

最终效果如下图所示：

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

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

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