abap实现大数据-echar调用

---

前言

最近做了个bw+smart bi项目，smartbi虽然好，但感觉不是sap系列，总有非我族者其心必异的感觉。考虑smart bi软件原理也是使用echart h5的技术，所以找些网上的资料研究下abap能否直接使用echart，这里分享个demo

---

一、echart代码获取

https://echarts.apache.org/examples/zh/index.html，官网范例，我们需要看的是：完整代码

这个代码结构是：

//1.导入echart js类
import * as echarts from 'echars';//echarts.js
//2.获取html元素，用于放置echart图表
var chartDom = document.getElementById('main');
//3.初始化echart（作为html元素上的控件）
var myChart = echarts.init(chartDom);
//4.设置echarts.js里面的option参数（就是echart的各项设置）
var option;
option = {
    xAxis: { //x轴
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: { //y轴
        type: 'value'
    },
    series: [{ //数据和图表类型
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar', //图表类型
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        }
    }]
};
//5.通过setOption来设置HTML上echart控件的option
option && myChart.setOption(option);

二、abap实现

1.定义HTML控件

布局采取cl_gui_splitter_container——cl_gui_container——cl_gui_html_viewer，即分隔布局里面设置自定义容器，把htmlview控件放到自定义容器上面，最后echart显示在htmlview上对吧。
代码请见后面的所有代码，这里不重复贴出来

2.构建option

个人感觉根据不同的echart类型会有不同的option，所以用表形式维护吧

其实就是把echart范例的代码逐行分解到透明表，然后逐行append到内表

var myChart = echarts.init(document.getElementById("main"));
var option = {
    title: {
        text: "ECharts 入门示例"
   },
    tooltip: {},
     legend: {
         data:["销量"]
         },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20]
    }]
};
myChart.setOption(option);

然后通过htmlview 的set_text方法带进去：

    g_editor->set_text_as_r3table(
      table = g_mytable
    ).

3.完整ABAP代码

贴上完整的代码，不解释，自己看：

*&---------------------------------------------------------------------*
*& Report ZECHART_DEMO
*&---------------------------------------------------------------------*
*& Echarts Demo
*& Creator Tangzhen
*& Description Echats效果展示
*&---------------------------------------------------------------------*
REPORT zechart_demo.

TABLES: sscrfields.
DATA: functxt TYPE smp_dyntxt.

DATA:
* Docking Container
  docking     TYPE REF TO cl_gui_docking_container,
  fcode       LIKE sy-ucomm,
  myevent_tab TYPE cntl_simple_events,
  myevent     TYPE cntl_simple_event,
  edurl(2048),
  alignment   TYPE i.

DATA script TYPE string.

CONSTANTS: line_length TYPE i VALUE 255."89

DATA:
  splitter               TYPE REF TO cl_gui_splitter_container, "分隔布局
  container_1            TYPE REF TO cl_gui_container, "自定义容器
  container_2            TYPE REF TO cl_gui_container,
*   reference to wrapper class of control
  g_editor               TYPE REF TO cl_gui_textedit, "文本编辑框
*   reference to custom container: necessary to bind TextEdit Control
  g_repid                LIKE sy-repid,
  g_ok_code              LIKE sy-ucomm,       " return code from screen
  g_mytable(line_length) TYPE c OCCURS 0.

CLASS lcl_html DEFINITION INHERITING FROM cl_gui_html_viewer. "定义派生类cl_gui_html_viewer类（接口）
  PUBLIC SECTION.
    METHODS constructor "重新
      IMPORTING
        !parent TYPE REF TO cl_gui_container.
    METHODS execute_a_script."执行js  新起
ENDCLASS.
*
CLASS lcl_html IMPLEMENTATION. "实现和集成class/interface
  METHOD constructor.
    CALL METHOD super->constructor
      EXPORTING
        parent = parent
      EXCEPTIONS
        OTHERS = 1.
  ENDMETHOD.

  METHOD execute_a_script.
    DATA scripttab TYPE soli_tab.
    scripttab = cl_bcs_convert=>string_to_soli( script ).
    set_script( script = scripttab ).  "都是cl_gui_html_viewer里面定义的method
    execute_script( EXCEPTIONS dp_error = 1 cntl_error = 2 ).
  ENDMETHOD.
ENDCLASS.

DATA: html_control TYPE REF TO lcl_html.

