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

前言

公司的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

属性	类型	默认值	备注
option	obj	null	echarts配置项，请参考echarts官网
backgroundColor	string	‘rgba(0,0,0,0)’	图表画布背景色
width	number	‘auto’	画布宽度
height	number	400	画布高度
renderLoading	func	()=><View style={{backgroundColor: ‘rgba(0,0,0,0)’}}/>	loading时遮罩
onPress	func	(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]
          }
        ]
      }
    })
  }