通过WebI自定义元素实现地图图表【echarts+nodejs】
免责声明:此范例仅限于个人自定义开发使用，SAP不保证或担保任何功能的实现。SCN中的资料和文档仅以说明性为目的创作的，其内容并不作为某些功能实现的保证或担保。
虽然BI4.2 的Webi里面提供了地图图表的功能，但是由于某些因素，Webi中内置的地图仅仅包含了很少部分的中国省市。但是在BI4.2中可以创建“自定义元素”来添加自定义的图表。这个例子就是基于百度echarts而实现的地图图表。
运行附件中示例的js文件
附件中的示例的js文件实现了自定义元素的Web服务。这个示例是基于下面的资源开发的。
- 百度echarts（http://echarts.baidu.com/）
- NodeJS（https://nodejs.org/）
搭建NodeJS运行环境
- 从官网下载NodeJS并安装。在此例子中我的环境是Windows的，所以下载了Windows的版本。此例子使用NodeJS 4.4.1开发。
安装完成后，在命令行程序里执行下面的命令可以查看NodeJS是否已经安装成功。
node -v - 安装运行环境的必要模块。
在这里使用npm工具安装。npm是一个开发包管理工具，NodeJS的模块可以通过这个工具来安装，详细文档请参考npm官网帮助文档。
执行npm安装命令之前，请确认网络代理，如果您的网络又代理的话，执行下面的命令为npm设置代理。
npm config set proxy “http://your_proxy:port“ - 接下来在命令行通过运行下面的命令来安装此示例的必要模块。在命令行进入到NodeJS的安装目录安装，并使用administrator用户。
npm install express
npm install phantom-proxy
npm install xmldoc
npm install body-parser - 我们还需要安装pm2,这是一个管理NodeJS实例的工具。方便我们启动/停止 NodeJS实例。
npm install pm2 –g
安装完成后可以通过下面的命令验证pm2是否安装成功。
pm2 -v
启动附件的JS文件
请下载附件后，将附件中的txt文件的后缀名改成js。在这个js文件中包含基于百度echart开发的地图图表，是一个自定义web服务。
在运行这个js实例之前，请先指定web服务监听的端口号。通过修改下面的代码来指定端口号。把port改成你想要的端口号。
// Set the port number
app.listen(port);
按照下面的步骤通过pm2启动js实例。
- 打开命令行程序，并进入到NodeJS安装目录。
- 执行下面的命令。
pm2 strat app.js
如果启动成功，你将会看到下面这样的结果。
创建带有自定义元素的Webi报表
- 进入 CMC=> 应用程序=> Web Intelligence, 双击Web Intelligence 进入属性界面。
- 选择 “自定义元素”，点击“添加服务”。
- 在添加服务窗口指定服务名称和服务URL。服务URL就是我们Web服务的URL(http://servername:port)。
由于我是运行在server本地，指定的端口号是3001，所以这里面就填上http://localhost:3001.
添加完成后点击测试，如果测试成功则说明配置完成。“媒体类型”使用默认就可以，点击“确定”。
然后在“自定义元素”勾选刚刚添加的服务，点击“保存并关闭”。此时就可以使用自定义元素了。 - 经过以上配置你就可以在Webi中使用自定义元素了，如下图。
默认情况下，echart使用的数据中的地区维度里面的值必须是echart能识别标准值。如果想使用其他值作为地区的值。可以参考echart文档设置地区映射。
扩展示例的js文件，添加其他echart图表
开发NodeJS程序可以使用nodeclipse开发框架。Nodeclipse提供了基于Eclipse的开发IDE（Enide）。关于如何配置Nodeclipse开发环境可以参考网络上的一些资料，也可以参考Nodeclipse的官方文档。
接下来我简单说一下代码扩展方法。
对于echart来说，所有chart的生成都是把chart的属性变量 “option”传给一个echart API生成的chart的实例。这样对于我们扩展其他图表类型就提供了很大的方便。我们只需要在代码中生成对应图表的option，就可以得到想要的图表。
按照上面的思路，我们需要做下面的工作来实现扩展。
- 初始化一个“Visualization”，并把他加入到“factory”的数组中。
这样是为了Webi可以读取到这个图表类型。 - 生成此图表所需的option变量。
将生成的变量传给HTML文本，并生成完整HTML。
这样我们就实现了其他echart的集成。后续code大致如下面的样子。
//New Chart
// Initialize viz<ID> object
var viz<ID> = new Visualization(params)
factory.visualizations.push(viz<ID>);
// HTML generate function
viz<ID>.generate =function(req){
//initialize option structure for echart
var option = {<…>}
var w = req.body.width ? req.body.width : 1100;
var h = req.body.height ? req.body.height : 900;
//start to generate option.
//end to genertate option
var html='<!DOCTYPE html>’+
‘<html>’+
‘<head>’+
‘ <meta charset=”utf-8″>’+
‘ <title>ECharts</title>’+
‘ <script src=”http://echarts.baidu.com/dist/echarts.min.js“></script>’+
‘ <script src=”http://echarts.baidu.com/asset/map/js/china.js“></script>’+
‘</head>’+
‘<body>’+
‘ <div id=”main” style=”width: ‘+w+’px;’+
‘height:’+h+’px;’+
‘”></div>’+
‘ <script type=”text/javascript”>’+
‘ var myChart = echarts.init(document.getElementById(\’main\’));’+
‘option=’+JSON.stringify(option)+’;’+
‘ myChart.setOption(option);’+
‘ </script>’+
‘</body>’+
‘</html>’;
return html;
};
非常实用的参考例字。
附件在哪里下载？