EBS 请求输出Html报表集成Echarts

百度开源的ECharts有样式丰富且美观的报表类型可供选用，可以将其集成至EBS请求输出的Html报表中，这其实就是一个生成Html数据的过程。

定义输出类型为HTML的请求我就不在此处赘述。

我们以ECharts中最简单的报表举例http://echarts.baidu.com/examples/editor.html?c=line-simple

其完整的html内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <!-- <script src="echarts.min.js"></script> -->
    <!--  -->
    <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(\'main\'));

        // 指定图表的配置项和数据
        var option = {
                        xAxis: {
                            type: \'category\',
                            data: [\'Mon\', \'Tue\', \'Wed\', \'Thu\', \'Fri\', \'Sat\', \'Sun\']
                        },
                        yAxis: {
                            type: \'value\'
                        },
                        series: [{
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: \'line\'
                        }]
                    };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

使用fnd_file.put_line(fnd_file.output, p_msg)其集成至EBS输出;

此处p_msg即完整的html内容。

此例子只是一个简单的sample。

注意：

1.代码中的js引用源为百度官网的js，如果你所在的环境不允许连接外网，则可以利用内网环境构建自己的js服务。

2.ECharts报表重要的无非就两个方面，设计好样式以及生成相应的option内容对应的json数据。

所以：样式部分交由专人处理，option内容建议不要直接使用数据库生成，而是做成Restful API服务，这样方便以后做成外部报表系统是可以直接使用该服务，plsql中使用utl_http包调用该服务获取相应的option内容

3.html的各种标签建议写成公共包来处理。

4.由于ECharts本身的原因，好像对IE浏览器的兼容不够友好，请使用兼容性较好的浏览器。