SELECTION-SCREEN PUSHBUTTON 1(10) gen USER-COMMAND gen.

INITIALIZATION.
  gen = '转换为echar'.

AT SELECTION-SCREEN.
  IF sy-ucomm = 'GEN'. "定义按键的方法
    PERFORM frm_execute.
  ENDIF.

AT SELECTION-SCREEN OUTPUT.
  PERFORM init_control. "初始化html的控件
*&---------------------------------------------------------------------*
*& Form init_control
*&---------------------------------------------------------------------*
*& text
*&---------------------------------------------------------------------*
FORM init_control.
  DATA rc TYPE i.

  IF docking IS INITIAL. "cl_gui_docking_container 停靠容器（布局）
    CREATE OBJECT docking
      EXPORTING
        repid = sy-repid
        dynnr = sy-dynnr
        side  = docking->dock_at_bottom  "停靠在底部（上下形式分隔）
*       extension = 1000
        ratio = 95. "比例

    CREATE OBJECT splitter "间隔位置
      EXPORTING
        parent  = docking
        rows    = 1
        columns = 2.

    CALL METHOD splitter->get_container
      EXPORTING
        row       = 1
        column    = 1
      RECEIVING
        container = container_1.

    CALL METHOD splitter->get_container
      EXPORTING
        row       = 1
        column    = 2
      RECEIVING
        container = container_2.

    splitter->set_column_width(
      EXPORTING
        id  = 1
        width = 40 "设置为百分比
        IMPORTING
          result = rc ).

  ENDIF.

  IF g_editor IS INITIAL.
    CREATE OBJECT g_editor  "编辑文本框格式
      EXPORTING
        parent                     = container_1
        wordwrap_mode              = cl_gui_textedit=>wordwrap_at_fixed_position
        wordwrap_position          = line_length "行的长度
        wordwrap_to_linebreak_mode = cl_gui_textedit=>true.
    DATA:LT_ECHARTSET TYPE TABLE OF ZTFI_ECHAR****.
    FIELD-SYMBOLS:<FS> LIKE LINE OF LT_ECHARTSET .
    select * from ZTFI_ECHAR***  into table LT_ECHARTSET  WHERE ZTYPE = 'bar'.
    LOOP AT LT_ECHARTSET ASSIGNING <FS>.
      APPEND <FS>-ZOPTION TO g_mytable .
    ENDLOOP.

    g_editor->set_text_as_r3table(
      table = g_mytable
    ).
  ENDIF.

  IF html_control IS INITIAL.
    CREATE OBJECT html_control
      EXPORTING
        parent = container_2.

    PERFORM load_home_page. "加载主页
  ENDIF.
ENDFORM.
*&---------------------------------------------------------------------*
*& Form LOAD_HOME_PAGE
*&---------------------------------------------------------------------*
*& text
*&---------------------------------------------------------------------*
*& -->  p1        text
*& <--  p2        text
*&---------------------------------------------------------------------*
FORM load_home_page .
  DATA: doc_url(80).
  DATA: html_table    TYPE TABLE OF w3html INITIAL SIZE 10,
        html2pack     TYPE TABLE OF swww_t_html_l INITIAL SIZE 100,
        wa_html2pack  TYPE swww_t_html_l,
        wa_html       TYPE w3html,
        pos_tag_begin TYPE i,
        pos_tag_end   TYPE i,
        l_src_len     TYPE i,
        in_pre_tag    TYPE c,
        in_script_tag TYPE c,
        l_wa_len      TYPE i.

  CALL METHOD html_control->load_mime_object
    EXPORTING
      object_id  = 'ZECHARTS'
      object_url = 'echarts.js'
    EXCEPTIONS
      OTHERS     = 1.


  DEFINE fill_html.
    APPEND &1 TO html_table.
  END-OF-DEFINITION.

  fill_html:
  '<!DOCTYPE html>',  "echarts全包 可不用
  '<html>',
  '<head>',
  '<meta charset="utf-8">',
  '<titile>显示标题</title>',

* '!-- 引入 ECharts 文件 -->'
  '<script src="http://192.168.0.20:2801/Scripts/js/plugins/echarts/echarts.min.js"></script>',
  '</head>',
  '<body>',
  '<div id="main" style="width:800px;height:500px;">这里的div会显示echar对象</div>',
  '</body>',
  '</html>'.

