React Native 使用native-echarts图表组件

最新推荐文章于 2025-04-29 09:22:03 发布

大漠-孤烟

最新推荐文章于 2025-04-29 09:22:03 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： android开发 React Native

本文链接：https://blog.youkuaiyun.com/ReturnNull0/article/details/93603945

android开发同时被 2 个专栏收录

20 篇文章

订阅专栏

React Native

9 篇文章

订阅专栏

本文介绍了如何在React Native项目中使用native-echarts组件来绘制图表，包括安装、导入和使用步骤。示例展示了一个简单的折线图，并提到了在Android端遇到的问题及解决方案，即在不同平台上加载tpl.html文件的不同路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装 yarn add native-echarts

2、导入包 import Echarts from 'native-echarts';

3、使用示例

const option = {
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        show: false,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['10/06', '11/06', '12/06', '13/06', '14/06', '15/06', '25/12']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'profit',
            type: 'line',
            smooth: true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: [800, 480, 270, 590, 780, 860, 840]
        }
    ]
};

<Echarts
    option={option}
    height={screenHeith * 0.5}
    width={screenWidth}
/>

具体使用文档可参考ECharts官网https://echarts.baidu.com/echarts2/doc/example.html

4、Android端问题

模拟器上显示不出来，真机上测试可以显示，需要修改配置

01、将tpl.html复制到android\app\src\main\assets目录下，tpl.html文件在node_modules\native-echarts\src\components\Echarts）assets路径下。

02、修改node_modules\native-echarts\src\components\Echarts目录中的index.js文件：

import React, { Component } from 'react';
import { WebView, View, StyleSheet, Platform } from 'react-native';
import renderChart from './renderChart';
import echarts from './echarts.min';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.setNewOption = this.setNewOption.bind(this);
  }


  componentWillReceiveProps(nextProps) {
    if(nextProps.option !== this.props.option) {
      this.refs.chart.reload();
    }
  }

  setNewOption(option) {
    this.refs.chart.postMessage(JSON.stringify(option));
  }

  render() {
    return (
      <View style={{flex: 1, height: this.props.height || 400,}}>
        <WebView
          ref="chart"
          scrollEnabled = {false}
          injectedJavaScript = {renderChart(this.props)}
          style={{
            height: this.props.height || 400,
            backgroundColor: this.props.backgroundColor || 'transparent'
          }}
          scalesPageToFit={Platform.OS !== 'ios'}
          originWhitelist={['*']}
          source={Platform.OS==='ios' ? require('./tpl.html'):{uri:'file:///android_asset/tpl.html'}}
          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
        />
      </View>
    );
  }
}