Skip to content

Commit 44700ac

Browse files
author
Echo
committed
docs: add pictogram demo and related docs
1 parent 05a68af commit 44700ac

File tree

1 file changed

+213
-0
lines changed

1 file changed

+213
-0
lines changed

‎docs/assets/examples/zh/pictogram-chart/pictogram-mall.md

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
---
2+
category: examples
3+
group: pictogram chart
4+
title: 商场业态示意图
5+
keywords: pictogramChart, space
6+
order: 26-0
7+
cover: /vchart/preview/pictogram-mall_1.13.0.png
8+
option: pictogramChart
9+
---
10+
11+
# 象形图-商场业态示意图
12+
13+
象形图是一种数据可视化形式，它通过使用图形符号（通常是 SVG 格式）来表示数据中的具体值或类别。这种图表结合了图形艺术和数据分析，使得信息更具视觉吸引力和直观性。
14+
15+
## 关键配置
16+
17+
- 在 SVG 文件中，为图元配置 `name` 属性，则在图表配置中可以通过 `name` 配置指定图元样式；
18+
- 通过 `VChart.registerSVG` 接口来注册 svg 资源；
19+
- `svg` 属性声明为注册的 svg 名称；
20+
- 使用 `tooltip` 配置来实现鼠标悬停时显示名称。
21+
22+
## Code Demo
23+
24+
```javascript livedemo
25+
/** --Add the following code when using in business context-- */
26+
// When using in business context, please additionally import
27+
// import { registerPictogramChart } from '@visactor/vchart';
28+
// registerPictogramChart();
29+
/** --Add the above code when using in business context-- */
30+
VCHART_MODULE.registerPictogramChart();
31+
/** --Delete the above code when using in business context-- */
32+
33+
const response = await fetch('https://raw.githubusercontent.com/EchoChenGithub/pictures/refs/heads/main/mallmap-color2.svg');
34+
const shape = await response.text();
35+
36+
const spec = {
37+
type: 'pictogram',
38+
data: {
39+
id: 'data',
40+
values: [
41+
{ name: 'Starbucks', value: 'food_and_dining' },
42+
{ name: 'Foot Locker', value: 'apparel_and_shoes' },
43+
{ name: 'Dave and Busters', value: 'entertainment' },
44+
{ name: 'Best Buy', value: 'electronics' },
45+
{ name: 'Kay Jewelers', value: 'jewelry' },
46+
{ name: 'Target', value: 'shopping' },
47+
{ name: 'McDonalds', value: 'food_and_dining' },
48+
{ name: 'Nike Store', value: 'apparel_and_shoes' },
49+
{ name: 'AMC Theatres', value: 'entertainment' },
50+
{ name: 'Apple Store', value: 'electronics' },
51+
{ name: 'Tiffany Co', value: 'jewelry' },
52+
{ name: "Macy's", value: 'shopping' },
53+
{ name: 'Chipotle', value: 'food_and_dining' },
54+
{ name: 'Old Navy', value: 'apparel_and_shoes' },
55+
{ name: 'GameStop', value: 'entertainment' },
56+
{ name: 'Samsung Store', value: 'electronics' },
57+
{ name: 'Pandora', value: 'jewelry' },
58+
{ name: 'Walmart', value: 'shopping' },
59+
{ name: 'Subway', value: 'food_and_dining' },
60+
{ name: 'Maintenance', value: 'infrastructure' },
61+
{ name: 'Restroom', value: 'infrastructure' },
62+
{ name: 'Management', value: 'infrastructure' },
63+
{ name: 'Adidas Store', value: 'apparel_and_shoes' },
64+
{ name: 'Round 1', value: 'entertainment' },
65+
{ name: 'HP Store', value: 'electronics' },
66+
{ name: 'Zales Jewelers', value: 'jewelry' },
67+
{ name: 'TJ Maxx', value: 'shopping' },
68+
{ name: 'Pizza Hut', value: 'food_and_dining' },
69+
{ name: 'HM', value: 'apparel_and_shoes' },
70+
{ name: 'Regal Cinemas', value: 'entertainment' },
71+
{ name: 'Microsoft Store', value: 'electronics' },
72+
{ name: 'Jared', value: 'jewelry' },
73+
{ name: "Kohl's", value: 'shopping' },
74+
{ name: 'Panera Bread', value: 'food_and_dining' },
75+
{ name: 'Gap', value: 'apparel_and_shoes' },
76+
{ name: 'Barnes and Noble', value: 'entertainment' },
77+
{ name: 'Radio Shack', value: 'electronics' },
78+
{ name: "Claire's", value: 'jewelry' },
79+
{ name: 'JCPenney Outlet', value: 'shopping' },
80+
{ name: 'Taco Bell', value: 'food_and_dining' },
81+
{ name: 'Express', value: 'apparel_and_shoes' },
82+
{ name: 'Chuck E Cheese', value: 'entertainment' },
83+
{ name: 'GameStop', value: 'electronics' },
84+
{ name: 'Swarovski', value: 'jewelry' },
85+
{ name: 'HomeGoods', value: 'shopping' },
86+
{ name: 'Burger King', value: 'food_and_dining' },
87+
{ name: 'American Eagle', value: 'apparel_and_shoes' },
88+
{ name: 'Sky Zone', value: 'entertainment' },
89+
{ name: 'Verizon', value: 'electronics' },
90+
{ name: 'Sephora', value: 'jewelry' },
91+
{ name: 'Best Buy Mobile', value: 'shopping' },
92+
{ name: 'Five Guys', value: 'food_and_dining' },
93+
{ name: "Levi's", value: 'apparel_and_shoes' },
94+
{ name: 'Arcade', value: 'entertainment' },
95+
{ name: 'GameStop', value: 'electronics' },
96+
{ name: 'Helzberg Diamonds', value: 'jewelry' },
97+
{ name: 'Marshalls', value: 'shopping' },
98+
{ name: 'Chick-fil-A', value: 'food_and_dining' },
99+
{ name: 'Banana Republic', value: 'apparel_and_shoes' },
100+
{ name: 'Main Event', value: 'entertainment' },
101+
{ name: 'Frys Electronics', value: 'electronics' },
102+
{ name: 'JCPenney Jewelers', value: 'jewelry' },
103+
{ name: 'Burlington', value: 'shopping' },
104+
{ name: 'Dunkin Donuts', value: 'food_and_dining' },
105+
{ name: 'Forever 21', value: 'shopping' },
106+
{ name: 'Mall Kiosk 1', value: 'shopping' },
107+
{ name: 'Mall Kiosk 2', value: 'food_and_dining' },
108+
{ name: 'Mall Kiosk 3', value: 'apparel_and_shoes' },
109+
{ name: 'Mall Kiosk 4', value: 'entertainment' },
110+
{ name: 'Mall Kiosk 5', value: 'electronics' },
111+
{ name: 'Mall Kiosk 6', value: 'jewelry' },
112+
{ name: 'Mall Kiosk 7', value: 'shopping' },
113+
{ name: 'JCPenney', value: 'apparel_and_shoes' },
114+
{ name: 'Belk', value: 'apparel_and_shoes' },
115+
{ name: 'Bealls', value: 'apparel_and_shoes' },
116+
{ name: 'Kmart', value: 'shopping' },
117+
{ name: 'AMC Theatres', value: 'entertainment' },
118+
{ name: 'Sears', value: 'shopping' }
119+
]
120+
},
121+
color: {
122+
specified: {
123+
food_and_dining: '#A52A2A', // 棕红色 (Brown Red)
124+
apparel_and_shoes: '#228B22', // 森林绿 (Forest Green)
125+
entertainment: '#4682B4', // 钢青色 (Steel Blue)
126+
jewelry: '#9400D3', // 深紫罗兰 (Dark Violet)
127+
electronics: '#DAA520', // 金麒麟色 (Goldenrod)
128+
shopping: '#008B8B', // 深青色 (Dark Cyan)
129+
infrastructure: '#556B2F', // 暗橄榄绿 (Dark Olive Green)
130+
undefined: 'white',
131+
},
132+
field: 'value'
133+
},
134+
seriesField: 'value',
135+
nameField: 'name',
136+
svg: 'mall',
137+
pictogram: {
138+
style: {
139+
fill: {
140+
scale: 'color',
141+
field: 'value'
142+
}
143+
},
144+
state: {
145+
legend_hover_reverse: {
146+
fill: '#ccc',
147+
}
148+
}
149+
},
150+
151+
title: {
152+
text: 'Shopping Mall Tenant Layout'
153+
},
154+
legends: [
155+
{
156+
orient: 'top',
157+
position: 'middle',
158+
padding: {
159+
bottom: 12
160+
},
161+
visible: true,
162+
field: 'value',
163+
filter: false,
164+
select: false,
165+
166+
data: items => {
167+
return items.map(item => {
168+
item.shape.outerBorder = {
169+
stroke: item.shape.fill,
170+
distance: 2,
171+
lineWidth: 1
172+
};
173+
174+
return item;
175+
});
176+
},
177+
}
178+
],
179+
180+
};
181+
182+
VChart.registerSVG('mall', shape);
183+
184+
const vchart = new VChart(spec, { dom: CONTAINER_ID });
185+
186+
vchart.on('legendItemHover', e => {
187+
const hoveredName = e?.value?.data?.label;
188+
if (hoveredName) {
189+
vchart.updateState({
190+
legend_hover_reverse: {
191+
filter: d => {
192+
// True - Grey
193+
return d.data?.value && d.data.value !== hoveredName;
194+
}
195+
}
196+
});
197+
}
198+
});
199+
vchart.on('legendItemUnHover', e => {
200+
vchart.updateState({
201+
legend_hover_reverse: {
202+
filter: d => false
203+
}
204+
});
205+
});
206+
207+
vchart.renderSync();
208+
209+
```
210+
211+
## Related Tutorials
212+
213+
[PictogramChart](link)

0 commit comments

Comments
 (0)