"html内表标签处理  的HTML必须处理
  DESCRIBE FIELD wa_html LENGTH l_wa_len IN CHARACTER MODE.
  l_src_len = l_wa_len.

  LOOP AT html_table INTO wa_html.
    wa_html2pack-len = strlen( wa_html ).
*     Note 941692 - For space supression at 255th character - begin.
    IF wa_html2pack-len EQ 254.
      wa_html2pack-len = wa_html2pack-len + 1.
    ENDIF.
*     Note 941692 - For space supression at 255th character - end.
    pos_tag_end = wa_html2pack-len.
    pos_tag_begin = 0.

    SEARCH wa_html FOR '<body'.
    IF sy-subrc EQ 0.
      in_pre_tag = 'X'.
    ENDIF.

    SEARCH wa_html FOR '<scipt'.
    IF sy-subrc EQ 0.
      in_script_tag = 'X'.
    ENDIF.

    IF in_pre_tag = 'X' OR in_script_tag = 'X'.
      wa_html2pack-line = wa_html.
      wa_html2pack-len = l_wa_len.
    ELSE.
      SEARCH wa_html FOR '>'.
      IF sy-subrc EQ 0.
        pos_tag_end = sy-fdpos.
        SEARCH wa_html FOR '<'.
        IF sy-subrc EQ 0.
          pos_tag_begin = sy-fdpos.
        ENDIF.
      ENDIF.

      IF pos_tag_end < pos_tag_begin.
        wa_html2pack-line = wa_html.
      ELSE.
        IF l_src_len LT l_wa_len.
          MOVE wa_html TO wa_html2pack-line.
        ELSE.
          MOVE wa_html TO wa_html2pack-line.
        ENDIF.
      ENDIF.
      l_src_len = strlen( wa_html2pack-line ).
    ENDIF.
    APPEND wa_html2pack TO html2pack.

    SEARCH wa_html FOR '<head'.
    IF sy-subrc EQ 0.
      CLEAR in_pre_tag.
    ENDIF.

    SEARCH wa_html FOR ''.
    IF sy-subrc EQ 0.
      CLEAR in_script_tag.
    ENDIF.

  ENDLOOP.

  CLEAR html_table.
  "pack to htmltable
  CALL FUNCTION 'WWW_PACK_TABLE'
    TABLES
      html_table        = html2pack
      html_table_packed = html_table.

  CALL METHOD html_control->load_data
    EXPORTING
      url          = 'chart.html'
    IMPORTING
      assigned_url = doc_url
    CHANGING
      data_table   = html_table.

  CALL METHOD html_control->show_url
    EXPORTING
      url = doc_url.

  html_control->set_ui_flag( html_control->uiflag_no3dborder ).

  CLEAR script.
  CALL METHOD g_editor->get_textstream
    IMPORTING
      text = script.

  CALL METHOD cl_gui_cfw=>flush
    EXCEPTIONS
      OTHERS = 1.

  html_control->execute_a_script( ).

ENDFORM.
*&---------------------------------------------------------------------*
*& Form FRM_EXECUTE
*&---------------------------------------------------------------------*
*& text
*&---------------------------------------------------------------------*
*& -->  p1        text
*& <--  p2        text
*&---------------------------------------------------------------------*
FORM frm_execute .
  CLEAR script.
  CALL METHOD g_editor->get_textstream
    IMPORTING
      text = script.

  html_control->do_refresh( ). "必须刷新页面

  CALL METHOD cl_gui_cfw=>flush
    EXCEPTIONS
      OTHERS = 1.

  "开始处 添加
  IF script NS 'var myChart'.
    CONCATENATE
      'var myChart = echarts.init(document.getElementById("main"));'
      script
      INTO script.
  ENDIF.

  "结束时 添加
  IF script NS 'myChart.setOption'.
    CONCATENATE script
      'myChart.setOption(option);'
      INTO script SEPARATED BY cl_abap_char_utilities=>newline.
  ENDIF.

  CONCATENATE
  'var div = document.getElementById("main");'
  'div.style.width = document.body.clientWidth + "px";'
  'div.style.height = document.body.clientWidth*6/10 + "px";'
   script   INTO script SEPARATED BY cl_abap_char_utilities=>newline.

  html_control->execute_a_script( ). "执行脚本
ENDFORM.

执行后效果截图：

---

总结

今天到此为止，其实通过构建，还是可以实现灵活的数据列表、罗盘、仪表甚至综合指标桌面等。后面有空再写个项目出来