#TreeMap
#Product Sales TreeMap
A tree map showing sales distribution across product categories, sub-categories, and products.
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
chartType: 'treeMap',
dataset: [
{
category: 'Electronics',
subCategory: 'Computers',
product: 'Laptop',
sales: 5000,
},
{
category: 'Electronics',
subCategory: 'Computers',
product: 'Tablet',
sales: 3000,
},
{
category: 'Electronics',
subCategory: 'Computers',
product: 'Desktop',
sales: 4000,
},
{
category: 'Electronics',
subCategory: 'Phones',
product: 'Smartphone',
sales: 8000,
},
{
category: 'Electronics',
subCategory: 'Phones',
product: 'Landline',
sales: 1000,
},
{
category: 'Furniture',
subCategory: 'Seating',
product: 'Office Chair',
sales: 2000,
},
{
category: 'Furniture',
subCategory: 'Seating',
product: 'Sofa',
sales: 3500,
},
{
category: 'Furniture',
subCategory: 'Tables',
product: 'Desk',
sales: 1500,
},
{
category: 'Furniture',
subCategory: 'Tables',
product: 'Coffee Table',
sales: 1200,
},
{
category: 'Office Supplies',
subCategory: 'Paper',
product: 'Printer Paper',
sales: 800,
},
{
category: 'Office Supplies',
subCategory: 'Paper',
product: 'Notebook',
sales: 500,
},
{
category: 'Office Supplies',
subCategory: 'Stationery',
product: 'Pen',
sales: 300,
},
{
category: 'Office Supplies',
subCategory: 'Stationery',
product: 'Stapler',
sales: 200,
},
],
dimensions: [
{
id: 'category',
alias: 'Category',
},
{
id: 'subCategory',
alias: 'SubCategory',
},
{
id: 'product',
alias: 'Product',
},
],
measures: [
{
id: 'sales',
alias: 'Sales',
},
],
}
return <VSeedRender vseed={vseedConfig} />
}#指标组合
展示食品饮料、个护家清等品类的销售额与利润分布，通过矩形嵌套展示层级与指标关系。
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
chartType: 'treeMap',
dataset: [
{
category: '食品饮料',
subCategory: '饮品',
product: '云岭山泉矿泉水',
sales: 12000,
profit: 1800,
},
{
category: '食品饮料',
subCategory: '饮品',
product: '果悦鲜榨橙汁',
sales: 8500,
profit: 1400,
},
{
category: '食品饮料',
subCategory: '饮品',
product: '茗香乌龙茶',
sales: 6200,
profit: 950,
},
{
category: '食品饮料',
subCategory: '零食',
product: '脆乐薯片（番茄味）',
sales: 9500,
profit: 1600,
},
{
category: '食品饮料',
subCategory: '零食',
product: '果仁派对混合坚果',
sales: 7800,
profit: 2100,
},
{
category: '个护家清',
subCategory: '洗护',
product: '柔丝顺滑洗发露',
sales: 6800,
profit: 1100,
},
{
category: '个护家清',
subCategory: '洗护',
product: '净颜氨基酸洁面乳',
sales: 5200,
profit: 980,
},
{
category: '个护家清',
subCategory: '家居清洁',
product: '碧净多效洗衣液',
sales: 7200,
profit: 1050,
},
{
category: '个护家清',
subCategory: '家居清洁',
product: '洁厨灵油污喷雾',
sales: 4300,
profit: 720,
},
{
category: '数码家电',
subCategory: '智能穿戴',
product: '灵动S9智能手表',
sales: 15000,
profit: 3200,
},
{
category: '数码家电',
subCategory: '智能穿戴',
product: '悦跑Pro运动手环',
sales: 6500,
profit: 1400,
},
{
category: '数码家电',
subCategory: '小家电',
product: '暖风巢桌面暖风机',
sales: 4800,
profit: 880,
},
{
category: '数码家电',
subCategory: '小家电',
product: '鲜研磨便携咖啡机',
sales: 11000,
profit: 2600,
},
{
category: '数码家电',
subCategory: '小家电',
product: '净呼吸车载净化器',
sales: 7600,
profit: 1750,
},
{
category: '服饰鞋包',
subCategory: '男装',
product: '风度轻商务夹克',
sales: 8800,
profit: 2400,
},
{
category: '服饰鞋包',
subCategory: '男装',
product: '棉语基础T恤三件装',
sales: 5600,
profit: 1500,
},
{
category: '服饰鞋包',
subCategory: '女装',
product: '花漾碎花连衣裙',
sales: 9200,
profit: 2800,
},
{
category: '服饰鞋包',
subCategory: '女装',
product: '暖织羊绒围巾',
sales: 4100,
profit: 1200,
},
{
category: '服饰鞋包',
subCategory: '鞋靴',
product: '云步缓震跑鞋',
sales: 13500,
profit: 3600,
},
],
dimensions: [
{
id: 'category',
alias: '品类',
encoding: 'hierarchy',
},
{
id: 'subCategory',
alias: '子品类',
encoding: 'hierarchy',
},
{
id: 'product',
alias: '商品',
encoding: 'hierarchy',
},
{
id: '__MeaId__',
alias: '指标名称',
encoding: 'hierarchy',
},
],
measures: [
{
id: 'sales',
alias: '销售额（元）',
encoding: 'size',
parentId: 'a',
},
{
id: 'profit',
alias: '利润（元）',
encoding: 'size',
parentId: 'b',
},
],
}
return <VSeedRender vseed={vseedConfig} />
}#Global Retail Revenue Landscape With Encoding Visualize
Sales and profit distribution of a global retail chain across 4 regions (Asia Pacific, North America, Europe, Latin America), 3 channels (Online, Retail Store, Wholesale), and 3 product categories (Personal Care, Home Appliance, Food & Beverage), enabling multi-dimensional drill-down analysis via TreeMap.
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
chartType: 'treeMap',
dimensions: [
{
id: 'channel',
alias: 'Channel',
encoding: 'column',
},
{
id: '__MeaId__',
encoding: 'hierarchy',
},
{
id: 'region',
alias: 'Region',
encoding: 'hierarchy',
},
{
id: 'category',
alias: 'Category',
encoding: 'hierarchy',
},
{
id: 'product',
alias: 'Product',
encoding: 'hierarchy',
},
],
measures: [
{
id: 'sales',
alias: 'Sales',
encoding: 'size',
},
{
id: 'profit',
alias: 'Profit',
encoding: 'size',
},
],
dataset: [
{
region: 'Asia Pacific',
channel: 'Online',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 12400,
profit: 3720,
},
{
region: 'Asia Pacific',
channel: 'Online',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 9800,
profit: 2450,
},
{
region: 'Asia Pacific',
channel: 'Online',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 18500,
profit: 5550,
},
{
region: 'Asia Pacific',
channel: 'Online',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 14200,
profit: 3550,
},
{
region: 'Asia Pacific',
channel: 'Online',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 7600,
profit: 3040,
},
{
region: 'Asia Pacific',
channel: 'Online',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 5400,
profit: 1890,
},
{
region: 'Asia Pacific',
channel: 'Retail Store',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 8600,
profit: 2150,
},
{
region: 'Asia Pacific',
channel: 'Retail Store',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 7200,
profit: 1800,
},
{
region: 'Asia Pacific',
channel: 'Retail Store',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 11300,
profit: 2825,
},
{
region: 'Asia Pacific',
channel: 'Retail Store',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 9700,
profit: 2425,
},
{
region: 'Asia Pacific',
channel: 'Retail Store',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 6100,
profit: 2440,
},
{
region: 'Asia Pacific',
channel: 'Retail Store',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 4300,
profit: 1505,
},
{
region: 'Asia Pacific',
channel: 'Wholesale',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 15800,
profit: 3160,
},
{
region: 'Asia Pacific',
channel: 'Wholesale',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 12600,
profit: 2520,
},
{
region: 'Asia Pacific',
channel: 'Wholesale',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 22400,
profit: 4480,
},
{
region: 'Asia Pacific',
channel: 'Wholesale',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 17500,
profit: 3500,
},
{
region: 'Asia Pacific',
channel: 'Wholesale',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 9800,
profit: 2940,
},
{
region: 'Asia Pacific',
channel: 'Wholesale',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 7200,
profit: 2160,
},
{
region: 'North America',
channel: 'Online',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 14200,
profit: 4260,
},
{
region: 'North America',
channel: 'Online',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 11500,
profit: 2875,
},
{
region: 'North America',
channel: 'Online',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 21300,
profit: 6390,
},
{
region: 'North America',
channel: 'Online',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 16800,
profit: 4200,
},
{
region: 'North America',
channel: 'Online',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 9200,
profit: 3680,
},
{
region: 'North America',
channel: 'Online',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 6800,
profit: 2380,
},
{
region: 'North America',
channel: 'Retail Store',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 10800,
profit: 2700,
},
{
region: 'North America',
channel: 'Retail Store',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 8900,
profit: 2225,
},
{
region: 'North America',
channel: 'Retail Store',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 14600,
profit: 3650,
},
{
region: 'North America',
channel: 'Retail Store',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 12100,
profit: 3025,
},
{
region: 'North America',
channel: 'Retail Store',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 7400,
profit: 2960,
},
{
region: 'North America',
channel: 'Retail Store',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 5100,
profit: 1785,
},
{
region: 'North America',
channel: 'Wholesale',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 18200,
profit: 3640,
},
{
region: 'North America',
channel: 'Wholesale',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 14800,
profit: 2960,
},
{
region: 'North America',
channel: 'Wholesale',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 26500,
profit: 5300,
},
{
region: 'North America',
channel: 'Wholesale',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 20300,
profit: 4060,
},
{
region: 'North America',
channel: 'Wholesale',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 11600,
profit: 3480,
},
{
region: 'North America',
channel: 'Wholesale',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 8500,
profit: 2550,
},
{
region: 'Europe',
channel: 'Online',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 10600,
profit: 3180,
},
{
region: 'Europe',
channel: 'Online',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 8400,
profit: 2100,
},
{
region: 'Europe',
channel: 'Online',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 15900,
profit: 4770,
},
{
region: 'Europe',
channel: 'Online',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 12500,
profit: 3125,
},
{
region: 'Europe',
channel: 'Online',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 8800,
profit: 3520,
},
{
region: 'Europe',
channel: 'Online',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 4900,
profit: 1715,
},
{
region: 'Europe',
channel: 'Retail Store',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 7800,
profit: 1950,
},
{
region: 'Europe',
channel: 'Retail Store',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 6500,
profit: 1625,
},
{
region: 'Europe',
channel: 'Retail Store',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 10200,
profit: 2550,
},
{
region: 'Europe',
channel: 'Retail Store',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 8800,
profit: 2200,
},
{
region: 'Europe',
channel: 'Retail Store',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 7100,
profit: 2840,
},
{
region: 'Europe',
channel: 'Retail Store',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 3800,
profit: 1330,
},
{
region: 'Europe',
channel: 'Wholesale',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 13400,
profit: 2680,
},
{
region: 'Europe',
channel: 'Wholesale',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 10900,
profit: 2180,
},
{
region: 'Europe',
channel: 'Wholesale',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 19800,
profit: 3960,
},
{
region: 'Europe',
channel: 'Wholesale',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 15200,
profit: 3040,
},
{
region: 'Europe',
channel: 'Wholesale',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 10500,
profit: 3150,
},
{
region: 'Europe',
channel: 'Wholesale',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 6300,
profit: 1890,
},
{
region: 'Latin America',
channel: 'Online',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 6200,
profit: 1860,
},
{
region: 'Latin America',
channel: 'Online',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 4800,
profit: 1200,
},
{
region: 'Latin America',
channel: 'Online',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 9400,
profit: 2820,
},
{
region: 'Latin America',
channel: 'Online',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 7100,
profit: 1775,
},
{
region: 'Latin America',
channel: 'Online',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 8500,
profit: 3400,
},
{
region: 'Latin America',
channel: 'Online',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 3600,
profit: 1260,
},
{
region: 'Latin America',
channel: 'Retail Store',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 4500,
profit: 1125,
},
{
region: 'Latin America',
channel: 'Retail Store',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 3700,
profit: 925,
},
{
region: 'Latin America',
channel: 'Retail Store',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 6800,
profit: 1700,
},
{
region: 'Latin America',
channel: 'Retail Store',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 5200,
profit: 1300,
},
{
region: 'Latin America',
channel: 'Retail Store',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 6900,
profit: 2760,
},
{
region: 'Latin America',
channel: 'Retail Store',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 2800,
profit: 980,
},
{
region: 'Latin America',
channel: 'Wholesale',
category: 'Personal Care',
product: 'Electric Toothbrush',
sales: 8600,
profit: 1720,
},
{
region: 'Latin America',
channel: 'Wholesale',
category: 'Personal Care',
product: 'Hair Dryer',
sales: 6900,
profit: 1380,
},
{
region: 'Latin America',
channel: 'Wholesale',
category: 'Home Appliance',
product: 'Robot Vacuum',
sales: 12500,
profit: 2500,
},
{
region: 'Latin America',
channel: 'Wholesale',
category: 'Home Appliance',
product: 'Air Purifier',
sales: 9600,
profit: 1920,
},
{
region: 'Latin America',
channel: 'Wholesale',
category: 'Food & Beverage',
product: 'Organic Coffee',
sales: 10200,
profit: 3060,
},
{
region: 'Latin America',
channel: 'Wholesale',
category: 'Food & Beverage',
product: 'Protein Bar',
sales: 5100,
profit: 1530,
},
],
}
return <VSeedRender vseed={vseedConfig} />
}