当前位置: 首页 > 工具软件 > React-BMap > 使用案例 >

RN集成echarts4图表组件react-native-secharts使用指南

伏德义
2023-12-01

前言

公司的RN项目需要使用echarts,之前搜到了一个native-echarts。但是各种bug层出不断,美工的渐变也无法实现,formatter还有问题。于是,就萌生了自己开一个包自己维护的想法。

前不久终于闲了下来,就开了一个包,经过十几次更新迭代,和群友们的测试,bug基本已经非常少了。

react-native 兴趣群: 397885169 , 有使用问题可以进群 @西安-haise ,看到会答复,github内的issues也可以提bug。

版本特性和最新文档在github内有最新,csdn如不能及时更新,请谅解.

地址: https://github.com/shifeng1993/react-native-secharts

本文更新日期 2019年07月21日

组件介绍

react-native-secharts,一个webview封装的图表组件。基于百度echarts4,相比native-echarts有echarts自带对象支持,例如渐变色等,用法与官网相同用法。

echarts version 4.2.1

注:react-native 最近几个版本 webview 包改动频繁,安装时请注意需要固定webview的版本,要不然会出现web与react-native通信的问题,导致api无反应,请仔细阅读安装步骤。

安装步骤

1. 安装依赖

  • react-native >= 0.60.2

    yarn add react-native-secharts react-native-webview@androidx
    

    或者

    npm install react-native-secharts react-native-webview@androidx --save
    

    安装完成后在android/gradle.properties文件添加2行配置,确保在项目中启用AndroidX

    注:0.60+采用自动link 安装后不需要进行link

    android.useAndroidX=true
    android.enableJetifier=true
    
  • react-native >= 0.57 && react-native < 0.60.2

    yarn add react-native-secharts@1.6.1 react-native-webview@2.14.3
    react-native link react-native-webview
    

    或者

    npm install react-native-secharts@1.6.1 react-native-webview@2.14.3 --save
    react-native link react-native-webview
    
  • react-native = 0.56

    yarn add react-native-secharts@1.5.3
    

    或者

    npm install react-native-secharts@1.5.3 --save
    
  • react-native < 0.56

    yarn add react-native-secharts@1.4.5
    

    或者

    npm install react-native-secharts@1.4.5 --save
    

