echarts x轴名称太长

Posted 2020-11-20 mxyr

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 }