一.问题

       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.第三种思路：

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

来源：https://blog.csdn.net/Soul_wh/article/details/81035225

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/1096