由于項目需要，最近調研使用EChart，百度的這個項目真的是很不錯，使用方便，接口清晰。今天就跟大家分享一下。
使用方式
EChart需要native-echarts庫，所以一上來需要npm install native-echarts --save
然后就可以在你的項目中使用了。
廢話不多說，我先上代碼：
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Button,
View,
TouchableOpacity
} from 'react-native';
import Echarts from 'native-echarts';
export default class ChartDetail extends Component {
constructor(props) {
super(props);
this.state = {
option: {
title: {
text: '今日活躍',
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ["9:00", "12:00", "15:00", "18:00", "21:00", "24:00"]
},
yAxis: {},
series: [{
name: '活躍人數',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}]
},
text: 'text'
};
}
render() {
return (
<View style={styles.container}>
<Echarts option={this.state.option}
height={200}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 20,
marginBottom: 20,
},
echartstyle: {
height: 50,
width: 100,
},
button: {
backgroundColor: '#d9534f',
padding: 8,
borderRadius: 4,
marginBottom: 20
}
});
效果如下：
使用方式很簡單，先import進來，然后設置一個option參數，接著在render中：
<Echarts option={this.state.option}
height={200}/>
使用很簡單吧，其實根據上述代碼，你就可以進行不同形式的擴展了，但是如果這篇文章就這樣結束了，難免有些太水了，我還要說明一下各個參數的含義。
參數
我接下來會根據上述代碼描述一下各個參數的含義。
title
title就是上述效果圖中的今日活躍四個字，根據代碼可以看出，是通過text進行的設置，這里不再多說。看看其他屬性。
show
title: {
show: true,
},
標志title是否顯示，根據條件設置，可以動態設置是否顯示標題。
link
title: {
link: xxx,
},
主標題文本超鏈接。
textstyle
title: {
text: '今日活躍',
textStyle:{
color:'#f57f17',
fontStyle:'oblique', //三個可選項 'normal' 'italic' 'oblique'
fontWeight:'bold',//四個可選項 'normal' 'bold' 'bolder' 'lighter'
fontSize:24
},
textAlign:'left',//標題文本水平對齊 三個可選項 'left' 'center' 'right'
textBaseline:'top',//標題文本垂直對齊，支持 'top', 'middle', 'bottom'，默認根據標題位置決定。
},
可以用這種方式設置title的樣式，效果如下:
你也可以設置title的pading值：
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
或者：
title: {
text: '今日活躍',
textStyle:{
color:'#f57f17',
fontStyle:'oblique', //三個可選項 'normal' 'italic' 'oblique'
fontWeight:'bold',//四個可選項 'normal' 'bold' 'bolder' 'lighter'
fontSize:24
},
textAlign:'left',//標題文本水平對齊 三個可選項 'left' 'center' 'right'
textBaseline:'top',//標題文本垂直對齊，支持 'top', 'middle', 'bottom'，默認根據標題位置決定。
top：20
},
其中top:20的意思是組件離容器上側的距離。
同理還可以設置left，right，bottom。
陰影
除此之外，還提供可以設置陰影的方式
shadowColor Color 陰影顏色。支持的格式同color。
shadowOffsetX number 陰影水平方向上的偏移距離。
shadowOffsetY number 陰影垂直方向上的偏移距離。
legend
這是圖例組件。參數我就不一一介紹了，直接看一下下面的代碼：
legend: {
show:true,//是否顯示
width:10,//圖例寬度
height:10,
orient:'horizontal',//布局朝向
itemGap:20,
formatter: function (name) {
return 'Legend ' + name;
},//用來格式化圖例文本，支持字符串模板和回調函數兩種形式。
data: [{
name: '活躍人數1',
// 強制設置圖形為圓。
icon: 'circle',
},{
name: '活躍人數2',
// 強制設置圖形為圓。
icon: 'circle',
},{
name: '活躍人數3',
// 強制設置圖形為圓。
icon: 'circle',
}],//圖例的數據數組。
selectedMode:'single',
backgroundColor:'#f9a825',
align:'left',
right:20,//距離右邊界20
top:5
}
顯示效果：
這里的具體參數，可以參照title，都是差不多的，包括陰影等，這里不再贅述。
xAxis
直角坐標系 grid 中的 x 軸，一般情況下單個 grid 組件最多只能放上下兩個 x 軸，多于兩個 x 軸需要通過配置 offset屬性防止同個位置多個 x 軸的重疊。
還是通過代碼看一下：
xAxis: {
show:true,//是否顯示
// offset: 20 X 軸相對于默認位置的偏移，在相同的 position 上有多個 X 軸的時候有用。
position:'bottom',//可選： 'top' 'bottom'
//'value' 數值軸，適用于連續數據。
// 'category' 類目軸，適用于離散的類目數據，為該類型時必須通過 data 設置類目數據。
// 'time' 時間軸，適用于連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。
// 'log' 對數軸。適用于對數數據。
type:'category',
name:'時間',
nameLocation:'end',//可選： 'start' 'middle' 'end'
// nameTextStyle 坐標軸名稱的文字樣式。
// nameGap 坐標軸名稱與軸線之間的距離。
// nameRotate 坐標軸名字旋轉，角度值。
data: ["9:00", "12:00", "15:00", "18:00", "21:00", "24:00"]
//也可以具體配置[{ value: '周一', textStyle: { fontSize: 20, color: 'red'}}, '周二', '周三', '周四', '周五', '周六', '周日']
// min坐標軸刻度最小值。
// max坐標軸刻度最大值。
// silent 坐標軸是否是靜態無法交互。
},
效果如下：
這里要特別說明一下，如果給出的數據是離散的，要使用category（類目軸），否則數據無法正常顯示。
其中還有一個參數boundaryGap：類目軸和非類目軸的設置和表現不一樣，類目軸中 boundaryGap
可以配置為 true和 false。默認為 true，這時候刻度只是作為分隔線，標簽和數據點都會在兩個刻度之間的帶(band)中間。
非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的數組，分別表示數據最小值和最大值的延伸范圍，可以直接設置數值或者相對的百分比，在設置 min和 max后無效。
示例：
boundaryGap: ['20%', '20%']
yAxis與xAxis類似，這里不再過多介紹。
series
這個屬性不同類型的圖，設置是不同的，本文主要介紹的是折線圖。
series: [{
name: '活躍人數1',
type: 'line',
data: [5, 20, 36, 10, 10, 20],
// xAxisIndex:10,//使用的 x 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。
symbol:'roundRect',//標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 還有symbolSize symbolRotate可以設置symbol的樣式
hoverAnimation:true,//是否開啟 hover 在拐點標志上的提示動畫效果。
connectNulls:true//是否連接空數據。
}]
效果圖如下：
總結
好了差不多這次說的就這些，后面還會有其他組件分享給大家。
如果你也做ReactNative開發，并對ReactNative感興趣，歡迎關注我的公眾號，加入我們的討論群：
