zoukankan      html  css  js  c++  java
  • echartsx轴名称过长,截断+鼠标划过显示全称

     1 xAxis : [
     2   {
     3         triggerEvent:true,//这句很重要,没有不会触发事件
     4 
     5         ……
     6 
     7    }
     8 ],
     9 
    10        ……
    11 
    12 videoChart.setOption(option);
    13 
    14 
    15     extension(videoChart);
    16     function extension(mychart) {
    17            
    18 //判断是否创建过div框,如果创建过就不再创建了                       
    19 var id = document.getElementById("extension");
    20 if(!id) {
    21     var div = "<div id = 'extension' style="display:none"></div>" ;
    22     $('html').append(div);
    23    }
    24 }
    25 videoChart.on('mouseover', function (params) {
    26 console.log(params);
    27 if(params.componentType == "xAxis") {
    28     $('#extension').css({
    29         "position": "absolute",
    30         "color": "black",
    31         "font-family": "Arial",
    32         "font-size": "14px",
    33         "padding": "5px",
    34         "top":"50px",
    35         "display":"inline-block",
    36         "z-index":"2000"
    37     }).text(params.value);                                
    38    $("html").mousemove(function(event) {                           
    39    var xx = event.pageX - 30;
    40    var yy = event.pageY + 20;
    41    $('#extension').css('top', yy).css('left', xx);
    42     }); 
    43                           
    44 } 
    45 });
    46 videoChart.on('mouseout', function(params) { 
    47 if(params.componentType == "xAxis") {
    48     $('#extension').css('display', 'none');
    49  }                        
    50 });
  • 相关阅读:
    Vue生命周期(转)
    Gulp的简单使用
    webpack的简单使用
    面试----手写正则表达式
    面试----你可以手写一个promise吗
    baidu.com跳转www.baidu.com
    php 操作时间、日期类函数
    php操作文件类的函数
    sphinx搜索 笔记
    bash下输入命令的几个常用快捷键
  • 原文地址:https://www.cnblogs.com/monozxy/p/9755697.html
Copyright © 2011-2022 走看看