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

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

浏览量:8400 时间: 来源:SoulSuperMan

一.问题

       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,希望官方早点实现这个功能吧。以上只是我个人的一些见解和思路,希望能帮助到有需要的人!


版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