Skip to content

Commit 8a9316e

Browse files
fangsmilefangsmile
authored
Merge pull request #1978 from VisActor/feat/add_labelHoverOnAxis_axisComponent
Feat/add label hover on axis axis component
2 parents 934e93f + 1ea7591 commit 8a9316e

10 files changed

Lines changed: 666 additions & 16 deletions

File tree

‎common/changes/@visactor/vrender-components/feat-add_labelHoverOnAxis_axisComponent_2025-11-13-10-05.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"changes": [
3+
{
4+
"comment": "feat: add labelHoverOnAxis for axis component\n\n",
5+
"type": "none",
6+
"packageName": "@visactor/vrender-components"
7+
}
8+
],
9+
"packageName": "@visactor/vrender-components",
10+
"email": "892739385@qq.com"
11+
}

‎packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
import { LinearScale, PointScale } from '@visactor/vscale';
2+
import '@visactor/vrender';
3+
import { GroupFadeIn, GroupFadeOut } from '@visactor/vrender';
4+
import { LineAxis, GroupTransition } from '../../../src';
5+
import render from '../../util/render';
6+
7+
const axis = new LineAxis({
8+
orient: 'bottom',
9+
title: {
10+
// space: 0,
11+
// padding: 0,
12+
// textStyle: {
13+
// fontSize: 12,
14+
// fill: '#363839',
15+
// fontWeight: 'normal',
16+
// fillOpacity: 1,
17+
// textAlign: 'center',
18+
// textBaseline: 'bottom'
19+
// },
20+
visible: true,
21+
autoRotate: true,
22+
// angle: 1,
23+
// shape: {},
24+
// background: {
25+
// visible: true,
26+
// style: {
27+
// fill: 'red'
28+
// }
29+
// },
30+
// state: {
31+
// text: null,
32+
// shape: null,
33+
// background: null
34+
// },
35+
text: '细分'
36+
// maxWidth: null
37+
},
38+
label: {
39+
visible: true,
40+
inside: false,
41+
space: 20,
42+
style: {
43+
fontSize: 12,
44+
fill: '#6F6F6F',
45+
fontWeight: 'normal',
46+
fillOpacity: 1,
47+
angle: 0,
48+
textAlign: 'center'
49+
},
50+
formatMethod: null,
51+
state: null,
52+
autoRotate: false,
53+
autoHide: false,
54+
autoLimit: false,
55+
containerAlign: 'center'
56+
},
57+
labelHoverOnAxis: {
58+
autoRotate: true,
59+
position: 185,
60+
// space: 10,
61+
padding: 6,
62+
textStyle: {
63+
// fontSize: 12,
64+
// fill: '#363839',
65+
// fontWeight: 'normal',
66+
// fillOpacity: 1,
67+
textAlign: 'center'
68+
// textBaseline: 'top'
69+
},
70+
visible: true,
71+
// background: {
72+
// visible: true,
73+
// style: {
74+
// fill: 'red'
75+
// }
76+
// },
77+
text: ''
78+
},
79+
// tick: {
80+
// visible: true,
81+
// inside: false,
82+
// alignWithLabel: true,
83+
// length: 2,
84+
// style: {
85+
// lineWidth: 1,
86+
// stroke: '#D9DDE4',
87+
// strokeOpacity: 1
88+
// },
89+
// state: null
90+
// },
91+
// subTick: {
92+
// visible: true,
93+
// inside: false,
94+
// count: 4,
95+
// length: 2,
96+
// style: {
97+
// lineWidth: 10,
98+
// stroke: '#D9DDE4',
99+
// strokeOpacity: 1
100+
// },
101+
// state: null
102+
// },
103+
line: {
104+
visible: true,
105+
style: {
106+
lineWidth: 1,
107+
stroke: '#989999',
108+
strokeOpacity: 1
109+
},
110+
startSymbol: {},
111+
endSymbol: {}
112+
},
113+
x: 0,
114+
y: 0,
115+
// start: {
116+
// x: 0,
117+
// y: 0
118+
// },
119+
// end: {
120+
// x: 0,
121+
// y: 427
122+
// },
123+
start: { x: 0, y: 200 },
124+
end: { x: 500, y: 200 },
125+
items: [
126+
[
127+
{
128+
id: '消费者',
129+
label: '消费者',
130+
value: 0.8333333333333334,
131+
rawValue: '消费者'
132+
},
133+
{
134+
id: '公司',
135+
label: '公司',
136+
value: 0.4999999999999999,
137+
rawValue: '公司'
138+
},
139+
{
140+
id: '小型企业',
141+
label: '小型企业',
142+
value: 0.1666666666666666,
143+
rawValue: '小型企业'
144+
}
145+
]
146+
],
147+
visible: true,
148+
pickable: true,
149+
hover: true,
150+
select: true,
151+
panel: {
152+
visible: true,
153+
state: {
154+
// hover: {
155+
// fillOpacity: 0.08,
156+
// fill: 'red'
157+
// },
158+
selected: {
159+
fillOpacity: 0.08,
160+
fill: 'blue'
161+
},
162+
selected_reverse: {
163+
fillOpacity: 0.08,
164+
fill: 'red'
165+
}
166+
// hover_reverse: {
167+
// fillOpacity: 0.08,
168+
// fill: '#141414'
169+
// }
170+
}
171+
},
172+
verticalFactor: 1,
173+
horizontalLimitSize: 150,
174+
horizontalMinSize: 150
175+
});
176+
window.axis = axis;
177+
setTimeout(() => {
178+
axis.showLabelHoverOnAxis(490, '细分细分细分细分细分打撒规细分');
179+
}, 100);
180+
render([axis], 'main');

‎packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import { LinearScale, PointScale } from '@visactor/vscale';
2+
import '@visactor/vrender';
3+
import { GroupFadeIn, GroupFadeOut } from '@visactor/vrender';
4+
import { LineAxis, GroupTransition } from '../../../src';
5+
import render from '../../util/render';
6+
7+
const axis = new LineAxis({
8+
orient: 'left',
9+
hover: true,
10+
line: {
11+
visible: false,
12+
style: {
13+
lineWidth: 1,
14+
stroke: '#D9DDE4',
15+
strokeOpacity: 1
16+
}
17+
},
18+
label: {
19+
style: {
20+
fontSize: 12,
21+
fill: '#BCC1CB',
22+
fontWeight: 400,
23+
fillOpacity: 1,
24+
maxLineWidth: 80,
25+
angle: 0
26+
},
27+
formatMethod: null,
28+
state: null,
29+
visible: true,
30+
space: 0,
31+
autoLimit: false,
32+
flush: true,
33+
containerAlign: 'right',
34+
minGap: 1,
35+
autoHide: false,
36+
autoHideMethod: 'greedy',
37+
autoHideSeparation: 1,
38+
autoRotate: false,
39+
autoRotateAngle: [0, -45, -90],
40+
lastVisible: true
41+
},
42+
tick: {
43+
visible: false,
44+
length: 4,
45+
inside: false,
46+
style: {
47+
lineWidth: 1,
48+
stroke: '#21252C',
49+
strokeOpacity: 1
50+
},
51+
state: null
52+
},
53+
subTick: {
54+
visible: false,
55+
length: 2,
56+
style: {
57+
lineWidth: 1,
58+
stroke: '#D9DDE4',
59+
strokeOpacity: 1
60+
},
61+
state: null
62+
},
63+
grid: {
64+
type: 'line',
65+
visible: false,
66+
style: {
67+
lineWidth: 1,
68+
stroke: '#E3E5EB',
69+
strokeOpacity: 1,
70+
lineDash: [4, 2]
71+
}
72+
},
73+
subGrid: {
74+
type: 'line',
75+
visible: false,
76+
style: {
77+
lineWidth: 1,
78+
stroke: '#EBEDF2',
79+
strokeOpacity: 1,
80+
lineDash: [4, 4]
81+
}
82+
},
83+
title: {
84+
visible: false,
85+
space: 10,
86+
autoRotate: false,
87+
angle: -1.5707963267948966,
88+
textStyle: {
89+
textAlign: 'center',
90+
textBaseline: 'bottom',
91+
fontSize: 12,
92+
fill: '#606773',
93+
fontWeight: 400,
94+
fillOpacity: 1
95+
},
96+
shape: {},
97+
background: {},
98+
state: {
99+
text: null,
100+
shape: null,
101+
background: null
102+
},
103+
text: 'order_date',
104+
maxWidth: null
105+
},
106+
panel: {
107+
state: null
108+
},
109+
labelHoverOnAxis: {
110+
visible: true
111+
},
112+
x: 140,
113+
y: 0,
114+
start: {
115+
x: 0,
116+
y: 0
117+
},
118+
end: {
119+
x: 0,
120+
y: 427
121+
},
122+
items: [
123+
[
124+
{
125+
id: '2016-01-01',
126+
label: '2016-01-01',
127+
value: 0.1308139534883721,
128+
rawValue: '2016-01-01'
129+
},
130+
{
131+
id: '2017-01-01',
132+
label: '2017-01-01',
133+
value: 0.37693798449612403,
134+
rawValue: '2017-01-01'
135+
},
136+
{
137+
id: '2018-01-01',
138+
label: '2018-01-01',
139+
value: 0.623062015503876,
140+
rawValue: '2018-01-01'
141+
},
142+
{
143+
id: '2019-01-01',
144+
label: '2019-',
145+
value: 0.8691860465116279,
146+
rawValue: '2019-01-01'
147+
}
148+
]
149+
],
150+
verticalLimitSize: 66,
151+
verticalMinSize: 66,
152+
verticalFactor: 1
153+
});
154+
window.axis = axis;
155+
debugger;
156+
setTimeout(() => {
157+
axis.showLabelHoverOnAxis(390, '2016-01-01');
158+
}, 100);
159+
render([axis], 'main');

‎packages/vrender-components/__tests__/browser/examples/axis-overlap.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,11 @@ const axisBottom = new LineAxis({
5757
// angle: Math.PI * 0.5
5858
// }
5959
},
60+
labelHoverOnAxis: {
61+
visible: true,
62+
position: 150,
63+
text: 'BBBBBBBBBBBBBB'
64+
},
6065
orient: 'bottom',
6166
verticalLimitSize: 100
6267
});

‎packages/vrender-components/__tests__/browser/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<title>Vite App</title>
99
<style>
1010
#container {
11-
padding: 20px 0 30px;
11+
/* padding: 20px 0 30px; */
1212
}
1313

1414
canvas#main {

‎packages/vrender-components/__tests__/browser/main.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,14 @@ const specs = [
3434
path: 'axis-interaction',
3535
name: '轴交互'
3636
},
37+
{
38+
path: 'axis-hoverOn-label-bottom',
39+
name: '轴hoverOn-bottom'
40+
},
41+
{
42+
path: 'axis-hoverOn-label-left',
43+
name: '轴hoverOn-left'
44+
},
3745
{
3846
path: 'cartesian-axis-label-align',
3947
name: '轴标签整体对齐'

0 commit comments

Comments
 (0)