wrn-echarts: Integrating ECharts into React Native with Native Rendering and Performance Evaluation

Background: In React Native development, chart rendering is frequently required; ECharts is a mature web chart library but lacks a direct RN implementation. Existing solutions—native chart libraries or WebView‑based approaches—have significant limitations in features, performance, and consistency.

Feasibility analysis: RN supports react-native-svg and react-native-skia, both capable of rendering SVG. By customizing ECharts' SVGPainter, the SVG data can be extracted and fed to these native rendering components.

Architecture: Two rendering modes are provided. WRNSVG uses react-native-svg to render the SVG elements, while WRNSkia uses @shopify/react-native-skia to render the SVG as an image. Both replace ECharts' default SVGRenderer with a custom painter, generate SVG data, and render it via a React component ( SvgChart or SkiaChart).

Touch event handling: Touch events from RN are translated into mouse events (e.g., mousedown, mousemove, mousewheel) and dispatched to the ECharts instance, enabling interactions such as tooltip display and zoom.

Problems solved: Chinese characters initially displayed as garbled text in WRNSkia; the issue was fixed by loading a Chinese font (Noto Sans for Android, PingFang SC for iOS). Font overlapping caused by incorrect width calculation was resolved by using the same fonts for measurement.

Usage: Install the appropriate native rendering library, add wrn-echarts, replace the renderer, write the ECharts option, and render with SvgChart or SkiaChart. Example code:

import * as echarts from 'echarts/core';
import { useEffect, useRef } from 'react';
import { SVGRenderer, SvgChart } from 'wrn-echarts';

echarts.use([SVGRenderer]);

export default function EchartsPage() {
  const svgRef = useRef(null);
  const option = { xAxis: { type: 'category', data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] }, yAxis: { type: 'value' }, series: [{ data: [150,230,224,218,135,147,260], type: 'line' }] };
  useEffect(() => {
    let chart;
    if (svgRef.current) {
      chart = echarts.init(svgRef.current, 'light', { renderer: 'svg', width: 300, height: 300 });
      chart.setOption(option);
    }
    return () => chart?.dispose();
  }, []);
  return <SvgChart ref={svgRef} />;
}

Performance comparison: Using a Huawei Nova5Pro, the project was benchmarked against react-native-echarts-pro on metrics such as memory usage, CPU usage, and FPS. WRNSVG generally outperformed the WebView solution in memory and CPU consumption; WRNSkia showed similar advantages. FPS was slightly lower for the native modes, especially for WRNSVG.

Conclusion and future work: WRNSVG achieved the best overall performance, WRNSkia was close behind. Future plans include adding a Canvas rendering mode for WRNSkia to improve large‑data handling and packaging the solution as taro-echarts for broader cross‑platform use.

The project is open‑source on GitHub (https://github.com/wuba/wrn-echarts) and includes acknowledgments, contact information, and links to related resources.