閑話不多說，先到上動態圖讓大家看看。使用起來超級簡單，完美適配ios和android

chart.gif

簡單介紹一下：
1.蘋果 橘子 這個可以根據legend這個屬性來設置，可一個可多個。具體參考代碼
2.可以是單獨的一種圖形，也可以是多種切換
3.圖形的顏色可以根據color屬性來改，具體請參考代碼

下面介紹下使用方法：

1。 npm install native-echarts --save
2。沒有了。。。就是這么簡單

09FB6703-EA4A-4440-86D0-FE8C619B3EF1.png 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, 2, 7, 13, 16],organ: [6, 9, 9, 2, 8, 7, 17, 18],}}render() {const option = {//點擊某一個點的數據的時候，顯示出懸浮窗tooltip : {trigger: 'axis'},//可以手動選擇現實幾個圖標legend: {data:['蘋果','橘子']},//各種表格toolbox: {//改變icon的布局朝向//orient: 'vertical',show : true,showTitle:true,feature : {//show是否顯示表格，readOnly是否只讀dataView : {show: true, readOnly: false},magicType : {//折線圖 柱形圖 總數統計 分開平鋪type: ['line', 'bar','stack','tiled'],},}},xAxis : [{//就是一月份這個顯示為一個線段，而不是數軸那種一個點點boundaryGap:true,type : 'category',name : '時間',data : ['1月','2月','3月','4月','5月','6月','7月','8月']}],yAxis : [{type : 'value',name : '銷量(kg)'}],//圖形的顏色組color:['rgb(249,159,94)','rgb(67,205,126)'],//需要顯示的圖形名稱，類型，以及數據設置series : [{name:'蘋果',//默認顯type:'bar',data:this.state.apple},{name:'橘子',type:'bar',data:this.state.organ}]};return (<View style={styles.container}><View style={styles.titleView}><Text style={styles.title}>每月蘋果橘子銷量統計圖</Text></View><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=='ios'?14:0,backgroundColor:'#ff6400',justifyContent: 'center',alignItems: 'center',},title:{color:'white',fontSize:20,textAlign:'center',}, });

總結

以上是生活随笔為你收集整理的react-native集成超级强大的图表工具native-echarts的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。