ReactNative学习笔记七之图表组件交互（上）
在写这篇文章之前，我必须要说一下这两天的经历，当时接到图表组件与其他组件交互的时候，感觉实现起来有些困难，毕竟我的js水平停留在初学阶段，而基本上js大部分原生的组件库都不支持React-Native，直接引用都会报"undefined is not an object (evaluating 'ua.match')" when importing an incompatible (browser) library.。所以对于这样的库，只能使用webview做wrap。上一节讲到的native-echart也是这样，这样等于是需要一个组件跟webview里面的组件进行通信。当时确实有些懵逼，不过，看了一下native-echart的源码，还是找到了办法，在这里分享给大家，同时也感谢native-echart的作者。
这篇文章我要分两部分写，为什么呢，上部分还要介绍一下echart的提示功能，下半部分将交互，要不交互什么，是吧。
Echart-tooltip
如果没看过上一篇文章的朋友，建议先看上一章内容ReactNative学习笔记六之折线图。
这个tooltip就是坐标系的提示框。
先介绍几个参数：
show
是否显示提示框组件
trigger
触发类型。可选：
- item
数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 - axis
坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 - none
什么都不触发。
axisPointer
坐标轴指示器配置项。
showContent
是否显示提示框浮层，默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false。
alwaysShowContent
是否永远显示提示框内容，默认情况下在移出可触发提示框区域后 一定时间后隐藏，设置为 true
可以保证一直显示提示框内容。
triggerOn
提示框触发的条件，可选：
- 'mousemove'
鼠标移动时触发。 - 'click'
鼠标点击时触发。 - 'mousemove|click'
同时鼠标移动和点击时触发。 - 'none'
不在 'mousemove'或 'click'时触发
showDelay
浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。
hideDelay
浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true的时候无效。
enterable
鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
confine
是否将 tooltip 框限制在图表的区域内。
当图表外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
transitionDuration
提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
position
提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。
formatter
提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
字符串模板
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis'
的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2}这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d}含义不一样。 其中变量{a}, {b}, {c}, {d}
在不同图表类型下代表数据含义为：
-
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
-
散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
-
地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
-
饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
formatter: '{b0}: {c0}<br />{b1}: {c1}'
回调函数
回调函数格式：
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
- 第一个参数 params
是 formatter 需要的数据集。格式如下：
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
// 饼图的百分比
percent: number,
}
在 trigger为 'axis'的时候，或者 tooltip 被 axisPointer触发的时候，params
是多个系列的数据数组。其中每项内容格式同上，
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
- 第二个参数 ticket
是异步回调标识，配合第三个参数 callback使用。 第三个参数 callback
是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket和 html更新提示框浮层内容。
示例：
formatter: function (params, ticket, callback) {
$.get('detail?name=' + params.name, function (content) {
callback(ticket, toHTML(content));
});
return 'Loading';
}
backgroundColor Color
提示框浮层的背景颜色。
borderColor Color
提示框浮层的边框颜色。
borderWidth number
提示框浮层的边框宽。
padding number
提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
textStyle
提示框浮层的文本样式。
好了，接下来看一下整体代码（完整代码请参照上一篇文章）：
this.state = {
option: {
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'，默认根据标题位置决定。
},
tooltip: {
show: true,
trigger:'axis',
axisPointer: {
type: 'cross'
},
hideDelay:1000,
// position: [10, 10],
// position: function (point, params, dom, rect, size) {
// // 固定在顶部
// return [point[0], '10%'];
// }
},
legend: {
show:true,//是否显示
width:10,//图例宽度
height:10,
orient:'horizontal',//布局朝向
itemGap:20,
data: [
'活跃人数1',
],
align:'left',
right:20,//距离右边界20
top:5
},
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 坐标轴是否是静态无法交互。
},
yAxis: {
// data: [ 10, 20,30,40]
},
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//是否连接空数据。
}]
},
text: 'text'
};
看一下效果：
action-tooltip
上面提到了，点击的时候可以实现提示，但是如果交互，需要触发事件来显示tip，而不是用state来设置：
showtip
- 指定在相对容器的位置处显示提示框，如果指定的位置无法显示则无效。
dispatchAction({
type: 'showTip',
// 屏幕上的 x 坐标
x: number,
// 屏幕上的 y 坐标
y: number,
// 本次显示 tooltip 的位置。只在本次 action 中生效。
// 缺省则使用 option 中定义的 tooltip 位置。
position: Array.<number>|string|Function
})
- 指定数据图形，根据 tooltip 的配置项显示提示框。
dispatchAction({
type: 'showTip',
// 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
seriesIndex?: number,
// 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
dataIndex?: number,
// 可选，数据名称，在有 dataIndex 的时候忽略
name?: string,
// 本次显示 tooltip 的位置。只在本次 action 中生效。
// 缺省则使用 option 中定义的 tooltip 位置。
position: Array.<number>|string|Function,
})
这里不做演示了，会在下一篇文章交互的时候做演示，因为这个dispatch不能在react native中直接调用。
action.tooltip.hideTip Action
隐藏提示框
dispatchAction({
type: 'hideTip'
})
总结
本篇文章讲的内容都是在为下一篇做基础，所以需要先明白这些操作，才能演示交互。
如果你也做ReactNative开发，并对ReactNative感兴趣，欢迎关注我的公众号，加入我们的讨论群：
