react-native-echarts-kit
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
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);
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.