要在 react-native 上使用 echarts 的图表库，目前方法主要是使用 react-native 的 webview 利用网页的形式加载 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
optionecharts的参数，跟echarts使用一样，参考echarts文档\sourcesource资源配置目录，即tpl资源文件目录，默认安卓product模式下在android/app/src/main/assets目录下，其他情况使用require('./tpl.html')，如用户需要自行配置目录，先将tpl.html复制到相应目录下，然后配置source路径即可width（可选/默认为300）组件宽度，可以是数字或百分比height（可选/默认300）组件高度，可以是数字或百分比style（可选）除了宽度和高度已经固定设置以外，style属性可以为组件添加其他样式- 其他
webview属性：（可选）onLoadStartonLoadonErroronLoadEndrenderLoadingrenderError