npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@yz1311/react-native-secharts

v1.7.1

Published

reactnative的echarts组件

Downloads

1

Readme

react-native-secharts

NPM Version License

一个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 [email protected] [email protected]
    react-native link react-native-webview

    或者

    npm install [email protected] [email protected] --save
    react-native link react-native-webview
  • react-native = 0.56

    yarn add [email protected]

    或者

    npm install [email protected] --save
  • react-native < 0.56

    yarn add [email protected]

    或者

    npm install [email protected] --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]
          }
        ]
      }
    })
  }

以下是示例图

柱状图

image

折线图

image

饼状图

image