详解ROMA中复杂图表的渲染实现

最新推荐文章于 2025-11-30 18:24:05 发布

原创最新推荐文章于 2025-11-30 18:24:05 发布 · 943 阅读

CC 4.0 BY-SA版权

文章标签：

ROMA 对外提供echarts标签，内部依赖提前加载了echarts.js库的WebView，将图表数据交给准备好环境的WebView，达到渲染图表的目的。这里有一个重要的前提就是成功加载了echarts.js 库的WebView才具备快速渲染各类图表的能力。

一、背景

ROMA长期负责多种复杂图表的渲染任务，尤其在京东金融APP中首页首屏等关键位置，对渲染的及时性与稳定性有极高要求。近期业务反馈，在APP频繁重启的场景下，首页图表偶现渲染失败的情况。为此，我们系统梳理了图表的完整渲染流程，并对缓存策略、视图加载与渲染链路进行了整体重构。在保障渲染成功率的基础上，进一步提升了渲染速度，并新增了异常状态下的自动重试机制。

二、使用场景分析

京东金融App内有很多使用复杂图表的业务场景，以下截取部分场景。下图分别是黄金历史金价的走势图、用户购买的基金的收益走势图、小金库的收益柱状图、用户投资诊断的雷达图、省钱账单和AI助手账单趋势柱状图。

可见，金融App内图表的使用具备种类丰富、数据信息量大，定制程度高、交互频繁等特点，经调研发现，Apache ECharts是一个基于JavaScript的功能强大的开源可视化图表库，被广泛应用于数据分析、监控系统、报表工具等领域。并且支持定制支持的图表类型，可降低图标库的体积和提升图标库的加载速度。由于原生端并没有类似的图表库，因次决定在ROMA中引入ECharts来承接复杂图表的显示需求。

三、重构分析过程

1. 原理分析

ROMA 对外提供echarts标签，内部依赖提前加载了echarts.js库的WebView，将图表数据交给准备好环境的WebView，达到渲染图表的目的。这里有一个重要的前提就是成功加载了echarts.js 库的WebView才具备快速渲染各类图表的能力。并且需要提前打通ROMA与Native，Native与WebView之间的数据通讯，保证数据在三端之间的顺畅流转。

为此自定制JRTransEchartsWebView专门用于渲染echarts数据，JRTransEchartsComponent作为标签实现在承接WebView和JUE环境的数据传递和业务逻辑处理。以下类图展示了各主要类对象之间的相互关系。

首先打通Native和WebView的数据交互，原生端在创建WebView的时候就向其环境中注入window的message事件监听，拦截指定类型的事件，获取从WebView环境中发来的数据。

NSString *jsStrring = @"window.addEventListener('message', (e) => { \
                        var customDict = {'function':'jdttransWindowEventDispatch',\ 
                                          'careParamDict':{'data': e.data, 'origin': e.origin}};\ 
                        window.webkit.messageHandlers.JDTTransEchartsHandler.postMessage(customDict);})";
NSString *jscode = [NSString stringWithFormat:jsStrring];
WKUserScript *script = [[WKUserScript alloc]initWithSource:jscode injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];

Native向WebView发送数据通过evaluateJavaScript的方式，向JS环境中输入数据：

NSMutableDictionary *dict = [NSMutableDictionary dictionaryWithDictionary:@{@"type":@"message"}]; 
[dict jdd_setObjectCheck:message forKey:@"data"]; 
[dict jdd_setObjectCheck:@"*" forKey:@"origin"]; 
NSString *dictString = [dict jdd_JSONString]; 
NSString *jsString = [NSString stringWithFormat:@"javascript:(function (){ \
                                                  var event = new MessageEvent('message', %@);\ 
                                                  window.dispatchEvent(event);})()",dictString]; 
[webView evaluateJavaScript:jsString completionHandler:nil];

JUE和Native之间的通讯通道在初始化ROMA 的 SDK时就已经建立，Native和WebView的数据交互也通过postMessage的方式建立，如下图所示：

以上，JUE通过调用call native将数据发送到Native，Native通过window.dispatchEvent的方式将数据传递给WebView。而图表上的手势交互等事件WebView 通过postMessage的方式发送，在Native监听指定类型的message获取数据，通过处理并通过fire event触发到JUE。

2. 缓存的设计

对于echarts渲染图表数据，大致经历以下过程，创建WebView，加载echarts.js 渲染库，资源开始加载，资源成功加载，最后渲染图表数据，这几个过程中，除了最后一步渲染数据，前面的步骤都可以提前做，越早完成前面的工作，越能提升图表渲染的效率。

为此，设计了可重复利用的并可自动扩容的WebView缓存容器 JRTransEchartsCache。在App启动阶段缓存min个WebView保存至缓存列表cacheArray中，并持续跟踪WebView加载echarts.js的阶段，确保在成功加载了 echarts.js 资源后再开始渲染图表数据。而对于过早的图表渲染指令，则先保存至指定标签的指令缓存列表eventArray中，待成功加载后，再渲染eventArray中的数据。

而对于WebView加载echarts.js资源失败的情况，也加入了失败重试的逻辑，当业务端发起数据渲染时会检查环境状态，而触发echarts.js的重新加载。

随着WebView使用，其状态被标记为using，并根据使用的情况，自动触发cacheArray中的WebView扩容，最大扩容至max个。对于从详情页返回而释放的图表，其 WebView 将会被标记为free，可提供为其他的图表视图使用。当使用图表的业务持续增多，当cacheArray中的WebView都被使用后，则新创建的WebView不再加入 cacheArray，遵循当次获取，当次创建，使用完成，就地销毁的原则。

3. 渲染流程

下图记录了从App启动到业务创建echarts图表，到业务退出，再到App退出期间，融合了缓存的初始化以及自动扩容，包括在WebView加载echarts.js资源的不同阶段对渲染指令的处理，以及视图销毁后的内存处理等场景下的处理流程。

四、效果验证

为了更直观的展示图表在业务上的使用场景，使用重构后的图表标签渲染柱状图、条形图、折线图、饼图和组合图表，渲染的效果和操作都很流畅(由于文档的限制，对以下视频做了降频和清晰度的处理)，效果如下：

五、总结

通过此次图表的重构，以iPhoneXS Max设备为例，在App冷启时的首页首屏渲染图表数据的时间平均缩短了200ms；冷启首页首屏图表的渲染成功率由之前的平均90%提升至近100%；非首页首屏的图表渲染几乎零延迟；对于异常情况导致的环境初始化失败的问题，也在接受渲染指令时自检渲染环境并重启环境初始化，自动恢复数据的渲染。