@duxapp/react-native-echarts

@duxapp/react-native-echarts is a React Native wrapper for Apache ECharts built on top of @duxapp/react-native-canvas.

中文文档

Installation

If your project has not installed @shopify/react-native-skia yet, install it first:

yarn add @shopify/react-native-skia

or

npm install @shopify/react-native-skia

Then install @duxapp/react-native-echarts:

yarn add @duxapp/react-native-echarts

or

npm install @duxapp/react-native-echarts

Required peer dependencies:

• react
• react-native
• @shopify/react-native-skia

Usage

import { ScrollView, StyleSheet } from 'react-native';
import { Chart } from '@duxapp/react-native-echarts';

const lineOption = {
  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',
      smooth: true,
    },
  ],
};

export default function Demo() {
  return (
    <ScrollView contentContainerStyle={styles.content}>
      <Chart
        style={styles.chart}
        option={lineOption}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  content: {
    padding: 20,
  },
  chart: {
    width: '100%',
    height: 320,
  },
});

Notes

• option updates are forwarded with chart.setOption(option, setOptionOptions).
• Touch input is translated into zrender events so tooltip, click, and highlight interactions can still work on React Native.
• The wrapper uses the bundled echarts/dist/echarts.js entry to avoid Metro/Expo compatibility issues with the modular ESM build.