antu-rn-echarts

reactnative的echarts组件

Usage no npm install needed!

<script type="module">
  import antuRnEcharts from 'https://cdn.skypack.dev/antu-rn-echarts';
</script>

README

antu-rn-echarts

一个webview封装的图表组件。基于百度echarts4，相比native-echarts有支持地图、渐变色，用法与官网相同用法。

echarts version 4.2.1

已知bug 和 需要注意的点

  • android 模拟器上面渲染会出问题，目前android真机是没有问题的，请不要提类似issues。

  • 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，不推荐而已。

安装步骤

  1. 安装依赖

  • react-native >= 0.60.2

    yarn add antu-rn-echarts react-native-webview@androidx

    或者

    npm install antu-rn-echarts react-native-webview@androidx --save

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

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

    android.useAndroidX=true
android.enableJetifier=true
  1. 引用组件
import {Echarts, echarts} from 'antu-rn-echarts';
  • 大写开头的Echarts是组件
  • 小写开头的echarts是echarts对象
  1. 使用组件
<Echarts option={{}} height={400} width={300} mapGeoJson={JSON.stringify({"name":"china","type":"FeatureCollection","features":[]})}/>

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)=>{} 点击事件
mapGeoJson string null 地图geoJson数据，格式：{"name":"china","type":"FeatureCollection","features":[]}

实例方法

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