rn-svg-chart v0.1.0

rn-svg-chart

使用Svg 画的各种图表，方便使用，会慢慢完善，现在动画欠缺，尽量用一个不怎么耗性能的动画方式实现。

Check out the demo.

Installation

1. 通过npm 安装

   npm install rn-svg-chart --save

2. 通过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
}