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

时间: 2018-09-19阅读: 727标签: echarts

一.问题

       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


如何在 Vue 项目中使用 echarts

数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,废话不多说,那我们就看看如何在 Vue 的项目中使用 echarts。

echarts是什么_echart.js学习和使用

什么是Echarts?简单来说呢它就是一个商业级数据图表,一个纯JavaScript的图标库。可以兼容绝大部分的浏览器,可以为前端开发提供一个直观、生动、可交互、可高度个性化定制的数据可视化图表。

三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?

对比以上3种图表,ECharts和BizCharts相对容易使用,尤其ECharts的配置非常清晰,BizCharts与其也有一定相似之处。BizCharts优势在于组件化的形式使得dom结构相对清晰,按需引用。G2比较适合需要大量图表交互时引用,其丰富的api处理交互逻辑相对更有优势。

关于echarts图表在tab页中width:100%失效的问题

使用echarts时,写在tab页中的图表宽度明明设成了100%,但是在页面上实际却只有100px宽。解决办法:找一个在tab页的切换操作中不会隐藏的父容器,把它的宽度的具体值取出后在初始化图表之前直接赋给图表

关于ECharts内存泄漏问题

最近使用websocket加ECharts做了一个实时监控的功能,发现了一个比较严重的问题,就是浏览器运行一段时间就会非常卡,之前在ECharts官网运行官方实例“动态数据 + 时间坐标轴”时

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告合作文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