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 ; }

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.