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原生的曲线图是支持下钻功能的，但是第三方的是不支持的。
2 个评论
echarts-1.3.1\echarts-1.3.1\doc\example\www\js目录中的echarts.js和esl.js上传到刚在服务器analyticsRes下创建的echarts目录下。
---您好，请问为何我从官网下载最新的echarts-2.2.7.zip 解压后对应文件夹js中只有echarts.js，没有看到esl.js？ 有什么影响吗？请问echarts.js和esl.js有何分工？