2. 修复android release bug

  • 组件版本1.7.0以上(包含),不需要此步骤,请跳至步骤3. 引用组件
  • 在你的项目创建此路径的文件夹 $yourProject/android/app/src/main/assets/echarts
  • 创建完成后请在你的项目根目录(`$yourProject/) 文件夹下使用命令
  • 以下是 mac && linux
cp node_modules/react-native-secharts/main/dist/index.html android/app/src/main/assets/echarts/ && cp node_modules/react-native-secharts/main/dist/Bmap.html android/app/src/main/assets/echarts/
  • 以下是 windows
copy node_modules/react-native-secharts/main/dist/index.html android/app/src/main/assets/echarts/ && copy node_modules/react-native-secharts/main/dist/Bmap.html android/app/src/main/assets/echarts/

3. 引用组件

import {Echarts, echarts} from 'react-native-secharts';
  • 大写开头的Echarts是组件
  • 小写开头的echarts是echarts对象

4. 使用组件

<Echarts option={{}} height={400}/>

请看example文件夹中示例代码

链接:https://github.com/shifeng1993/react-native-secharts/tree/master/example

运行示例

$ cd example
$ yarn
$ react-native run-ios  或者 $ react-native run-android  

option具体配置请参考echarts官网api http://echarts.baidu.com/api.html#echarts

官方示例 http://echarts.baidu.com/examples/

props

属性类型默认值备注
optionobjnullecharts配置项,请参考echarts官网
backgroundColorstring‘rgba(0,0,0,0)’图表画布背景色
widthnumber‘auto’画布宽度
heightnumber400画布高度
renderLoadingfunc()=><View style={{backgroundColor: ‘rgba(0,0,0,0)’}}/>loading时遮罩
onPressfunc(e)=>{}点击事件

实例方法

方法名称参数备注
setOption(option: Object, notMerge?: boolean, lazyUpdate?: boolean)参数参考:http://echarts.baidu.com/api.html#echartsInstance.setOption
getImage(base64)=>{}返回函数的参数base64,可结合RNFS写入相册
clear清空echarts画布

历史版本特性

1.7.0 修复已知未知bug,增加适配androidx,更新echarts版本到4.2.1,去掉isMap属性

1.6.1 修复文档错误部分

1.6.0 修复0.57版本出现的本地不能渲染的bug。

1.5.3 修复1.5.2版本出现的不能渲染的bug,使用最新版本rn重写示例。

1.5.2 新增了必要的props使用canvas或者svg渲染

1.5.1 修复组件在重绘过程中会刷新webview的闪烁,更新echarts版本到4.2.0-rc.2

1.5.0 更新组件到支持rn0.56版本,修复ios release出现的不能渲染的bug。

1.4.5 更新echarts版本到4.1.0

1.4.4 增加echart实例方法setOption的附加参数调用,增加clear实例方法调用

1.4.3 修复设置了echarts地图,其余图表只能显示一个的问题

1.4.2 修复echarts地图不能显示的问题,目前只支持echarts最新的bmap形式。

1.4.0 更新echarts版本到4.1.0.rc2,修复图表点击事件。

1.3.9 修复formatter属性function被屏蔽的问题。

1.3.7 修复了flex:1不能显示的问题

1.3.6 修复了formatter属性不能使用clang系的转译字符,以及被误转为string的问题

1.3.3 新增获取图片getImage方法 ,使用refs获取组件实例进行使用

1.3.0 新增echarts对象,可以使用对象内对应方法,例如渐变等

1.2.0 主分支更新至echarts4

1.1.0 新增刷新option方法 ,使用refs获取组件实例进行使用

1.0.0 上传基础组件,基于echarts3封装,修复了ios android闪白,ios默认移动适配,以及android release路径问题

已知bug 和 需要注意的点

bug

  • echarts配置项内所有的函数均无法被new function() 或者 eval()重新还原为函数, 这个bug只能找到echarts源码内的方法进行修改,后续找到地方会进行修复,请不要在提类似的bug。

注意

  • 实例方法setOption不会保存修改后的option,这意味着在react 执行setState操作后重新render,当前state的状态会重新覆盖webview内setOption的状态,所以不推荐使用。

  • 目前已经修复组件因为onload发生的闪烁,这意味着可以不用组件setOption的实例方法,直接通过修改当容器组件的绑定的state值,setState操作,然后secharts组件会监听 state中option的改变,来进行option修改。当然组件实例方法setOption还是可以使用的,只是有bug,不推荐而已。

  constructor(props) {
    super(props);
    this.state = {
      image: '',
      option1: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        color: l1,
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }]
      },
      flag: false  // 这个布尔值是为了测试option1在setstate操作后不会被重置成初始状态。
    }
    this.echart1 = React.createRef();
  }

  render() {
    return (
      <View style={styles.container}>
        <View><Echarts ref={this.echart1} option={this.state.option1} onPress={this.onPress} height={300} /></View>
        <View style={{padding: 20, alignItems: "center"}}><Text>{`当前state内状态: falg = ${this.state.flag.toString()}`}</Text></View>
        <TouchableOpacity onPress={this.editOption}>
          <Text>点我改变echarts option</Text>
        </TouchableOpacity>
        <Text numberOfLines={1}>{!this.state.image ? '这里显示base64格式的img字符串' : this.state.image}</Text>
        <TouchableOpacity onPress={this.getImage}>
          <Text>点我获取echarts image</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this.setState({flag: !this.state.flag})}>
          <Text>点我测试option 改变后进行setState</Text>
        </TouchableOpacity>
      </View>
    );
  }

  editOption = () => {
-    this.echart1.current.setOption({    
+    this.setState({
      option1: {
        ...this.state.option1,
        series: [
          {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
          }
        ]
      }
    })
  }
 类似资料: