在写这篇文章之前,我必须要说一下这两天的经历,当时接到图表组件与其他组件交互的时候,感觉实现起来有些困难,毕竟我的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}
{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.|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.|string|Function,
})
这里不做演示了,会在下一篇文章交互的时候做演示,因为这个dispatch不能在react native中直接调用。
action.tooltip.hideTip Action
隐藏提示框
dispatchAction({
type: 'hideTip'
})
总结
本篇文章讲的内容都是在为下一篇做基础,所以需要先明白这些操作,才能演示交互。
如果你也做ReactNative开发,并对ReactNative感兴趣,欢迎关注我的公众号,加入我们的讨论群: