问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

React Native 如何使用 new echarts ？

头像
重情义的热带鱼
    54
    新手上路，请多包涵

    React Native 使用 new echarts 时报错

    image.png

    尝试使用 import * as echarts from 'echarts' 引入 echarts ，但是无效

    echartsjavascript
    阅读 1k
    avatarAI BotBETA

    在 React Native 中使用 ECharts 需要特殊处理，因为 ECharts 直接依赖浏览器 DOM 环境，而 React Native 是移动端原生环境。以下是两种推荐解决方案：

    解决方案 1：使用 WebView 渲染 ECharts

    import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

const EChart = ({ option }) => {
  const webViewRef = useRef();

  const injectJavaScript = `
    // 创建容器
    const container = document.createElement('div');
    container.style.width = '100%';
    container.style.height = '100%';
    document.body.appendChild(container);

    // 加载 ECharts
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js';
    script.onload = () => {
      const chart = echarts.init(container);
      chart.setOption(${JSON.stringify(option)});
    };
    document.head.appendChild(script);
    true; // 防止警告
  `;

  return (
    <WebView
      ref={webViewRef}
      originWhitelist={['*']}
      source={{ html: '<html><body style="margin:0"></body></html>' }}
      injectedJavaScript={injectJavaScript}
      style={{ flex: 1 }}
    />
  );
};

// 使用示例
const MyChart = () => {
  const option = {
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: { type: 'value' },
    series: [{ data: [10, 20, 30], type: 'bar' }]
  };

  return <EChart option={option} />;
};

    解决方案 2：使用 react-native-echarts-pro (推荐)

    npm install react-native-echarts-pro
npm install react-native-webview
    import { ECharts } from 'react-native-echarts-pro';

const MyChart = () => {
  const option = {
    tooltip: { trigger: 'axis' },
    xAxis: { data: ['Mon', 'Tue', 'Wed'] },
    yAxis: {},
    series: [{ data: [20, 40, 30], type: 'line' }]
  };

  return (
    <ECharts
      option={option}
      backgroundColor="rgba(0,0,0,0)"
      height={300}
    />
  );
};

    ⚠️ 错误原因说明

    import * as echarts from 'echarts' 会报错是因为：

    1. ECharts 依赖浏览器环境的 window 和 document 对象
    2. React Native 使用 JavaScriptCore/Hermes 引擎，没有浏览器 API
    3. 直接导入会触发 DOM 操作函数，导致 document is not defined 错误

    其他注意事项

    1. 性能优化：复杂图表建议使用 react-native-echarts-pro 的本地模式

      <ECharts
  localDataPath={require('./custom-chart.json')}
  onLoadEnd={() => console.log('图表加载完成')}
/>
    2. 事件交互：通过 onClick 等 props 处理图表交互事件
    3. 移动端适配：使用 vw/vh 单位或响应式设计，确保图表在不同设备正常显示

    选择 WebView 方案适合简单场景，react-native-echarts-pro 提供了更完整的封装和性能优化，推荐作为首选方案。

    1 个回答
    得票最新
    头像
    Meathill
      23.1k143942

      RN 不支持 echarts，绘图底层差太多了。

      我用过 Victory-react，还可以，推荐试试。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题