微信小程序不支持Echarts中tooltip的解决方法入门基础知识_echarts小白基础

一.问题 Echarts官方文档明确指出自己不支持微信小程序中使用Tooltip这个功能。但是只要做过图表设计的人都知道,Tooltip这个功能有多么重要,尤其是对于line图而言。那么如何解决或者说间接实现tooltip呢?二.解决思路1.第一种思路:1). 在原来的图上加一个label设置让他显示每个数据的纵坐标。当然,因为数据过多的原因,他

微信小程序不支持Echarts中tooltip的解决方法入门基础知识

一.问题

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

微信小程序不支持Echarts中tooltip的解决方法入门基础知识_echarts小白基础

二.解决思路

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

海计划公众号
(0)
上一篇 2020/04/03 19:44
下一篇 2020/04/03 19:43

您可能感兴趣的内容