echarts-手动控制axispointer的显示位置及隐藏

使用场景：

echarts的折线图中，axispointer的触发方式一般会选axis，但是这样的缺点就是当选中某个值时不论x轴对应的点有没有数据，都会展示axisPointer。本文主要介绍如何在没有数据时隐藏axisPointer或者自定义它的显示位置。

主要做法：

1. 屏蔽默认触发：把tooltip和axisPointer的triggerOn均设置为‘none‘；
2. 显示：在tooltip中配置axisPointer，使用dispatchAction:showTip显示tooltip和axisPointer；
3. 隐藏：使用dispatchAction:hiddenTip和dispatchAction:updateAxisPointer隐藏；

具体实现：

echarts的tooltip配置：

tooltip: {
            trigger: 'axis',
            triggerOn: 'none',
            showContent: false,
            axisPointer: {
              axis: 'x',
              snap: true,
              lineStyle: {
                color: 'rgba(86,86,86,0.50)'
              }
            }
          }

echarts的axisPointer配置：

axisPointer: {
            triggerOn: 'none'
          },

在eCharts实例上监听鼠标事件：

// 按下鼠标、移动鼠标
myChart.getZr().on('mousedown', chartTouchHandler);
myChart.getZr().on('mousemove', chartTouchHandler);
// 鼠标抬起时隐藏axisPointer
myChart.getZr().on('mouseup', () => {
          myChart.dispatchAction({
            type: 'hideTip'
          });
          myChart.dispatchAction({
            type: 'updateAxisPointer',
            currTrigger: 'leave'
          });
        });

chartTouchHandler，控制axisPointer的显示位置及隐藏

chartTouchHandler(event) {
        // 根据event.offsetX计算dataIndex的坐标，内部逻辑按需实现
        // 一般可根据图表canvas的宽度 - grid配置中的左右边界计算出总宽度width
        // dataIndex = Math.ceil(xDataLength / width * (event.offsetX - grid.left))
        const dataIndex = getIndexByOffsetX(event.offsetX);
        // 结合数据判断当前dataIndex是否有效
        if(checkValue(dataIndex)){
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: dataIndex
            })
        }else {
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: customIndex
            })
            // or....
            // myChart.dispatchAction({
            //    type: 'hideTip'
            // });
            // myChart.dispatchAction({
            //    type: 'updateAxisPointer',
            //    currTrigger: 'leave'
            // });
        }
      }
    },