最近有个新需基于第三方接口过来的数据 或系统内的数据 形成一个类似大数据类型的树状 图，以下是个DEMO可以参照以下思路：将所需的值赋值至对应的变量中
*&---------------------------------------------------------------------* *& 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. PUBLIC SECTION. METHODS constructor IMPORTING !parent TYPE REF TO cl_gui_container. METHODS execute_a_script. ENDCLASS. * CLASS lcl_html IMPLEMENTATION. 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 ). 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 = '转换'. AT SELECTION-SCREEN. IF sy-ucomm = 'GEN'. PERFORM frm_execute. WAIT UP TO 2 SECONDS. ENDIF. AT SELECTION-SCREEN OUTPUT. PERFORM init_control. *&---------------------------------------------------------------------* *& Form init_control *&---------------------------------------------------------------------* *& text *&---------------------------------------------------------------------* FORM init_control. DATA rc TYPE i. IF docking IS INITIAL. 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. DEFINE fill_table. APPEND &1 TO g_mytable. END-OF-DEFINITION. fill_table: * '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);' * * 基于准备好的dom，初始化echarts实例 'var myChart = echarts.init(document.getElementById("main"));', 'var option = {', ' title: {', ' text:"ABAP - EChart Example"', ' },', ' legend: {', ' data: ["销量"],', ' },', ' xAxis: {', ' type: "category",', ' data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]', ' },', ' yAxis: {', ' type: "value"', ' },', ' series: [{', ' data: [120, 200, 150, 80, 70, 110, 130],', ' type: "bar"', ' },', ' {', ' data: [130, 202, 180, 80, 90, 200, 130],', ' type: "bar",', ' barGap: "-100%",', "移动第二个柱子的位置实现重叠 ' z: "-1",', "改变这根柱子的层级使这根柱子在下面 ' }', ' ]', '};', 'myChart.setOption(option);'. "使用刚指定的配置项和数据显示图表。 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">', * '<!-- 引入 ECharts 文件 -->' '<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>', '</head>', '<body>', '<div id="main" style="width:800px;height:500px;"></div>', '</body>', '</html>'. "html内表标签处理 <!DOCTYPE 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 '<pre'. IF sy-subrc EQ 0. in_pre_tag = 'X'. ENDIF. SEARCH wa_html FOR '<script'. 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 '</pre>'. IF sy-subrc EQ 0. CLEAR in_pre_tag. ENDIF. SEARCH wa_html FOR '</script>'. 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.
扫一扫
1065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
