EBS 请求输出Html报表集成Echarts

最新推荐文章于 2021-06-10 11:50:10 发布

dianmie4090

最新推荐文章于 2021-06-10 11:50:10 发布

阅读量230

点赞数

文章标签： javascript 数据库 ViewUI

原文链接：http://www.cnblogs.com/huanghongbo/p/8867329.html

版权

百度开源的 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浏览器的兼容不够友好，请使用兼容性较好的浏览器。

转载于:https://www.cnblogs.com/huanghongbo/p/8867329.html

dianmie4090

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EBS 请求输出Html报表集成Echarts

百度开源的ECharts有样式丰富且美观的报表类型可供选用，可以将其集成至EBS请求输出的Html报表中，这其实就是一个生成Html数据的过程。定义输出类型为HTML的请求我就不在此处赘述。我们以ECharts中最简单的报表举例http://echarts.baidu.com/examples/editor.html?c=line-simple其完整的html内容如下：...
复制链接

扫一扫