React Native ECharts 项目教程

最新推荐文章于 2024-09-26 07:51:16 发布

富艾霏

最新推荐文章于 2024-09-26 07:51:16 发布

阅读量830

点赞数 16

本文链接：https://blog.csdn.net/gitblog_00104/article/details/142196260

版权

React Native ECharts 项目教程

react-native-echarts-demo Using echarts in react-native 项目地址: https://gitcode.com/gh_mirrors/re/react-native-echarts-demo

1. 项目介绍

react-native-echarts-demo 是一个在 React Native 中封装的响应式 ECharts 组件。该项目旨在解决移动端数据可视化需求，通过 WebView 在移动端使用 ECharts 功能强大的前端数据可视化库。React Native 开发中，由于使用的是与前端相同的 JavaScript 语言，衔接 ECharts 的工作相对顺畅。该项目提供了一个通用的组件 WebChart，具有响应式设计，能够自动刷新图表数据，更符合 React 的风格。

2. 项目快速启动

2.1 环境准备

确保你已经安装了 Node.js 和 React Native 开发环境。如果没有，请先安装：

npm install -g react-native-cli

2.2 克隆项目

git clone https://github.com/entronad/react-native-echarts-demo.git
cd react-native-echarts-demo

2.3 安装依赖

npm install

2.4 运行项目

# 运行在 iOS 模拟器
react-native run-ios

# 运行在 Android 模拟器
react-native run-android

2.5 使用示例

在项目中使用 WebChart 组件的示例代码如下：

import React, { useRef, useEffect } from 'react';
import WebChart from './WebChart';

const App = () => {
  const option = {
    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'
    }]
  };

  return (
    <WebChart
      option={option}
      exScript={`
        chart.on('click', (params) => {
          if (params.componentType === 'series') {
            window.postMessage(JSON.stringify({
              type: 'select',
              payload: { index: params.dataIndex }
            }));
          }
        });
      `}
      onMessage={(event) => {
        console.log(event.nativeEvent.data);
      }}
    />
  );
};

export default App;