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

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

导读：闲话不多说，先到上动态图让大家看看。使用起来超级简单，完美适配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> ); }render() { 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:titleView:{  }); 
  http://www.jianshu.com/p/cf15e2f041aa

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!