echartsx轴名称过长,截断+鼠标划过显示全称

xAxis : [
{
triggerEvent:true,//这句很重要,没有不会触发事件

……

}
],

……

videoChart.setOption(option);

extension(videoChart);
function extension(mychart) {
           
//判断是否创建过div框,如果创建过就不再创建了                       
var id = document.getElementById("extension");
if(!id) {
var div = "<div id = ‘extension‘ style=\"display:none\"></div>" ;
$(‘html‘).append(div);
}
}
videoChart.on(‘mouseover‘, function (params) {
console.log(params);
if(params.componentType == "xAxis") {
$(‘#extension‘).css({
"position": "absolute",
"color": "black",
"font-family": "Arial",
"font-size": "14px",
"padding": "5px",
"top":"50px",
"display":"inline-block",
"z-index":"2000"
}).text(params.value);                               
$("html").mousemove(function(event) {                           
var xx = event.pageX - 30;
var yy = event.pageY + 20;
$(‘#extension‘).css(‘top‘, yy).css(‘left‘, xx);
}); 
                         

});
videoChart.on(‘mouseout‘, function(params) { 
if(params.componentType == "xAxis") {
$(‘#extension‘).css(‘display‘, ‘none‘);
}                       
});

原文地址:https://www.cnblogs.com/monozxy/p/9755697.html

时间: 2024-10-07 16:53:56

echartsx轴名称过长,截断+鼠标划过显示全称的相关文章

echarts x轴名称太长

echarts x轴名称太长了,隐藏一部分,鼠标移到名称上,显示全称 1 function extension(mychart, type) { 2 let extension = document.getElementById("extension"); 3 mychart.on('mouseover', function (params) { 4 if (params.componentType == type) { 5 extension.innerHTML = params.v

鼠标划过显示浮层

/** * 鼠标移上去显示层 * @param divId 显示的层ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $("#" + divId); //要浮动在这个元素旁边的层 div.css("position", "absolute");//让这个层可以绝对定位 var self = $(this); //当前对象 self.hover(function() { d

JavaScript总结之鼠标划过弹出div单击出现对话框

为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认或取消.其实部分想要的功能可以从中截取. js代码: 1 <script type="text/javascript"> 2 function sAlert_jobdel(str){ 3 var msgw,msgh,bordercolor; 4 msgw=400;//提示窗口的

css样式控制鼠标滑过显示

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{margin: 0; padding: 0;font-family:arial;} .messdiv{position: relative;width: 150px;

转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该节点的全称,这里我们以title名称为例吧,示例代码如下所示: view sourceprint? 1.{ id:233, pId:23, name:"叶子节点233...",title:"叶子节点23333434343434"}, 2.{ id:234, pId:23

ECshop鼠标划过弹出 微信扫一扫代码

 效果如上图 安装步骤:1,将以下代码放到page_header.lbi里   <div class="f_l"><a href="../index.php" name="top"><img src="../images/logo.gif" /></a></div> 的后面 <a href="../index.php" name="

javascript 鼠标划词,弹出选取的词

很多时候,我们要使用到鼠标划词,然后获得划过的词文字内容,根据这个需求,写了如下代码,可以进行拓展. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> 是客户端javascr

Mac下关于——你不能拷贝项目“”,因为它的名称太长或包括的字符在目的宗卷上无效。文件的删除

内容是google的,测试有效,因为用revel打包的东西删除以后有这个循环bug Mac下关于——你不能拷贝项目“”,因为它的名称太长或包括的字符在目的宗卷上无效.文件的删除 关于这个问题我找到的一些资料, 可以通过如下方法删除 1.打开 终端 应用程序. 2.键入: sudo rm -rf 注意:在“-rf”后键入一个空格.没有空格该命令将不能执行.在步骤 6 之前请都不要按下 Return 键. 3.打开您的“废纸篓”. 4.从“编辑”菜单中选择“全选”. 5.将“废纸篓”中的所有内容都拖

CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效

各位网友大家好,我是陌上花会开,当然大家也可以叫我陌陌.今天这篇文章,我将手把手带领大家实战开发一个鼠标划过图片时的动画特效.在这里我不会给大家提供案例的源码下载,但是本人可以保证,只要大家跟着我的思路,一步步将代码复制到本地,一定会得到同样的运行效果.希望大家明白我的用心.好了不废话,直接进入今天的主题吧. 在今天这个案例里,我准备3个素材,一张背景图,两张风景图片.这个大家可以到网上自行下载. 在写代码之前,我先给大家展示一下,动画特效的效果图. 鼠标花过前: 当鼠标划过图片时,图片将逐渐变