标签：
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>标签里引入了模块加载器，用来加载ECharts，路径请根据自己的部署情况填写，本例中是：/analyticsRes/echarts/esl.js
然后我们在require.config里配置了echarts的路径，该路径也请根据自己的部署情况填写。
最后我们还定义了三个数组，其含义见注释。
接下来，我们在中间的叙述区域里往三个数组中添加值
注意：字符串需要用单引号
最后在后缀区域添加ECharts的图形逻辑
最终效果如下图所示：
当我们点击图例的，对应的条形图就会被隐藏掉，更多ECharts图形交互功能请参阅ECharts官方网站。
以上就是BIEE整合第三方JS图形库的简单流程，更多的情况需要大家自己去处理，另外，此方法最大的问题就是嵌入的图形和BIEE自身事件的交互问题，
例如，BIEE原生的曲线图是支持下钻功能的，但是第三方的是不支持的
标签：
原文地址：http://www.cnblogs.com/martin-roger/p/5509508.html
