EchartsX轴内容过长自动截取,鼠标悬浮显示完整名称

  |   0 评论   |   141 浏览

1. Echarts所需配置

xAxis: {
        type: 'category',
        data: xdata,// X轴数据
        triggerEvent: true,// 必须加这个属性,用来响应Echarts的X轴数据
        axisLabel:{
			show:true,
			padding:[25,0,0,0],
			interval:0,// 强制显示全部,根据需求决定是否需要
			rotate:40,// 旋转角度,根据需求决定是否需要
			formatter:function (value){
				var len = value.length,charCode = -1;
				var str = "";// 截取好的字符
				var num = 0;// 截取字符数
				// 逐字判断字符是否是中文,一个中文=2个数字或英文
				// 以此将字符的宽度控制在一定的长度
				for(var thisNum = 0;thisNum < len;thisNum++){
					var js = thisNum;
					if(num >= 9){
						break;
					}
					charCode = value.charCodeAt(js);// 获取字符码值
					
					if(charCode >=0 && charCode <= 128){// 英文
						str+=value.substring(js,js+1);
						num++;
					}else{ // 中文
						str+=value.substring(js,js+1);
						num=num+2;
					}
				}
				if(value == str){
					return value;
				}else{
					return str+"···";
				}
			}
		}
    }

2. 鼠标悬浮展示

Chart.on('mouseover', function(params) {
    	var id = document.getElementById("tootipDiv");
        if(!id) {// 检查是否存在弹窗DIV,不存在则新建
            var div = "<div id ='tootipDiv'></div>";
            $jqury('.searchwrap').append(div);// searchwrap这里可根据需求自己配置
            $jqury('#tootipDiv').css({
            	"position": "absolute",
	        	"color": "black",
	        	"border": "1px solid #f0f0f0",
	        	"display": "none",
	        	"width": "auto",
	        	"height": "auto",
	        	"padding": "10px",
	        	"text-align": "center",
	        	"background-color": "#ffffff",
	        	"z-index":"99999"
            });
        }
        if(params.componentType == "xAxis") {// 判断鼠标是否悬浮在X轴上
        	$jqury('#tootipDiv').text(params.value);// 将完整X轴数据填入DIV
	        	var xx = 0;
	            var yy = 0;
        		if(!jQuery.support.leadingWhitespace){// IE8及以下位置计算方法
        			xx = event.clientX+document.body.scrollLeft + document.documentElement.scrollLeft - 30;
                    yy = event.clientY+document.body.scrollTop + document.documentElement.scrollTop-40;
        		}else{// IE9以上及其他浏览器计算位置方法
        			xx = event.pageX - 30;
                    yy = event.pageY - 40;
        		}
                $jqury('#tootipDiv').css('top', yy).css('left', xx);
                $jqury('#tootipDiv').show();
        }else{// 没有悬浮在X轴上隐藏Div
        	$jqury('#tootipDiv').hide();
        }
    });

    // 鼠标移出隐藏Div
	Chart.on('mouseout', function(params) {
    	$jqury('#tootipDiv').hide();
    });

评论

发表评论