zoukankan      html  css  js  c++  java
  • 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.value;
     6       let mousePos = mouseMove();
     7       let x = mousePos.x - 180;
     8       let y = mousePos.y - 50;
     9       extension.style.cssText = "top:" + y + "px;left:" + x +"px;display:inline;";
    10     }
    11   });
    12 
    13   mychart.on('mouseout', function (params) {
    14     if (params.componentType == type) {
    15       extension.style.cssText = "display:none";
    16     }
    17   });
    18 };
    19 
    20 function mousePosition(ev){
    21   if(ev.pageX || ev.pageY){
    22     return {x:ev.pageX, y:ev.pageY};
    23   }
    24   return {
    25     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    26     y:ev.clientY + document.body.scrollTop - document.body.clientTop
    27   };
    28 }
    29 function mouseMove(ev){
    30   ev = ev || window.event;
    31   return mousePosition(ev);
    32 }
    33 
    34 图表中
    35 xAxis: {
    36   type: 'category',
    37   data: [],
    38   triggerEvent: true,
    39   axisLabel: {
    40     formatter: function (value) {
    41       let res = value;
    42       if (res.length > 5) {
    43         res = res.substring(0, 4) + "..";
    44       }
    45       return res;
    46     }
    47   },
    48 },
    49 
    50 #extension {
    51   position: absolute;
    52   font-size: 14px;
    53   border-radius: 5px;
    54   color: #fff;
    55   background: #000;
    56   filter:alpha(opacity=70);
    57   -moz-opacity:0.7;
    58   -khtml-opacity: 0.7;
    59   opacity: 0.7;
    60   padding:5px;
    61   display: none;
    62 }
  • 相关阅读:
    常用 Git 命令清单
    谈谈关于PHP的代码安全相关的一些致命知识
    九个Console命令,让 JS 调试更简单
    有趣的博客小工具
    利用fputcsv导出数据备份数据
    IT小天博客APP版本
    七牛云存储文件批量下载工具使用教程
    Mysql的常见几种错误:1045,1044
    我是一个线程
    两行代码快速创建一个iOS主流UI框架
  • 原文地址:https://www.cnblogs.com/mxyr/p/9237996.html
Copyright © 2011-2022 走看看