CirclePacking

Product Sales CirclePacking

A circle packing chart showing sales hierarchy across product categories, sub-categories, and products.

import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "circlePacking",
  "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": "circlePacking",
  "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": "circlePacking",
  "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} />
}