Echarts插件axisLabel增加tooltip接口

Echarts插件,默认情况下无法设置axisLabel的tooltip接口,也许是Echarts大神们觉得没必要吧,但是在实际使用过程中,这个接口还是有必要的,特别是数据量大的情况下和某些特殊场景下。
故本人参考插件其他地方的tooltip接口的设置,在axisLabel源码中,增加了tooltip接口。
具体的设置如下:在builders.axisLabel函数中新增如下内容,这段代码,主要是设置tooltip参数的,其中参数name是悬浮后显示的值。

    var tooltipOpt = axisModel.get('tooltip', true);

    var mainType = axisModel.mainType;
    var formatterParams = {
        componentType: mainType,
        name: name,
        $vars: ['name']
    };
    formatterParams[mainType + 'Index'] = axisModel.componentIndex;

接着在每一个label初始化为text组件的时候,加入以下代码

   var textEl = new graphic.Text({   
    ...                                                                  
    silent: silent,
    // 沈才良添加 axisLabel 提示信息
    tooltip:  (tooltipOpt && tooltipOpt.show) ? 
        zrUtil.extend({
            content:rawLabels[index],
            formatter: function () {
                return rawLabels[index];
            },
            formatterParams: formatterParams
    }, tooltipOpt) : null,
    ...
});

option配置:由于涉及到悬浮事件,故在axis的option中,silent要设置为false,triggerEvent要设置为true,在axisLabel配置处要设置{tooltip: {show: true}};如下代码所示:

xAxis : [
    {
        type : 'category',
        axisTick : {show: false},
        data : ['周一你是谁','周二你是谁','周三你是谁','周四你是谁','周五你是谁','周六你是谁','周日你是谁'],
        silent: false,
        triggerEvent:true,              
        axisLabel :{
            formatter: function (name) {
                return echarts.format.truncateText(name, 70, '14px Microsoft Yahei', '…');
            },
            tooltip: {
                show: true
            }
        }
    }
],

注意:tooltip接口一般和axisLabel中的formatter格式化参数配置使用,经过formatter的label一般是不是原始数据,有可能是不完整。而tooltip悬浮显示的内容一般是原始数据,它的作用对于格式化的label的信息一种补充。

demo下载地址: http://download.csdn.net/download/mulumeng981/9975285

最后发一张实际效果图:红色的矩形框所示的悬浮信息就是x轴第一个label的详细信息。
这里写图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值