使用Svg 画的各种图表,方便使用,会慢慢完善,现在动画欠缺,尽量用一个不怎么耗性能的动画方式实现。
-
通过
npm
安装npm install rn-svg-chart --save
-
通过
yarn
安装yarn add rn-svg-chart
参考的echarts的数据格式,有几点不同,一个是stack字段是否是堆叠图,valueInterval字段是分割线的个数,interWidth字段是柱形图之间的间隔。随着功能的完善,参数可能会有进一步的变化。
{
option: {
xAxis: {
type: 'category',
// type: 'value',
data: ['Mon', 'Tue', 'Wed', 'Thusssss', 'Fri', 'Sat', 'Sun', 'wqe', 'sdr', 'opu']
},
yAxis: {
// type: 'category',
type: 'value',
data: ['Mon', 'Tue', 'Wed', 'Thusssss', 'Fri', 'Sat', 'Sun', 'wqe', 'sdr', 'opu']
},
series: [
{
name: '直接访问',
type: 'bar',
data: [10, 5, 2, 3, 10, 7, 6, 5, 2, 30,]
},
{
name: '非直接访问',
type: 'bar',
data: [3, 4, 1, 4, 2, 8, 3, 3, 10, 7]
}
],
stack: false
},
valueInterval: 3,
style: { height: 400, width: window.width },
interWidth: 10
}
import React, { Component } from 'react';
import {
View,
Dimensions
} from 'react-native';
const { width, height } = Dimensions.get('window');
import {
Bar
} from 'rn-svg-chart';
export default class DemoExample extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center' }}>
<Bar style={{ height: 230, width: width }} option={this.props.option} />
</View>
);
}
}
DemoExample.defaultProps = {
option: {
....
},
valueInterval: 3,
style: { height: 400, width: width },
interWidth: 10
}