Skip to content

Commit ea0f675

Browse files
lxfu1lxfu1
authored
docs: 补充四象限气泡图 (#1960)
* docs: 补充四象限气泡图 * docs: demo完善 * docs: 调整透明度
1 parent 909665a commit ea0f675

File tree

2 files changed

+335
-0
lines changed

2 files changed

+335
-0
lines changed

‎examples/scatter/basic/demo/meta.json

+8
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,14 @@
5151
"en": "Scatter plot custom shape"
5252
},
5353
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*zfwOTZE7KwcAAAAAAAAAAAAAARQnAQ"
54+
},
55+
{
56+
"filename": "quadrant-tooltip.ts",
57+
"title": {
58+
"zh": "散点图-自定义tooltip",
59+
"en": "Scatter custom tooltip"
60+
},
61+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*CvOyT6MoUAQAAAAAAAAAAAAAARQnAQ"
5462
}
5563
]
5664
}

‎examples/scatter/basic/demo/quadrant-tooltip.ts

+327
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
import { Scatter } from '@antv/g2plot';
2+
const data = [
3+
{
4+
city: '上海',
5+
搜索UV: 1.5,
6+
端DAU: 6,
7+
搜索DAU渗透率: 3,
8+
},
9+
{
10+
city: '台北',
11+
搜索UV: 2,
12+
端DAU: 5,
13+
搜索DAU渗透率: 13,
14+
},
15+
{
16+
city: '北京',
17+
搜索UV: 7,
18+
端DAU: 3.6,
19+
搜索DAU渗透率: 16,
20+
},
21+
{
22+
city: '济南',
23+
搜索UV: 5,
24+
端DAU: 5,
25+
搜索DAU渗透率: 16,
26+
},
27+
{
28+
city: '青岛',
29+
搜索UV: 2,
30+
端DAU: 1,
31+
搜索DAU渗透率: 19,
32+
},
33+
{
34+
city: '杭州',
35+
搜索UV: 7,
36+
端DAU: 2,
37+
搜索DAU渗透率: 90,
38+
},
39+
{
40+
city: '广东',
41+
搜索UV: 7.4,
42+
端DAU: 1.5,
43+
搜索DAU渗透率: 30,
44+
},
45+
{
46+
city: '无锡',
47+
搜索UV: 1,
48+
端DAU: 1,
49+
搜索DAU渗透率: 34,
50+
},
51+
{
52+
city: '重庆',
53+
搜索UV: 7,
54+
端DAU: 5,
55+
搜索DAU渗透率: 46,
56+
},
57+
{
58+
city: '成都',
59+
搜索UV: 3.4,
60+
端DAU: 2.3,
61+
搜索DAU渗透率: 49,
62+
},
63+
{
64+
city: '哈尔滨',
65+
搜索UV: 0.5,
66+
端DAU: 6.5,
67+
搜索DAU渗透率: 51,
68+
},
69+
{
70+
city: '内蒙古',
71+
搜索UV: 2.5,
72+
端DAU: 5,
73+
搜索DAU渗透率: 51,
74+
},
75+
{
76+
city: '云南',
77+
搜索UV: 1,
78+
端DAU: 5,
79+
搜索DAU渗透率: 53,
80+
},
81+
{
82+
city: '河北',
83+
搜索UV: 6,
84+
端DAU: 5,
85+
搜索DAU渗透率: 57,
86+
},
87+
{
88+
city: '陕西',
89+
搜索UV: 2,
90+
端DAU: 3,
91+
搜索DAU渗透率: 57,
92+
},
93+
{
94+
city: '苏州',
95+
搜索UV: 3,
96+
端DAU: 4.6,
97+
搜索DAU渗透率: 65,
98+
},
99+
{
100+
city: '四川',
101+
搜索UV: 6,
102+
端DAU: 7,
103+
搜索DAU渗透率: 68,
104+
},
105+
{
106+
city: '贵阳',
107+
搜索UV: 5,
108+
端DAU: 3.4,
109+
搜索DAU渗透率: 68,
110+
},
111+
{
112+
city: '台湾',
113+
搜索UV: 5,
114+
端DAU: 2,
115+
搜索DAU渗透率: 69,
116+
},
117+
{
118+
city: '哈尔滨',
119+
搜索UV: 2,
120+
端DAU: 7,
121+
搜索DAU渗透率: 78,
122+
},
123+
{
124+
city: '天津',
125+
搜索UV: 4.4,
126+
端DAU: 5,
127+
搜索DAU渗透率: 45,
128+
},
129+
{
130+
city: '长沙',
131+
搜索UV: 3.4,
132+
端DAU: 7,
133+
搜索DAU渗透率: 29,
134+
},
135+
{
136+
city: '沧州',
137+
搜索UV: 3,
138+
端DAU: 1,
139+
搜索DAU渗透率: 94,
140+
},
141+
{
142+
city: '宁波',
143+
搜索UV: 6,
144+
端DAU: 3,
145+
搜索DAU渗透率: 99,
146+
},
147+
];
148+
const scatterPlot = new Scatter('container', {
149+
width: 800,
150+
height: 400,
151+
autoFit: false,
152+
appendPadding: 16,
153+
data,
154+
xField: '搜索UV',
155+
yField: '端DAU',
156+
sizeField: '搜索DAU渗透率',
157+
size: [12, 30],
158+
shape: 'circle',
159+
pointStyle: {
160+
fill: '#D6E3FD',
161+
fillOpacity: 0.6,
162+
stroke: '#6d9bf9',
163+
},
164+
tooltip: {
165+
showTitle: true,
166+
showMarkers: false,
167+
fields: ['搜索UV', '端DAU', '搜索DAU渗透率'],
168+
customContent: (title, items) => {
169+
const field = items?.[0];
170+
const formatterInfo = {
171+
搜索UV: (value) => value + '万',
172+
端DAU: (value) => value + '万',
173+
搜索DAU渗透率: () => '%',
174+
};
175+
let htmlStr = `<div style="margin:10px 0;font-weight:700;">${field?.data?.city}</div><div class="g2-tooltip-items">`;
176+
items.forEach((item) => {
177+
htmlStr += `<div class="g2-tooltip-item" style="margin-bottom:8px;display:flex;justify-content:space-between;">
178+
<span class="g2-tooltip-item-label" style="margin-right: 12px;">${item.name}</span>
179+
<span class="g2-tooltip-item-value">${item.value + formatterInfo[item.name](item.value)}</span>
180+
</div>`;
181+
});
182+
htmlStr += '</div>';
183+
return htmlStr;
184+
},
185+
},
186+
xAxis: {
187+
grid: {
188+
line: {
189+
style: {
190+
stroke: '#eee',
191+
},
192+
},
193+
},
194+
label: {
195+
formatter: (v) => (v !== '0' ? v + '%' : v),
196+
},
197+
line: null,
198+
},
199+
label: {
200+
formatter: (item) => {
201+
return item.city;
202+
},
203+
offsetY: 12,
204+
style: {
205+
fontSize: 12,
206+
fill: 'rgba(0,0,0,0.85)',
207+
},
208+
},
209+
yAxis: {
210+
min: 0,
211+
line: null,
212+
label: {
213+
formatter: (v) => (v !== '0' ? v + '%' : v),
214+
},
215+
},
216+
annotations: [
217+
{
218+
type: 'text',
219+
position: [4, 8],
220+
content: '搜索DAU渗透率',
221+
offsetY: -8,
222+
style: {
223+
fontSize: 12,
224+
textAlign: 'center',
225+
},
226+
},
227+
{
228+
type: 'text',
229+
position: [8, 4],
230+
content: '搜索DAU渗透率',
231+
rotate: Math.PI / 2,
232+
offsetY: -40,
233+
offsetX: 8,
234+
style: {
235+
fontSize: 12,
236+
},
237+
},
238+
{
239+
type: 'region',
240+
start: [7, 7],
241+
end: [7.8, 7.8],
242+
top: true,
243+
style: {
244+
fill: '#fff',
245+
fillOpacity: 0.5,
246+
opacity: 1,
247+
},
248+
},
249+
{
250+
type: 'region',
251+
start: [0.2, 7],
252+
end: [1, 7.8],
253+
top: true,
254+
style: {
255+
fill: '#fff',
256+
fillOpacity: 0.5,
257+
opacity: 1,
258+
},
259+
},
260+
{
261+
type: 'region',
262+
start: [7, 0.2],
263+
end: [7.8, 1],
264+
top: true,
265+
style: {
266+
fill: '#fff',
267+
fillOpacity: 0.5,
268+
opacity: 1,
269+
},
270+
},
271+
],
272+
quadrant: {
273+
xBaseline: 4,
274+
yBaseline: 4,
275+
lineStyle: {
276+
lineDash: [4, 2],
277+
lineWidth: 2,
278+
},
279+
regionStyle: [
280+
{
281+
fill: '#5bd8a6',
282+
fillOpacity: 0.1,
283+
},
284+
{
285+
fill: '#667796',
286+
fillOpacity: 0.1,
287+
},
288+
{
289+
fill: '#fff',
290+
},
291+
{
292+
fill: '#f7664e',
293+
fillOpacity: 0.1,
294+
},
295+
],
296+
labels: [
297+
{
298+
content: '热门市场',
299+
position: [7.2, 7],
300+
style: {
301+
fill: 'rgba(0,0,0, 0.85)',
302+
textAlign: 'start',
303+
},
304+
},
305+
{
306+
content: '潜力市场',
307+
position: [0.2, 7],
308+
style: {
309+
fill: 'rgba(0,0,0, 0.85)',
310+
textAlign: 'start',
311+
},
312+
},
313+
{
314+
content: '',
315+
},
316+
{
317+
content: '提频市场',
318+
position: [7.2, 1],
319+
style: {
320+
fill: 'rgba(0,0,0, 0.85)',
321+
textAlign: 'start',
322+
},
323+
},
324+
],
325+
},
326+
});
327+
scatterPlot.render();

0 commit comments

Comments
 (0)