前言

最近做了个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 Containerdocking     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."89DATA: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 controlg_editor               TYPE REF TO cl_gui_textedit, "文本编辑框
*   reference to custom container: necessary to bind TextEdit Controlg_repid                LIKE sy-repid,g_ok_code              LIKE sy-ucomm,       " return code from screeng_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/interfaceMETHOD constructor.CALL METHOD super->constructorEXPORTINGparent = parentEXCEPTIONSOTHERS = 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里面定义的methodexecute_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 dockingEXPORTINGrepid = sy-repiddynnr = sy-dynnrside  = docking->dock_at_bottom  "停靠在底部（上下形式分隔）
*       extension = 1000ratio = 95. "比例CREATE OBJECT splitter "间隔位置EXPORTINGparent  = dockingrows    = 1columns = 2.CALL METHOD splitter->get_containerEXPORTINGrow       = 1column    = 1RECEIVINGcontainer = container_1.CALL METHOD splitter->get_containerEXPORTINGrow       = 1column    = 2RECEIVINGcontainer = container_2.splitter->set_column_width(EXPORTINGid  = 1width = 40 "设置为百分比IMPORTINGresult = rc ).ENDIF.IF g_editor IS INITIAL.CREATE OBJECT g_editor  "编辑文本框格式EXPORTINGparent                     = container_1wordwrap_mode              = cl_gui_textedit=>wordwrap_at_fixed_positionwordwrap_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_controlEXPORTINGparent = 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_objectEXPORTINGobject_id  = 'ZECHARTS'object_url = 'echarts.js'EXCEPTIONSOTHERS     = 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 htmltableCALL FUNCTION 'WWW_PACK_TABLE'TABLEShtml_table        = html2packhtml_table_packed = html_table.CALL METHOD html_control->load_dataEXPORTINGurl          = 'chart.html'IMPORTINGassigned_url = doc_urlCHANGINGdata_table   = html_table.CALL METHOD html_control->show_urlEXPORTINGurl = doc_url.html_control->set_ui_flag( html_control->uiflag_no3dborder ).CLEAR script.CALL METHOD g_editor->get_textstreamIMPORTINGtext = script.CALL METHOD cl_gui_cfw=>flushEXCEPTIONSOTHERS = 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_textstreamIMPORTINGtext = script.html_control->do_refresh( ). "必须刷新页面CALL METHOD cl_gui_cfw=>flushEXCEPTIONSOTHERS = 1."开始处 添加IF script NS 'var myChart'.CONCATENATE'var myChart = echarts.init(document.getElementById("main"));'scriptINTO 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.

执行后效果截图：

总结

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

abap实现大数据-echar调用相关推荐

python爬取网站大数据_基于腾讯位置大数据平台的全球移动定位数据获取（Python爬取）...
对于腾讯位置大数据平台,有一些商业接口可以调用看起来还是挺爽的,但是现阶段只接受商业合作客户来调用,我们个人是获取不到的. 那就没办法了吗?当然不是,实际上腾讯位置大数据把调用接口就直接写在了前端, ...
python大数据平台_基于腾讯位置大数据平台的全球移动定位数据Python爬取与清洗...
前不久投稿了一篇论文是以腾讯位置大数据为基础进行人口空间化研究的,但是还未见刊,见刊后会给大家分享下具体的研究方法. 首先打开腾讯位置大数据星云图链接:https://xingyun.map.qq.c ...
SAP ABAP 使用 ALSM_EXCEL_TO_INTERNAL_TABLE 批导/上载大数据量 Excel （2）
SAP ABAP 使用 ALSM_EXCEL_TO_INTERNAL_TABLE 批导/上载大数据量 Excel (2) 引言: 今时不同往日了,特别是在电商和零售行业中,动不动一个导入的 Excel ...
#Livy配置Kerberos,#调用Hadoop组件,#Java 实现Livy大数据调用,#java拉取hive数据同步到本地
项目场景: 78做java后端的, 让联调大数据, 78做java的都没看过大数据让去做, 又不是没做大数据的人了,而且 nm让做不懂得涨点工资, 发个福利吗? 自己写一个Java程序, 去调用别人L ...
Tushare金融大数据开放社区（注册及调用api）
一. 注册 Tushare金融大数据开放社区,免费提供各类金融数据和区块链数据 , 助力智能投资与创新型投资.拥有丰富的数据内容,如股票.基金.期货.数字货币等行情数据,公司财务.基金经理等基本面数据 ...
SAP ABAP 探索 CL_FDT_XL_SPREADSHEET 读取大数据量 Excel 的可能性
SAP ABAP 探索 CL_FDT_XL_SPREADSHEET 读取大数据量 Excel 的可能性引言: 今时不同往日了,特别是在电商和零售行业中,动不动一个导入的 Excel 就有几十万行几十 ...
【网站架构】云计算、大数据时代如何调用云计算、爬虫数据程序
本期,我们来聊一下后端程序整合其他应用. 对于这个问题,可能很多人会一笑而过,整合其他应用不就是根据其软件说明对接吗(数据库.SaaS服务)? 但是,云计算.大数据时代,大型网站系统已经不单单是前端. ...
D3.js、echar.js 前端必备大数据技能
大数据可视化「前言」 web前端一直都是个讲究门面和艺术美感的行业,如果你以为逻辑很强就够了,那就错了,你只适合做后端,真正的好前端是对美感和可视化的东西有一种接近痴狂的爱好,这种契机可以驱使你 ...
pb数据窗口怎么调用视图_大数据架构如何做到流批一体？
阿里妹导读:大数据与现有的科技手段结合,对大多数产业而言都能产生巨大的经济及社会价值.这也是当下许多企业,在大数据上深耕的原因.大数据分析场景需要解决哪些技术挑战?目前,有哪些主流大数据架构模式及其发 ...
2021年大数据ELK（十三）：Elasticsearch编程（添加职位数据）
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 Elasticsearch编程一.添加职位数据 1.初始化客户端连接 2.实 ...

abap实现大数据-echar调用