/react-native-web-echarts

在 react-native 中使用 echarts ,详情关注:http://echarts.baidu.com/

Primary LanguageHTMLMIT LicenseMIT

react-native-web-echarts

介绍

要在 react-native 上使用 echarts 的图表库,目前方法主要是使用 react-nativewebview 利用网页的形式加载 echarts 的图形。

安装

使用 npm 安装

npm install react-native-web-echarts --save

使用 yarn 安装(推荐)

yarn add react-native-web-echarts

使用

示例
import React from 'react'
import { View, Text, Button } from 'react-native'
import Echarts from 'react-native-web-echarts'

export default class EcahrtsDemo extends React.Component {
  state = {
    data1: [1, 2, 3, 4],
    data2: [2, 4, 6, 8],
    data3: [1, 2, 3, 4]
  }
  render () {
    const { data1, data2, data3 } = this.state
    const option = {
      title: {
        text: 'ECharts demo'
      },
      tooltip: {},
      angleAxis: {
      },
      radiusAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四'],
        z: 10
      },
      polar: {
      },
      series: [{
        type: 'bar',
        data: data1,
        coordinateSystem: 'polar',
        name: 'A',
        stack: 'a'
      }, {
        type: 'bar',
        data: data2,
        coordinateSystem: 'polar',
        name: 'B',
        stack: 'a'
      }, {
        type: 'bar',
        data: data3,
        coordinateSystem: 'polar',
        name: 'C',
        stack: 'a'
      }],
      legend: {
        show: true,
        data: ['A', 'B', 'C'],
        right: 0
      }
    }
    return <View style={{flex: 1}}>
      <View style={{flex: 1, alignItems: 'center'}}>
        <Text>{'\necharts demo\n'}</Text>
        <Echarts
          option={option}
          height={300}
        />
        <Button
          title="reload"
          onPress={() => { this.setState({
            data1: [...new Array(4)].map(_ => Math.ceil(Math.random() * (10))),
            data2: [...new Array(4)].map(_ => Math.ceil(Math.random() * (10))),
            data3: [...new Array(4)].map(_ => Math.ceil(Math.random() * (10)))
          })} }
        />
      </View>
    </View>
  }
}
效果

android

android-screenshot

参数
  • option echarts的参数,跟echarts使用一样,参考echarts文档\
  • source source资源配置目录,即tpl资源文件目录,默认安卓product模式下在 android/app/src/main/assets 目录下,其他情况使用 require('./tpl.html') ,如用户需要自行配置目录,先将 tpl.html 复制到相应目录下,然后配置 source 路径即可
  • width (可选/默认为300)组件宽度,可以是数字或百分比
  • height (可选/默认300)组件高度,可以是数字或百分比
  • style (可选)除了宽度和高度已经固定设置以外, style 属性可以为组件添加其他样式
  • 其他 webview 属性:(可选)
    • onLoadStart
    • onLoad
    • onError
    • onLoadEnd
    • renderLoading
    • renderError

说明

  • 项目原理是在页面中建立一个固定大小的 webview 用来以网页的形式加载 echarts 的组件,所有的图表都是加载的一个html里面的 echarts 组件,根据设置 option 内容的不同表现出不同的图形。
  • 由于是web加载方式,所有图形显示会有一定的延迟
  • 由于在 Android 环境下,开发模式和生产模式读取文件资源形式不同,所以在生产模式下需要复制项目目录下的 tpl.html文件到android/app/src/main/assets` 目录下,打包后才能正常显示。
  • 支持 react-native-windows ,参考: 示例