How JD Finance Accelerated Mobile Chart Rendering with ECharts and WebView Caching

Background

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

Use‑Case Analysis

The app displays a variety of charts such as gold price trends, fund performance lines, cash‑pool bar charts, radar diagnostics, savings bills, and AI‑assistant bill trends. These charts are data‑heavy, highly customized, and interactively updated, making Apache ECharts—a powerful JavaScript visualization library—a suitable choice for integration.

Refactoring Process

1. Principle Analysis

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

A custom JRTransEchartsWebView was created for rendering, and JRTransEchartsComponent bridges data between the WebView and the JUE environment.

2. Cache Design

Rendering involves loading the WebView, loading echarts.js, and finally drawing data. All steps except the final draw can be pre‑executed. A reusable, auto‑expanding cache JRTransEchartsCache stores a pool of pre‑loaded WebViews. Commands issued before the library is ready are queued in eventArray and executed once loading completes.

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

3. Rendering Flow

The diagram below shows the end‑to‑end flow from app start, chart creation, cache initialization, automatic expansion, to cleanup after the app exits, covering all WebView loading stages and memory handling.

Effect Verification

After refactoring, various chart types (bar, line, pie, combined) render smoothly. Performance tests on an iPhone XS Max show the average first‑screen chart rendering time reduced by 200 ms, success rate increased from ~90 % to nearly 100 %, and non‑first‑screen charts exhibit virtually zero latency.

Conclusion

The reconstruction demonstrates that a WebView‑based ECharts integration with a reusable cache can dramatically improve chart rendering speed and reliability on mobile devices. Developers interested in cross‑platform chart rendering or the ROMA framework are encouraged to explore further.