EchartsY轴文字过长悬浮显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
'yAxis':{
data: yData,
type: 'category',
axisTick: {
show:false,
alignWithLabel: true
},
axisLine: {
show: false,
},
axisLabel: {
interval: 0,
margin: 180,
clickable: true,
textStyle: {
align: "left",
fontWeight: 400,
color: '#646464',
fontSize: 14
},
//格式...函数
formatter: function (params) {
var val = "";
const maxLength=8
if (params?.length > maxLength) {
val = params.substr(0, maxLength) + '...';
return val;
} else {
return params;
}
}
},
triggerEvent: true
},
//鼠标事件函数
MouseOver(params){
var id = document.getElementById('extension');
if (!id){
//在body上挂载一个div,用来展示显示的文字
let div = document.createElement('div');
div.id = 'extension';
div.style.display = 'none';
document.body.append(div);
}
let _that = this;
let top=params.event.event.clientY +20+70>=document.body.clientHeight?params.event.event.clientY -45:params.event.event.clientY +20;
if (params.componentType === 'yAxis'){
let extension = document.getElementById('extension');
extension.innerHTML=params.value
extension.style.position= 'absolute';
extension.style.display= 'block';
extension.style.top= top + 'px';
extension.style.left= params.event.event.clientX + 'px';
extension.style.fontWeight='400';
extension.style.fontSize='14px';
extension.style.borderStyle= 'solid';
extension.style.whiteSpace= 'nowrap';
extension.style.zIndex= 9999999;
extension.style.transition= 'left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s';
extension.style.backgroundColor= 'rgb(85, 85, 85)';
extension.style.borderWidth= '0px',
extension.style.borderColor='rgb(51, 51, 51)';
extension.style.borderRadius= '4px';
extension.style.color= 'rgb(187, 187, 187)';
extension.style.font= '14px / 21px "Microsoft YaHei';
extension.style.boxShadow= 'rgb(207, 214, 237) 0px 3px 7px 2px';
extension.style.padding= '6px 13px';
extension.style.pointerEvents= 'none';
}
},
MouseOut(params){
let extension = document.getElementById('extension');
//监听当鼠标移走时把div的文字移除样式消除
extension.innerText = '';
extension.style.display = 'none';
},