React-native-echarts-kit NPM

React Native version of Apache Echarts, based on react-native-svg. This awesome library offers significantly improved performance compared to WebView-based solutions.

Checkout the full documentation here or https://bit-sudo.com/open-source/react-native-echarts-kit.

About

🔥 The same usage as Apache ECharts
🎨 Rich charts, covering almost all usage scenarios
✨ Optional rendering library: SVG
📱 Support gestures such as tapping, dragging and zooming

Installation

yarn add react-native-echarts-kit echarts react-native-gesture-handler zrender

Install react-native-svg according to your needs.

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

Usage

example

Example

import * as React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import {
  ChartApp,
  ChartContainer,
  ChartViewRer,
} from 'react-native-echarts-kit';
import { BarChart } from 'echarts/charts';
import { EChartsOption } from 'echarts';

// register extensions
ChartApp.setup([
  // ...
  BarChart,
]);

const option: EChartsOption = {
  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',
    },
  ],
};
function App() {
  const refChart = React.useRef<ChartViewRer>(null);
  return (
    <View style={styles.container}>
      <ChartContainer
        ref={refChart}
        containerStyle={styles.viewChart}
        option={option}
      />
      <Button
        title="123"
        onPress={() =>
          refChart.current?.setOption({
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            yAxis: {
              type: 'value',
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}',
            },
            series: [
              {
                data: [
                  Math.random() * 1000,
                  Math.random() * 1000,
                  Math.random() * 1000,
                  Math.random() * 1000,
                  Math.random() * 1000,
                  Math.random() * 1000,
                  Math.random() * 1000,
                ],
                type: 'bar',
              },
            ],
          })
        }
      >
        Tesst
      </Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  viewChart: { height: 250, width: '100%' },
});
export default gestureHandlerRootHOC(App);