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

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

下面介紹下使用方法：

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

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',
  },
});