微信小程序不支持Echarts中tooltip的解决方法

一.问题

       Echarts官方文档明确指出自己不支持微信小程序中使用Tooltip这个功能。但是只要做过图表设计的人都知道，Tooltip这个功能有多么重要，尤其是对于line图而言。那么如何解决或者说间接实现tooltip呢?

二.解决思路

1.第一种思路：

1). 在原来的图上加一个label设置让他显示每个数据的纵坐标。当然，因为数据过多的原因，他不会显示所有的数据，这不知道是不是一个bug。

label: {
           normal: {
             show: true
           }
        },

2). 然后加上一个tooltip的的坐标指示器，这个还是支持的。这里我们把axisPointer.type属性设为cross，这样会显示点击点横纵坐标。

tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'cross' ,       // 默认为直线，可选为：'line' | 'shadow' | 'cross'
        axis : "x",
      }

3). 最后我们加上一个最大值和平均值设置。让图列显示效果更加好。

markLine: {
          data: [
            { type: 'average', name: '平均值' },
            { type: 'max', name: '平均值' }]    
        },

4). 效果：左边是没有处理的一个图列，右边是经过上面操作后的图列。很明显，你点击一个点，他会显示这个点的坐标和这个点对应的数据坐标。基本上能达到效果。

2.第二种思路：

根据formatter得到的数据通过cover-view自定义

3.第三种思路：

在页面上定义两个隐式框，当点击图例的时候，通过事件获取坐标信息，然后显示在页面上。

三.总结

      后面提的两个方式就没有通过例子展示出来了，有兴趣的朋友可以私信我或者留言，我看到都会回复。另外我相信以后这个微信小程序使用Echarts不支持tooltip肯定会支持，我也给在github上发了很多条issue，希望官方早点实现这个功能吧。以上只是我个人的一些见解和思路，希望能帮助到有需要的人！