在写这篇文章之前，我必须要说一下这两天的经历，当时接到图表组件与其他组件交互的时候，感觉实现起来有些困难，毕竟我的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感兴趣，欢迎关注我的公众号，加入我们的讨论群：