ReactNative学习笔记六之折线图
由于项目需要，最近调研使用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感兴趣，欢迎关注我的公众号，加入我们的讨论群：
