react native使用Echarts

一. 導入第三方包

 　　npm install native-echarts --save

二.導入Echarts組件

　　　

import Echarts from 'native-echarts

三.定義option

 

render(){
 
    const option = {
          tooltip: {    //定義環形圖item點擊彈框
           trigger: 'item',
           formatter: "{a} <br/>{b}: {c} ({d}%)"
         },
          legend: {     //定義右邊的菜單目錄效果
            orient: 'vertical',
            x: deviceWidth*0.5,
            y:'center',
            right:50,
            //width:90
            itemGap:4.50,
            color:'#666666',
            itemWidth:12,
            itemHeight:12,
            data:legend     //這里的data要和下面外層的data的name相對應，否則會顯示為空
            //data:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          },
          series: [{
            name:'月份銷量',
            type:'pie',
            hoverAnimation:false, 
            radius: ['58%', '90%'],     //設置環形圖展示半徑空心圓環
            avoidLabelOverlap: false,
            center: ['25%', '50%'],     //這里可以設置環形圖展示的位置
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {               //設置點擊展示環形圖內部文本樣式
                show: true,
                textStyle: {
                  color:'#666666',
                  fontSize: '11',
                  fontWeight: 'bold'
                }
              }
            },

            labelLine: {
              normal: {
                show: false
              }
            },
            data:monthdata    //這里的data是定義環形圖的展示內容
            //data:[{value:2.00, name:'1月'}, {value:3.00, name:'2月'}, {value:3.00, name:'3月'}, {value:2.00, name:'4月'}, {value:5.00, name:'5月'}, {value:7.00, name:'6月'},
            //{value:3.00, name:'7月'},{value:7.00, name:'8月'},{value:25.00, name:'9月'}, {value:3, name:'10月'}, {value:3, name:'11月'}, {value:3, name:'12月'}]
          }],
            //可以根據下標來定義item內容的顏色
            color:['#01a2ea', '#8ac99c','#23ac38','#b4d467','#ffff00','#fdcc89','#f19049','#ea6941','#f95353','#cc5ac0','#ac5fd7','#5570b5']

        };
    return(
            。。。

　　　　　　　。。。
    ）
}    

 

 

四.控件綁定option

　　　　

<Echarts option={option} height={deviceHeight*0.19} width={deviceWidth} />

 

下面是效果圖 

         

 

注意：我在Android端打包時遇到了展示空白的問題

　在node_modules里面找到natives-echarts包下的tpl.html文件，復制到android的assets下面，修改index.js的引用方式。

　圖例↓

　

　https://github.com/somonus/react-native-echarts/issues/12

更多設置請參考官方網址

　http://echarts.baidu.com/echarts2/doc/example.html