微信小程序不支持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.第三种思路:
在页面上定义两个隐式框,当点击图例的时候,通过事件获取坐标信息,然后显示在页面上。
来源:https://blog.csdn.net/Soul_wh/article/details/81035225
