@wuba/react-native-echarts

To render a chart, you need to:

1. Import the chosen chart component and its corresponding renderer.
2. Import necessary components and charts from echarts/core, echarts/charts, and echarts/components.
3. Register the extensions using echarts.use([...]), ensuring you include the library's renderer (e.g., SVGRenderer or SkiaRenderer).
4. Initialize the chart using echarts.init() on a ref attached to the SvgChart or SkiaChart component.
5. Set the chart options using chart.setOption(option).

// Choose your preferred renderer
import { SvgChart, SVGRenderer } from '@wuba/react-native-echarts';
import * as echarts from 'echarts/core';
import { useRef, useEffect } from 'react';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';

// Register extensions
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  SVGRenderer,
  BarChart,
]);

const E_HEIGHT = 250;
const E_WIDTH = 300;

function ChartComponent({ option }) {
  const chartRef = useRef<any>(null);

  useEffect(() => {
    let chart: any;
    if (chartRef.current) {
      // @ts-ignore
      chart = echarts.init(chartRef.current, 'light', {
        renderer: 'svg',
        width: E_WIDTH,
        height: E_HEIGHT,
      });
      chart.setOption(option);
    }
    return () => chart?.dispose();
  }, [option]);

  return <SvgChart ref={chartRef} />;
}

export default function App() {
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
    ],
  };
  return <ChartComponent option={option} />;
}

The library provides a React Native implementation of Apache ECharts. It works by providing a chart component that acts as a container for ECharts to initialize within.

Key steps for usage:

1. Choose a renderer: Use either SvgChart (with SVGRenderer) or SkiaChart (with SkiaRenderer).
2. Register components: Use echarts.use([...]) to register the necessary ECharts components (charts, components, and the specific renderer provided by this library).
3. Initialize the chart: Use a useRef to hold a reference to the chart component. Inside a useEffect, call echarts.init() on the ref, specifying the renderer (e.g., 'svg'), and then call chart.setOption(option) to render your data.
4. Cleanup: Always call chart.dispose() in the useEffect cleanup function to prevent memory leaks.

import { SvgChart, SVGRenderer } from '@wuba/react-native-echarts';
import * as echarts from 'echarts/core';
import { useRef, useEffect } from 'react';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';

// 1. Register components and the renderer
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  SVGRenderer,
  BarChart,
]);

const E_HEIGHT = 250;
const E_WIDTH = 300;

function ChartComponent({ option }) {
  const chartRef = useRef<any>(null);

  useEffect(() => {
    let chart: any;
    if (chartRef.current) {
      // 2. Initialize ECharts on the ref
      chart = echarts.init(chartRef.current, 'light', {
        renderer: 'svg',
        width: E_WIDTH,
        height: E_HEIGHT,
      });
      chart.setOption(option);
    }
    // 3. Cleanup
    return () => chart?.dispose();
  }, [option]);

  return <SvgChart ref={chartRef} />;
}

export default function App() {
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }],
  };
  return <ChartComponent option={option} />;
}

A BrushScope manages several specialized caches and configuration flags to optimize the rendering of ECharts via Skia:

Graphical Caches

• shadowCache: Stores shadow definitions.
• gradientCache: Stores gradient definitions.
• patternCache: Stores pattern definitions.
• clipPathCache: Stores SkPath objects for clipping.
• defs: A record of SVGVNode definitions.

CSS and Animation Management

• cssNodes: Maps selectors to CSSSelectorVNode (Record of string to string).
• cssAnims: Manages CSS animations.
• cssStyleCache: Maps CSS style strings to class names for reuse.

Configuration Flags

• animation: Boolean indicating if animated nodes should be created.
• emphasis: Boolean indicating if emphasis styles should be created.
• willUpdate: Boolean used to signal if an update is occurring, which may disable certain string generation optimizations.
• compress: Boolean to determine if the output string should be compressed.
• ssr: Boolean for Server-Side Rendering mode.

The SvgChart component is a React component used to render ECharts via SVG. It is a memoized, forward-ref component that accepts an ECharts SVG node and styling. It supports gesture handling for interactions (like tooltips or zooming) by default.

Key Props:

• node: The SVGVNode representing the chart structure.
• style: React Native style object for the container.
• handleGesture: Boolean (default true) to enable or disable gesture handling.
• ...gestureProps: Additional props passed to the internal GestureHandler.

Ref API: When using a ref with SvgChart, you can access the following methods:

• elm.patch(oldVnode, vnode): Updates the SVG node.
• elm.setZrenderId(id): Sets the internal ZRender ID required for event dispatching.
• dispatchEvents(types, nativeEvent, eventArgs): Manually dispatches events to ZRender.
• getChartSize(): Returns { width, height } of the chart.

import SvgChart from './svg/svgChart';

// Usage example
const MyChart = () => {
  const chartRef = useRef(null);

  return (
    <SvgChart
      ref={chartRef}
      node={echartsSvgNode} // Provided by the ECharts engine
      style={{ width: '100%', height: 400 }}
      handleGesture={true}
    />
  );
};

You can attach a ref to the SkiaChart component to access its imperative API. This is useful for synchronizing the chart with external logic or capturing snapshots.

Available Ref Methods

elm.setAttribute(name: string, value: any)

Updates the chart dimensions. Supported names:

• 'width': Sets the new width.
• 'height': Sets the new height.

elm.patch(elms: ReactElement[])

Updates the list of children elements rendered by the chart.

elm.setZrenderId(id: number)

Sets the internal zrenderId required for event dispatching.

elm.makeImageSnapshot()

Returns a synchronous Base64 encoded PNG string of the current canvas state.

elm.makeImageSnapshotAsync()

Returns a Promise that resolves to a Base64 encoded PNG string of the current canvas state.

getChartSize()

Returns an object containing the current { width, height } of the chart.

import React, { useRef } from 'react';
import SkiaChart from '@wuba/react-native-echarts/src/skia/skiaChart';

const MyComponent = () => {
  const chartRef = useRef<any>(null);

  const handleSnapshot = async () => {
    const base64Image = await chartRef.current.elm.makeImageSnapshotAsync();
    console.log('Snapshot:', base64Image);
  };

  const resizeChart = () => {
    chartRef.current.elm.setAttribute('width', 500);
  };

  return (
    <SkiaChart 
      ref={chartRef} 
      width={300} 
      height={200} 
    />
  );
};