VisActor · xile611 · Mar 23, 2026 · Mar 19, 2026 · Mar 19, 2026 · Mar 19, 2026
diff --git a/examples/src/circle-packing.ts b/examples/src/circle-packing.ts
@@ -306,89 +306,81 @@ export const circlePackingExamples: { name: string; schema: CirclePackingChartSc
     schema: {
       chartType: 'circlePacking',
       title: {
-        text: '全球大宗商品流向占比：圆圈图',
-        position: 'center',
-      },
-      footnote: {
-        text: '数据来源：示例数据（仅用于可视化展示）',
+        text: '全球商品运输份额（%）',
+        subtext: 'Share of Global Commodity Flows (%)',
+        position: 'left',
       },
       data: [
         {
-          trade: 'Crude oil',
-          share: 38,
+          name: 'Crude oil',
+          value: 38,
         },
         {
-          trade: 'Liquefied petroleum gas',
-          share: 29,
+          name: 'Liquefied petroleum gas',
+          value: 29,
         },
         {
-          trade: 'Liquefied natural gas',
-          share: 19,
+          name: 'Liquefied natural gas',
+          value: 19,
         },
         {
-          trade: 'Refined oil products',
-          share: 19,
+          name: 'Refined oil products',
+          value: 19,
         },
         {
-          trade: 'Chemicals, including fertilizers',
-          share: 13,
+          name: 'Chemicals, including fertilizers',
+          value: 13,
         },
         {
-          trade: 'Container',
-          share: 2.8,
+          name: 'Container',
+          value: 2.8,
         },
         {
-          trade: 'Dry bulk, including grains',
-          share: 2.4,
+          name: 'Dry bulk, including grains',
+          value: 2.4,
         },
       ],
-      width: 1200,
-      height: 800,
+      categoryField: 'name',
+      valueField: 'value',
+      width: 1920,
+      height: 1080,
       background: {
-        image:
-          'https://images.pexels.com/photos/26771257/pexels-photo-26771257.jpeg?w=1920&h=1080&fit=crop',
+        image: './bg-commodity-circle-packing.jpg',
+        opacity: 0.5,
       },
-      theme: 'light',
-      categoryField: 'trade',
-      valueField: 'share',
+      colors: ['#EA580C', '#0284C7', '#0EA5E9', '#FB923C', '#A855F7', '#64748B', '#22C55E'],
       legend: {
         visible: true,
         position: 'right',
       },
       circle: {
-        padding: 5,
-        strokeWidth: 2,
-        strokeColor: 'rgba(255,255,255,0.3)',
-        fillOpacity: 0.8,
+        padding: 8,
+        strokeWidth: 1.5,
+        strokeColor: 'rgba(15,23,42,0.15)',
+        fillOpacity: 0.95,
       },
       label: {
         visible: true,
-        layout: 'default',
-        format: '{name}\n{value}%',
-        showPercent: false,
-        minVisible: 12,
-      },
-      rank: {
-        visible: false,
+        format: '{name}: {value}%',
+        minVisible: 24,
       },
       icon: {
+        field: 'name',
+        map: {
+          'Crude oil': './icon-crude-oil.svg',
+          'Liquefied petroleum gas': './icon-lpg.svg',
+          'Liquefied natural gas': './icon-lng.svg',
+          'Refined oil products': './icon-refined-oil.svg',
+          'Chemicals, including fertilizers': './icon-chemicals.svg',
+          Container: './icon-container.svg',
+          'Dry bulk, including grains': './icon-dry-bulk.svg',
+        },
         visible: true,
-        field: 'trade',
-        size: 22,
         position: 'top-left',
+        size: 28,
         offset: 4,
         style: {
-          lineWidth: 1,
-          stroke: 'rgba(15,23,42,0.8)',
-        },
-        map: {
-          'Crude oil': 'https://api.iconify.design/mdi/oil-barrel.svg',
-          'Liquefied petroleum gas': 'https://api.iconify.design/mdi/gas-cylinder.svg',
-          'Liquefied natural gas': 'https://api.iconify.design/mdi/gas.svg',
-          'Refined oil products': 'https://api.iconify.design/mdi/gas-station.svg',
-          'Chemicals, including fertilizers': 'https://api.iconify.design/mdi/flask.svg',
-          Container: 'https://api.iconify.design/mdi/cargo-ship.svg',
-          'Dry bulk, including grains': 'https://api.iconify.design/mdi/wheat.svg',
+          lineWidth: 0,
         },
       },
     },

diff --git a/examples/src/treemap.ts b/examples/src/treemap.ts
@@ -717,90 +717,90 @@ export const treemapExamples: { name: string; schema: TreemapChartSchema }[] = [
     schema: {
       chartType: 'treemap',
       title: {
-        text: '各国跨境外汇总额（矩阵树图）',
+        text: '各国跨境外汇总量（单位：十亿美元）',
         position: 'center',
-        subtext: '单位：$ 十亿美元（billions）｜数据来源：用户提供',
       },
-      width: 1600,
-      height: 900,
+      width: 1000,
+      height: 700,
       data: [
         {
-          name: '英国',
-          value: 957,
+          Country: 'UK',
+          'Cross-Border FX Total ($ billions)': 957,
           iconKey: 'United Kingdom',
         },
         {
-          name: '美国',
-          value: 653,
+          Country: 'U.S.',
+          'Cross-Border FX Total ($ billions)': 653,
           iconKey: 'United States',
         },
         {
-          name: '新加坡',
-          value: 336,
+          Country: 'Singapore',
+          'Cross-Border FX Total ($ billions)': 336,
           iconKey: 'Singapore',
         },
         {
-          name: '其他地区',
-          value: 154,
-          iconKey: 'Other',
-        },
-        {
-          name: '中国香港',
-          value: 149,
+          Country: 'Hong Kong',
+          'Cross-Border FX Total ($ billions)': 149,
           iconKey: 'Hong Kong',
         },
         {
-          name: '瑞士',
-          value: 85,
+          Country: 'Switzerland',
+          'Cross-Border FX Total ($ billions)': 85,
           iconKey: 'Switzerland',
         },
         {
-          name: '德国',
-          value: 74,
+          Country: 'Germany',
+          'Cross-Border FX Total ($ billions)': 74,
           iconKey: 'Germany',
         },
         {
-          name: '日本',
-          value: 71,
+          Country: 'Japan',
+          'Cross-Border FX Total ($ billions)': 71,
           iconKey: 'Japan',
         },
         {
-          name: '澳洲',
-          value: 40,
+          Country: 'Australia',
+          'Cross-Border FX Total ($ billions)': 40,
           iconKey: 'Australia',
         },
         {
-          name: '法国',
-          value: 27,
+          Country: 'France',
+          'Cross-Border FX Total ($ billions)': 27,
           iconKey: 'France',
         },
         {
-          name: '加拿大',
-          value: 24,
+          Country: 'Canada',
+          'Cross-Border FX Total ($ billions)': 24,
           iconKey: 'Canada',
         },
+        {
+          Country: 'Other',
+          'Cross-Border FX Total ($ billions)': 154,
+        },
       ],
-      categoryField: 'name',
-      valueField: 'value',
+      categoryField: 'Country',
+      valueField: 'Cross-Border FX Total ($ billions)',
       background: {
-        color: '#FFFFFF',
+        color: '#0F172A',
       },
-      colors: [
-        '#0B4F6C',
-        '#145DA0',
-        '#007C92',
-        '#1F7A8C',
-        '#2391A8',
-        '#27AABF',
-        '#2FC2CF',
-        '#39D8D6',
-        '#65DADB',
-        '#8DE0DF',
-        '#B5E6E4',
-      ],
-      legend: {
-        visible: false,
-        position: 'bottom',
+      customizedTheme: {
+        type: 'dark',
+        backgroundColor: '#0F172A',
+        colors: [
+          '#0EA5E9',
+          '#6366F1',
+          '#22C55E',
+          '#F97316',
+          '#EC4899',
+          '#FACC15',
+          '#14B8A6',
+          '#8B5CF6',
+          '#F59E0B',
+          '#06B6D4',
+          '#E11D48',
+        ],
+        textColor: '#F9FAFB',
+        secondaryTextColor: '#94A3B8',
       },
       node: {
         gap: 2,
@@ -810,13 +810,9 @@ export const treemapExamples: { name: string; schema: TreemapChartSchema }[] = [
       rank: {
         visible: true,
         position: 'top-left',
-        style: {
-          fontSize: 18,
-          fill: '#FFFFFF',
-          fontWeight: 700,
-        },
       },
       icon: {
+        visible: true,
         field: 'iconKey',
         map: {
           'United Kingdom': 'https://api.iconify.design/twemoji/flag-united-kingdom.svg',
@@ -829,28 +825,25 @@ export const treemapExamples: { name: string; schema: TreemapChartSchema }[] = [
           Australia: 'https://api.iconify.design/twemoji/flag-australia.svg',
           France: 'https://api.iconify.design/twemoji/flag-france.svg',
           Canada: 'https://api.iconify.design/twemoji/flag-canada.svg',
-          Other: 'https://api.iconify.design/twemoji/world-map.svg',
         },
-        visible: true,
         position: 'top-right',
-        size: 26,
-        offset: 4,
-        style: {
-          lineWidth: 1,
-          stroke: 'rgba(255,255,255,0.9)',
-        },
+        size: 16,
       },
       label: {
         visible: true,
         format: '{name}\n{value}',
         showPercent: true,
-        minVisible: 90,
+        minVisible: 30,
       },
-      footnote: {
-        text: '单位：$ 十亿美元（billions）｜数据来源：用户提供',
-        layout: 'left',
-        fontSize: 12,
-        fill: '#64748B',
+      nodeBackground: {
+        visible: true,
+        field: 'Country',
+        map: {
+          UK: 'https://images.unsplash.com/photo-1735989647938-056f5a438ef6',
+          'U.S.': 'https://images.unsplash.com/photo-1729089264257-adc4f9c9d256',
+          Singapore: 'https://images.unsplash.com/photo-1722704656660-6c6be0b90eec',
+        },
+        opacity: 0.3,
       },
     },
   },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vinfo-graphics",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "A simplified, LLM-friendly chart library for infographics based on VChart",
   "main": "cjs/index.js",
   "module": "esm/index.js",

diff --git a/src/converters/circle-packing.ts b/src/converters/circle-packing.ts
@@ -56,7 +56,7 @@ export class CirclePackingChartConverter extends BaseConverter<CirclePackingChar
     }
 
     // 排名标签（仅单层模式有效）
-    if (!schema.groupField && schema.rank?.visible !== false) {
+    if (!schema.groupField && schema.rank && schema.rank.visible !== false) {
       this.processRank(schema, spec);
     }
 

diff --git a/src/converters/treemap.ts b/src/converters/treemap.ts
@@ -421,7 +421,7 @@ export class TreemapChartConverter extends BaseConverter<TreemapChartSchema> {
 
     // 背景图需要在底层，使用 unshift 添加到数组开头
     (spec.extensionMark as Record<string, unknown>[]).unshift({
-      type: 'image',
+      type: 'rect',
       dataIndex: 0,
       style: {
         visible: (datum: any) => {
@@ -449,12 +449,17 @@ export class TreemapChartConverter extends BaseConverter<TreemapChartSchema> {
           const bounds = this.getNodeBounds(datum, ctx);
           return bounds ? bounds.height : 0;
         },
-        image: (datum: any) => {
+        fill: 'transparent',
+        background: (datum: any) => {
           const originalDatum = datum.datum[datum.datum.length - 1];
           const bgKey = String(originalDatum[schema.nodeBackground!.field!] ?? '');
           return schema.nodeBackground!.map![bgKey] ?? '';
         },
+        backgroundKeepAspectRatio: true,
+        // backgroundFit: false,
+
         cornerRadius: schema.node?.cornerRadius ?? 0,
+        backgroundCornerRadius: schema.node?.cornerRadius ?? 0,
         opacity,
       },
     });

diff --git a/src/index.ts b/src/index.ts
@@ -29,7 +29,7 @@
  */
 
 // 版本号（与 package.json 保持一致）
-export const VINFO_GRAPHICS_VERSION = '0.0.8';
+export const VINFO_GRAPHICS_VERSION = '0.0.10';
 
 // 类型导出
 export type {

diff --git a/src/types/chart/bar/rank.ts b/src/types/chart/bar/rank.ts
@@ -12,7 +12,10 @@ export type BarRankConfig = {
   style?: {
     /** 字体大小 */
     fontSize?: number;
-    /** 字体颜色 */
+    /**
+     * 字体颜色
+     * 注意：当 position 为 'yAxis' 时，背景色和柱子的颜色默认一致，字体的颜色需要考虑能够在柱子上保持分辨度
+     */
     fill?: string;
     /** 字体粗细 */
     fontWeight?: number | string;