最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称

样例:

图二是鼠标移动到名称显示的,怎么带着鼠标一起截图博主不是很清楚,不要在意这些细节好了.

这里来说一下博主的实现方式

1. 设定mychart.on('mouseover',functionx) ,mychart的鼠标悬浮事件,当鼠标移动到x轴的名称时触发这个事件.这里需要把x轴设置为

triggerEvent: true,切记.

2. 声明一个不显示的div框,这个框是用在鼠标移到类目上,显示展开的全部的名称的.

3. 获得鼠标的位置,把这个位置赋给div框

4.添加mychart.on('mouseout',functiony) 鼠标移除事件.

5. 当类目名称长度大于5的时候 博主就把他substring了  再拼接上"..".

下面是源码:

var myChart = echarts.init(document.getElementById('main'));

option = {

xAxis: {

triggerEvent: true,

type: 'category',

data: ['这是名称非常长的商品1', '这是名称比商品1还长很多的商品2', '这同样是名称很长的商品3', '短的商品4'],

axisLabel: {

formatter: function(value) {

var res = value;

if(res.length > 5) {

res = res.substring(0, 4) + "..";

}

return res;

}

}

},

yAxis: {

type: 'value'

},

series: [{

data: [120, 200, 150, 80],

type: 'bar'

}]

}

myChart.setOption(option);

extension(myChart);

function extension(mychart) {

//判断是否创建过div框,如果创建过就不再创建了

var id = document.getElementById("extension");

if(!id) {

var div = "

$('html').append(div);

}

mychart.on('mouseover', function(params) {

if(params.componentType == "xAxis") {

$('#extension').css({

"position": "absolute",

"color": "black",

//"border":"solid 2px white",

"font-family": "Arial",

"font-size": "20px",

"padding": "5px",

"display": "inline"

}).text(params.value);

$("html").mousemove(function(event) {

var xx = event.pageX - 30;

var yy = event.pageY + 20;

$('#extension').css('top', yy).css('left', xx);

});

}

});

mychart.on('mouseout', function(params) {

if(params.componentType == "xAxis") {

$('#extension').css('display', 'none');

}

});

};

想上传源码的..没找到.

总之使用三步骤

1. x轴上添加 triggerEvent: true

2.加入这段代码隐藏过长的文字,长度可以自己定义

axisLabel: {

formatter: function(value) {

var res = value;

if(res.length > 5) {

res = res.substring(0, 4) + "..";

}

return res;

}

}

}

3. 调用 extension('这里传入你的容器');

就可以使用了

Android TextView内容过长加省略号，点击显示全部内容

在Android TextView中有个内容过长加省略号的属性,即ellipsize,用法如下: 在xml中:android:ellipsize="end"    省略号在结尾an ...

Delphi锁定鼠标 模拟左右键 静止一会自动隐藏鼠标

unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

div内容过长自动省略号

//自 ...

C# winform 实现 qq 在屏幕边缘 自动隐藏 鼠标移过去 移上去 又自动显示

代码下载地址   http://download.csdn.net/detail/simadi/7677147

Html内容超出标记宽度后自动隐藏

我们在显示长文本时,往往需要去在C#端去截取字符,但这绝对不是一个好方面,因为我们的长文本往往都是代HTML标记的,你一个载不好,就会出现乱码问题(出现半个HTML标记),而比较好的作法就是通过CSS ...

Echarts x轴文本内容太长的几种解决方案

Echarts 标签中文本内容太长的时候怎么办 ? - 1对文本进行倾斜 在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111", ...

echarts x轴名称太长

echarts x轴名称太长了,隐藏一部分,鼠标移到名称上,显示全称 function extension(mychart, type) { let extension = document.getE ...

解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...

WPF窗口长时间无人操作鼠标自动隐藏

在软件开发中有时会有等待一段时间无人操作后隐藏鼠标,可能原因大致如下: 1.为了安全性,特别是那些需要用到用户名和密码登录服务端的程序,常常考虑长期无人操作,程序自动跳转到用户登录界面: 2.软件为了 ...

随机推荐

chkconfig

chkconfig的级别: 0:关机 1:单用户模式 2:无网络支持的多用户模式 3:有网络支持的多用户模式 4:保留,未使用 5:有网络支持有X-Windows(图形界面)支持的多用户模式 6:重新 ...

Android Tab -- 使用ViewPager、Fragment、FragmentPagerAdapter来实现