jdreact-core-echarts

基于百度echarts封装的jdreact组件。

安装

npm install @areslabs/ares-core-echarts --save

Demo代码

import React, {Component,} from 'react'
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
} from 'react-native';

import {
    JDRouter,
    JDText,
} from '@areslabs/ares-core-lib';
import JDEcharts from '@areslabs/ares-core-echarts';
const {NavigationBar} = JDRouter;

class JDEchartsExample extends Component {

    static defaultProps ={
        option:{
            title: {
                text: 'ECharts demo'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }
    }

    render() {
        return (
            <View style={styles.wrapper}>
                <NavigationBar Title="Echarts组件"/>
                <View style={styles.content}>
                    <JDText>
                        跨平台通用Echarts组件,Echarts文档地址：http://echarts.baidu.com/option.html#title
                    </JDText>
                </View>
                <JDEcharts option={this.props.option} style={styles.chartStyle}/>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    wrapper: {
        flex: 1,

    },
    content: {
        paddingTop: 10,
        paddingLeft: 10,
        paddingRight: 10,
    },
    chartStyle:{
        marginTop:20,
    },
});
module.exports = JDEchartsExample;

运行效果

参见JDReactAPIDemos中 JDEchartsExample

组件props说明

• option (object): echarts的option对象（参见文档）。
• width (number): 图表宽度，默认值为包裹的容器宽度。
• height (number): 图表高度，默认值400。
• ...ViewPropTypes：支持所有View的属性