How JD Finance Accelerated iOS Chart Rendering with ROMA and ECharts

Background

ROMA has long been responsible for rendering complex charts in JD Finance's mobile app, especially on the home page where timeliness and stability are critical. Frequent app restarts caused occasional chart rendering failures, prompting a complete overhaul of the rendering pipeline, cache strategy, view loading, and retry mechanisms.

Use Case Analysis

The app displays various complex charts such as gold price trends, fund performance lines, savings bar charts, radar diagnostics, bill savings, and AI assistant bill trends. These charts are data‑heavy, highly customized, and interact frequently. Apache ECharts, a powerful JavaScript visualization library, was chosen to replace the lack of native chart solutions.

Refactor Process

1. Principle Analysis

ROMA provides an echarts tag that loads the echarts.js library in a WebView. Successful loading of this library is a prerequisite for fast chart rendering. Data must flow smoothly among ROMA, Native, and WebView.

A custom JRTransEchartsWebView was created for rendering, and JRTransEchartsComponent serves as the tag implementation, handling data transfer between WebView and the JUE environment.

2. Cache Design

The rendering process involves creating a WebView, loading echarts.js, and finally rendering data. All steps except the final data rendering can be pre‑executed to improve efficiency.

A reusable, auto‑scalable cache container JRTransEchartsCache stores a minimum number of WebViews at app startup. WebViews are tracked until echarts.js loads successfully, after which chart data is rendered. Early rendering commands are queued in eventArray until the library is ready.

If loading fails, a retry logic reloads echarts.js. WebViews are marked as using, free, or expanded up to a maximum count, and are destroyed when no longer needed.

3. Rendering Flow

The diagram below shows the end‑to‑end flow from app launch, chart creation, cache initialization, WebView loading, to memory cleanup after the app exits.

Effect Verification

After refactoring, various chart types (bar, line, pie, combined) render smoothly. Video demonstrations (compressed for the document) show the improved performance.

Summary

Using an iPhone XS Max as an example, the average time for home‑page chart rendering after a cold start decreased by 200 ms, success rate rose from ~90 % to nearly 100 %, and non‑home charts render with virtually zero latency. Automatic environment checks and restarts recover from initialization failures. Developers interested in cross‑platform chart rendering or the ROMA framework are encouraged to engage further.