react-native集成超级强大的图表工具native-echarts

发布时间：2020-12-15 05:10:05 所属栏目：百科来源：网络整理

导读：闲话不多说，先到上动态图让大家看看。使用起来超级简单，完美适配iOS和Android chart.gif 简单介绍一下：1.苹果橘子这个可以根据legend这个属性来设置，可一个可多个。具体参考代码2.可以是单独的一种图形，也可以是多种切换3.图形的颜色可以根据color属

闲话不多说，先到上动态图让大家看看。使用起来超级简单，完美适配iOS和Android

chart.gif

简单介绍一下：1.苹果橘子这个可以根据legend这个属性来设置，可一个可多个。具体参考代码2.可以是单独的一种图形，也可以是多种切换3.图形的颜色可以根据color属性来改，具体请参考代码
下面介绍下使用方法：
1。 npm install native-echarts --save2。没有了。。。就是这么简单

09FB6703-EA4A-4440-86D0-FE8C619B3EF1.png

importReact,{ Component } from 'react';import { AppRegistry,StyleSheet,Text,View,Platform} from 'react-native';import Echarts from 'native-echarts';import React,{ Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Platform
} from 'react-native';

import Echarts from 'native-echarts';
import Dimensions from 'Dimensions';
const {width} = Dimensions.get('window');
export default class Chart extends Component {

constructor(props) {
super(props);
this.state = {
apple:[2,4,7,2,13,16],
organ: [6,9,8,17,18],
}
}

render() {
    const option = {
        //点击某一个点的数据的时候，显示出悬浮窗
        tooltip : {
            trigger: 'axis'
        },//可以手动选择现实几个图标
        legend: {
            data:['苹果','橘子']
        },161);">//各种表格
        toolbox: {
            //改变icon的布局朝向
            //orient: 'vertical',
            show : true,showTitle:feature : {
                //show是否显示表格，readOnly是否只读
                dataView : {show: readOnly: false},magicType : {
                    //折线图 柱形图 总数统计 分开平铺
                    type: ['line',152);">'bar',152);">'stack',152);">'tiled'],},}
        },xAxis : [
            {
                //就是一月份这个显示为一个线段，而不是数轴那种一个点点
                boundaryGap:type : 'category',name : '时间',data : ['1月',152);">'2月',152);">'3月',152);">'4月',152);">'5月',152);">'6月',152);">'7月',152);">'8月']
            }
        ],yAxis : [
            {
                type : 'value',152);">'销量(kg)'
            }
        ],161);">//图形的颜色组
        color:['rgb(249,159,94)',152);">'rgb(67,205,126)'],161);">//需要显示的图形名称，类型，以及数据设置
        series : [
            {
                name://默认显
                type:data:this.state.apple
            },{
                name:'橘子',type:this.state.organ
            }
        ]
    };
    return (
        <View style={styles.container}> Echarts option={option} height={300} width={width}/> </View> ); }

}

const styles = StyleSheet.create({
Container: {
flex:1,
},

titleView:{
    height:Platform.OS=='ios'?64:44,paddingTop:Platform.OS==14:0,backgroundColor:'#ff6400',justifyContent: 'center',alignItems: title:{
    color:'white',fontSize:20,textAlign: }); 
 http://www.jianshu.com/p/cf15e2f041aa
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!