How JD Finance Boosted Chart Rendering Speed with ROMA and ECharts

1. Background

ROMA has been responsible for rendering complex charts in the JD Finance APP, especially on the home‑page first screen, where timeliness and stability are critical. Frequent app restarts caused occasional chart rendering failures. The team therefore mapped the entire rendering pipeline, restructured caching, view loading, and the rendering chain, improving success rate, speed, and adding an automatic retry mechanism for abnormal states.

2. Use‑case Analysis

The JD Finance app contains many complex chart scenarios, such as gold price line charts, fund earnings line charts, treasury‑style bar charts, radar charts for investment diagnosis, and AI‑assistant billing trend charts. These charts are data‑heavy, highly customized, and interact frequently. Apache ECharts, a powerful JavaScript visualization library, was selected because it reduces bundle size, speeds up loading, and supports extensive customization, filling the gap left by the lack of a native chart library.

3. Refactoring Process

1. Principle Analysis

ROMA provides an echarts tag that internally loads the echarts.js library in a WebView, allowing the WebView to render charts once the library is successfully loaded. Data must flow smoothly among Native, WebView, and JUE layers. To achieve this, a custom JRTransEchartsWebView was created for rendering ECharts data, and JRTransEchartsComponent implements the tag, handling data transmission and business logic between WebView and JUE.

Native injects a window.message event listener into the WebView at creation time, intercepts specific events, and forwards the data to JUE.

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

Native sends data to the WebView via evaluateJavaScript:

<span>NSMutableDictionary *dict = [NSMutableDictionary dictionaryWithDictionary:@{@</span>