README.zh-CN.md

@duxapp/react-native-echarts

@duxapp/react-native-echarts 是一个基于 @duxapp/react-native-canvas 的 React Native Apache ECharts 封装。

安装

如果你的项目还没有安装 @shopify/react-native-skia，请先安装它：

yarn add @shopify/react-native-skia

或

npm install @shopify/react-native-skia

然后再安装 @duxapp/react-native-echarts：

yarn add @duxapp/react-native-echarts

或

npm install @duxapp/react-native-echarts

需要安装的 peer dependencies：

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

使用

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

const options = {
  line: {
    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',
      },
    ],
  },
  bar: {
    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',
      },
    ],
  },
  pie: {
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' },
        ],
      },
    ],
  },
};

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

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

说明

• option 更新会直接透传到 chart.setOption(option, setOptionOptions)。
• 触摸事件会被转换成 zrender 事件，tooltip、点击高亮等交互可以继续工作。
• 组件内部使用 echarts/dist/echarts.js 完整入口，避开 Expo/Metro 对 ECharts 按需 ESM 入口的兼容问题。