微信小程序不支持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.第三种思路:

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


三.总结

      后面提的两个方式就没有通过例子展示出来了,有兴趣的朋友可以私信我或者留言,我看到都会回复。另外我相信以后这个微信小程序使用Echarts不支持tooltip肯定会支持,我也给在github上发了很多条issue,希望官方早点实现这个功能吧。以上只是我个人的一些见解和思路,希望能帮助到有需要的人!


要修改 Echarts Tooltip 的内容,您可以使用 Echarts 提供的 Tooltip Formatter 函数来自定义 Tooltip 内容。具体步骤如下: 1.首先,您需要在 Echarts 的 option 配置 Tooltip 相关的属性,如下面的示例代码所示: ```javascript option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }, formatter: function (params) { return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value + '<br/>' + params[1].seriesName + ' : ' + params[1].value + '<br/>' + params[2].seriesName + ' : ' + params[2].value + '<br/>' + params[3].seriesName + ' : ' + params[3].value + '<br/>' } }, ... } ``` 在上面的代码,我们设置了 Tooltip 的触发方式为 'axis',使用了 'cross' 的 axisPointer,以及自定义的 Tooltip Formatter 函数。 2.接下来,您需要在 Formatter 函数编写自定义的 Tooltip 内容。根据您的需求,您可以在 Formatter 函数使用 params 参数来获取当前 Tooltip 的数据,然后根据这些数据来自定义 Tooltip 内容。下面是一个简单的示例代码: ```javascript formatter: function (params) { var res = params[0].name; res += '<br/>' + params[0].seriesName + ' : ' + params[0].value + '元'; res += '<br/>' + params[1].seriesName + ' : ' + params[1].value + '万元'; return res; } ``` 在上面的代码,我们首先获取了当前 Tooltip 的 name,然后根据 name 和 params 的 seriesName 和 value 来自定义 Tooltip 内容。 3.最后,将修改后的 Option 对象传递给 Echarts 的 setOption() 函数即可更新图表。示例代码如下: ```javascript myChart.setOption(option); ``` 以上就是修改 Echarts Tooltip 内容的步骤,希望能够帮助到您。
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值