hanhailong / react-native-echarts

📈 React Native Chart Library. React Native version of Apache Echarts, based on react-native-svg and react-native-skia. Much better performance than webview based solution.

React Native version of Apache Echarts, based on react-native-svg and react-native-skia. Much better performance than webview based solution.

Checkout the full documentation here.

About

• 🔥 The same way as Apache ECharts
• 🎨 Rich charts, covering almost all usage scenarios
• ✨ Optional rendering library, Skia or SVG
• 🚀 Able to reuse code with web
• 📱 Support for zoom gestures

Installation

yarn add @wuba/react-native-echarts echarts

Install react-native-svg or react-native-skia according to your needs.

The latest versions of echarts, react-native-svg and react-native-skia are recommended

Usage

Most of the charts in echarts are supported, and the usage remains largely consistent. For more use cases and demo previews, you can download the Taro Playground app.

Skia echarts

// import { SkiaChart, SVGRenderer } from '@wuba/react-native-echarts';
import SkiaChart, { SVGRenderer } from '@wuba/react-native-echarts/skiaChart';
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;

// initial
function SkiaComponent({ option }) {
  const skiaRef = useRef<any>(null);

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

  return <SkiaChart ref={skiaRef} />;
}

// Component usage
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 <SkiaComponent option={option} />
}

SVG echarts

// import { SvgChart, SVGRenderer } from '@wuba/react-native-echarts';
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
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;

// initial
function SvgComponent({ option }) {
  const svgRef = useRef<any>(null);

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

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

// Component usage
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 <SvgComponent option={option} />
}

Use only one of SvgChart or SkiaChart

import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';

or

import SkiaChart, { SVGRenderer } from '@wuba/react-native-echarts/skiaChart';

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

Apache-2.0

---

Made with create-react-native-library