React Native使用echarts——@wuba/react-native-echarts

在React Native项目中使用@wuba/react-native-echarts组件来集成ECharts图表库，首先需要确保你已经正确安装了该组件。以下是一个简单的例子，展示如何在React Native中使用ECharts创建一个柱状图：

1. 安装@wuba/react-native-echarts：

npm install @wuba/react-native-echarts

2. 确保安装了ECharts的核心库：

npm install echarts

3. 在你的React Native组件中使用ECharts：

import React, { useEffect, useRef } from 'react';
import { View } from 'react-native';
import { ECharts } from '@wuba/react-native-echarts';
import * as echarts from 'echarts';
 
const MyChart = () => {
  const chartRef = useRef(null);
 
  useEffect(() => {
    const initChart = async () => {
      const chart = await chartRef.current.getChart();
      chart.setOption({
        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'
        }]
      });
    };
    echarts.init = () => ({
      getChart: () => Promise.resolve(echarts),
      setOption: (option) => console.log('ECharts option:', option)
    });
    initChart();
  }, []);
 
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ECharts ref={chartRef} />
    </View>
  );
};
 
export default MyChart;

在这个例子中，我们创建了一个简单的柱状图，并通过useRef获取了ECharts组件的引用。在useEffect中，我们初始化了ECharts图表，并通过setOption方法设置了图表的配置项和数据。

请注意，由于ECharts的渲染需要依赖于原生环境，因此在使用之前，请确保你的设备已经安装了ECharts的原生模块，或者你正在使用的环境支持自动链接。如果在实际开发中遇到问题，请参考@wuba/react-native-echarts的官方文档或者查看是否有相关的Issue。