diff --git a/packages/vchart-theme/src/chart-hub/common/color-scheme.ts b/packages/vchart-theme/src/chart-hub/common/color-scheme.ts
new file mode 100644
index 0000000..42ffacd
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/color-scheme.ts
@@ -0,0 +1,69 @@
+import type { BuiltinColorPalette, IThemeColorScheme } from '@visactor/vchart';
+
+const defaultColor = [
+  // 定义分类主题色
+  '#1443FF',
+  '#33CCB2',
+  '#FFD500',
+  '#FFAA33',
+  '#FF7733',
+  '#F65656',
+  '#E93DBD',
+  '#9933FF',
+  '#5533FF',
+  '#A3ABC2'
+];
+
+const BLACK_COLORS = {
+  100: '#000',
+  95: '#0D0D0D',
+  85: '#262626',
+  65: '#595959',
+  45: '#8C8C8C',
+  25: '#BFBFBF',
+  15: '#D9D9D9',
+  6: '#F0F0F0'
+};
+
+const WHITE_COLORS = {
+  100: '#FFFFFF',
+  95: '#F2F2F2',
+  85: '#D9D9D9',
+  65: '#A6A6A6',
+  45: '#737373',
+  25: '#404040',
+  15: '#262626',
+  6: '#0F0F0F'
+};
+
+const blackColorPalettes = {};
+for (const key in BLACK_COLORS) {
+  blackColorPalettes[`blackColors${key}`] = BLACK_COLORS[key];
+}
+
+const whiteColorPalettes = {};
+for (const key in WHITE_COLORS) {
+  whiteColorPalettes[`whiteColors${key}`] = WHITE_COLORS[key];
+}
+
+export const colorScheme: IThemeColorScheme = {
+  default: {
+    dataScheme: defaultColor,
+    palette: {
+      bandColor: defaultColor[0],
+
+      /** 背景色 */
+      backgroundColor: 'transparent',
+
+      /** 轴线颜色 */
+      axisDomainColor: '#DCDEE1',
+      /** 轴标签字色 */
+      axisLabelFontColor: '#909199',
+      /** 轴网格线颜色 */
+      axisGridColor: '#E1E2E5',
+
+      ...blackColorPalettes,
+      ...whiteColorPalettes
+    } as Partial<BuiltinColorPalette>
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/component/axis.ts b/packages/vchart-theme/src/chart-hub/common/component/axis.ts
new file mode 100644
index 0000000..d9898ef
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/component/axis.ts
@@ -0,0 +1,65 @@
+import type { IComponentTheme } from '@visactor/vchart';
+
+export const axis: Pick<
+  IComponentTheme,
+  'axis' | 'axisAngle' | 'axisBand' | 'axisLinear' | 'axisRadius' | 'axisX' | 'axisY'
+> = {
+  axis: {
+    domainLine: {
+      visible: true,
+      style: {
+        lineWidth: 1,
+        stroke: { type: 'palette', key: 'axisDomainColor' }
+      }
+    },
+    grid: {
+      visible: true,
+      style: {
+        lineWidth: 1,
+        stroke: { type: 'palette', key: 'axisGridColor' },
+        lineDash: [4, 4]
+      }
+    },
+    subGrid: {
+      visible: false,
+      style: {
+        lineWidth: 1,
+        stroke: { type: 'palette', key: 'axisGridColor' },
+        lineDash: [4, 4]
+      }
+    },
+    tick: {
+      visible: true,
+      style: {
+        lineWidth: 1,
+        stroke: { type: 'palette', key: 'blackColors25' }
+      }
+    },
+    subTick: {
+      visible: false,
+      tickSize: 2,
+      style: {
+        lineWidth: 1,
+        stroke: { type: 'palette', key: 'blackColors15' }
+      }
+    },
+    label: {
+      visible: true,
+      space: 8,
+      style: {
+        fontSize: 12,
+        fill: { type: 'palette', key: 'blackColors45' },
+        fontWeight: 400,
+        fillOpacity: 1
+      }
+    },
+    title: {
+      visible: false,
+      style: {
+        fill: { type: 'palette', key: 'blackColors65' },
+        fontSize: 12,
+        lineHeight: 12
+      }
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/component/crosshair.ts b/packages/vchart-theme/src/chart-hub/common/component/crosshair.ts
new file mode 100644
index 0000000..1f11492
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/component/crosshair.ts
@@ -0,0 +1,33 @@
+import type { ICrosshairTheme } from '@visactor/vchart';
+
+export const crosshair: ICrosshairTheme = {
+  trigger: 'hover',
+  bandField: {
+    line: {
+      type: 'rect',
+      visible: true,
+      style: {
+        fill: '#CCD7EB',
+        fillOpacity: 0.4,
+        lineDash: []
+      }
+    },
+    label: {
+      visible: false
+    }
+  },
+  linearField: {
+    visible: false,
+    line: {
+      type: 'line',
+      style: {
+        stroke: '#CCD7EB',
+        lineWidth: 0.4,
+        lineDash: []
+      }
+    },
+    label: {
+      visible: false
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/component/data-zoom.ts b/packages/vchart-theme/src/chart-hub/common/component/data-zoom.ts
new file mode 100644
index 0000000..ebc379f
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/component/data-zoom.ts
@@ -0,0 +1,58 @@
+import type { IDataZoomTheme } from '@visactor/vchart-types';
+
+export const dataZoom: IDataZoomTheme = {
+  height: 44,
+  middleHandler: {
+    visible: false
+  },
+  startHandler: {
+    style: {
+      size: 22
+    }
+  },
+  selectedBackground: {
+    style: {
+      fill: '#6699FF',
+      fillOpacity: 0.2,
+      opacity: 1,
+      stroke: '#6699FF',
+      lineWidth: 2,
+      cornerRadius: 4
+    }
+  },
+  background: {
+    style: {
+      fill: '#F3F4F6',
+      fillOpacity: 0.2,
+      cornerRadius: 4,
+      stroke: '#EDEEF0',
+      opacity: 1,
+      lineWidth: 2
+    }
+  },
+  endHandler: {
+    style: {
+      size: 22
+    }
+  },
+  backgroundChart: {
+    area: {
+      style: {
+        fill: false,
+        stroke: '#6699FF'
+      }
+    },
+    line: {
+      style: {
+        fill: false,
+        stroke: '#6699FF'
+      }
+    }
+  },
+  startText: {
+    visible: false
+  },
+  endText: {
+    visible: false
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/component/indicator.ts b/packages/vchart-theme/src/chart-hub/common/component/indicator.ts
new file mode 100644
index 0000000..97b084e
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/component/indicator.ts
@@ -0,0 +1,20 @@
+import type { IIndicatorTheme } from '@visactor/vchart';
+
+export const indicator: IIndicatorTheme = {
+  title: {
+    visible: true,
+    style: {
+      fill: '#12141A',
+      fontWeight: 500,
+      fontSize: 16
+    }
+  },
+  content: {
+    visible: true,
+    style: {
+      fill: '#85878A',
+      fontWeight: 400,
+      fontSize: 12
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/component/legend.ts b/packages/vchart-theme/src/chart-hub/common/component/legend.ts
new file mode 100644
index 0000000..802f34b
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/component/legend.ts
@@ -0,0 +1,131 @@
+import type { IComponentTheme } from '@visactor/vchart';
+
+const commonColorLegendTheme = {
+  handlerText: {
+    space: 10,
+    style: {
+      fontSize: 12,
+      fill: '#2C3542'
+    }
+  },
+  title: {
+    space: 5,
+    style: {
+      fontSize: 12,
+      fill: '#2C3542'
+    }
+  }
+};
+
+export const legend: Partial<IComponentTheme> = {
+  discreteLegend: {
+    visible: true,
+    orient: 'top',
+    padding: [8, 8, 8, 8],
+    maxRow: 1,
+    title: {
+      visible: false,
+      textStyle: {
+        fill: { type: 'palette', key: 'blackColors45' },
+        fontSize: 12,
+        lineHeight: 21
+      }
+    },
+    item: {
+      visible: true,
+      spaceCol: 24,
+      spaceRow: 12,
+      padding: 0,
+      background: {
+        visible: false
+      },
+      shape: {
+        space: 4,
+        style: {
+          size: 8,
+          symbolType: 'circle'
+        },
+        state: { unSelected: { fill: '#D8D8D8' } }
+      },
+      label: {
+        space: 100,
+        style: {
+          fill: '#85878A',
+          fontSize: 12,
+          lineHeight: 12,
+          opacity: 1,
+          fontWeight: 400
+        },
+        state: {
+          unSelected: {
+            fill: '#D8D8D8',
+            opacity: 1
+          }
+        }
+      }
+    },
+    pager: {
+      handler: {
+        space: 8,
+        style: {
+          size: 10,
+          fill: {
+            type: 'palette',
+            key: 'blackColors100'
+          }
+        }
+      },
+      textStyle: {
+        fill: { type: 'palette', key: 'blackColors45' },
+        fontSize: 10
+      }
+    },
+    allowAllCanceled: false
+  },
+  colorLegend: {
+    horizontal: {
+      ...commonColorLegendTheme,
+      handler: {
+        style: {
+          symbolType: 'rectRound',
+          size: 16,
+          scaleX: 0.5,
+          fill: '#fff',
+          lineWidth: 1,
+          stroke: '#99B0F3',
+          radius: 2,
+          outerBorder: null
+        }
+      },
+      rail: {
+        height: 4,
+        width: 100,
+        style: {
+          fill: '#DCDEE2'
+        }
+      }
+    },
+    vertical: {
+      ...commonColorLegendTheme,
+      handler: {
+        style: {
+          symbolType: 'rectRound',
+          size: 16,
+          scaleY: 0.5,
+          fill: '#fff',
+          lineWidth: 1,
+          stroke: '#99B0F3',
+          radius: 2,
+          outerBorder: null
+        }
+      },
+      rail: {
+        width: 4,
+        height: 100,
+        style: {
+          fill: '#DCDEE2'
+        }
+      }
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/component/mark-area.ts b/packages/vchart-theme/src/chart-hub/common/component/mark-area.ts
new file mode 100644
index 0000000..49117d1
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/component/mark-area.ts
@@ -0,0 +1,18 @@
+import type { IMarkAreaTheme } from '@visactor/vchart';
+
+export const markArea: IMarkAreaTheme = {
+  area: {
+    style: {
+      fill: { type: 'palette', key: 'blackColors100', a: 0.06 }
+    }
+  },
+  label: {
+    style: {
+      fontSize: { type: 'token', key: 'l5FontSize' },
+      fill: { type: 'palette', key: 'blackColors65' }
+    },
+    labelBackground: {
+      visible: false
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/component/mark-line.ts b/packages/vchart-theme/src/chart-hub/common/component/mark-line.ts
new file mode 100644
index 0000000..efcf477
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/component/mark-line.ts
@@ -0,0 +1,29 @@
+import type { IMarkLineTheme } from '@visactor/vchart';
+
+export const markLine: IMarkLineTheme = {
+  line: {
+    style: {
+      lineDash: [],
+      lineWidth: 1,
+      stroke: { type: 'palette', key: 'blackColors25' }
+    }
+  },
+  startSymbol: {
+    visible: false
+  },
+  endSymbol: {
+    visible: false
+  },
+  label: {
+    position: 'insideStartTop',
+    refY: 0,
+    autoRotate: true,
+    style: {
+      fontSize: { type: 'token', key: 'l5FontSize' },
+      fill: { type: 'palette', key: 'blackColors65' }
+    },
+    labelBackground: {
+      visible: false
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/component/mark-point.ts b/packages/vchart-theme/src/chart-hub/common/component/mark-point.ts
new file mode 100644
index 0000000..388af88
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/component/mark-point.ts
@@ -0,0 +1,38 @@
+import type { IMarkPointTheme } from '@visactor/vchart';
+
+export const markPoint: IMarkPointTheme = {
+  itemContent: {
+    // @ts-ignore
+    autoRotate: false, // FIXME: type error
+    offsetY: -16,
+    text: {
+      style: {
+        fontSize: { type: 'token', key: 'l5FontSize' },
+        fill: { type: 'palette', key: 'blackColors65' }
+      }
+    }
+  },
+  itemLine: {
+    decorativeLine: {
+      visible: false
+    },
+    startSymbol: {
+      visible: true,
+      size: 6,
+      style: {
+        fill: '#fff',
+        stroke: { type: 'palette', key: 'bandColor' },
+        lineWidth: 2
+      }
+    },
+    endSymbol: {
+      visible: false
+    },
+    line: {
+      style: {
+        lineWidth: 1,
+        stroke: { type: 'palette', key: 'blackColors25' }
+      }
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/component/polar-axis.ts b/packages/vchart-theme/src/chart-hub/common/component/polar-axis.ts
new file mode 100644
index 0000000..5fdc831
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/component/polar-axis.ts
@@ -0,0 +1,27 @@
+import type { IPolarAxisCommonTheme } from '@visactor/vchart-types';
+
+const axisRadius: IPolarAxisCommonTheme = {
+  domainLine: {},
+  grid: {
+    smooth: false,
+    visible: true
+  },
+  subGrid: {
+    smooth: false
+  }
+};
+
+const axisAngle: IPolarAxisCommonTheme = {
+  grid: {
+    visible: true,
+    smooth: false
+  },
+  label: {
+    space: 4
+  }
+};
+
+export const axisPolar = {
+  axisRadius,
+  axisAngle
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/component/scroll-bar.ts b/packages/vchart-theme/src/chart-hub/common/component/scroll-bar.ts
new file mode 100644
index 0000000..c92c07e
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/component/scroll-bar.ts
@@ -0,0 +1,20 @@
+import type { IScrollBarTheme } from '@visactor/vchart';
+
+export const scrollBar: IScrollBarTheme = {
+  horizontal: {
+    height: 12,
+    slider: {
+      style: {
+        fill: 'rgba(0,0,0,0.15)'
+      }
+    }
+  },
+  vertical: {
+    width: 12,
+    slider: {
+      style: {
+        fill: 'rgba(0,0,0,0.15)'
+      }
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/component/tooltip.ts b/packages/vchart-theme/src/chart-hub/common/component/tooltip.ts
new file mode 100644
index 0000000..cf04faa
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/component/tooltip.ts
@@ -0,0 +1,60 @@
+import type { ITooltipTheme } from '@visactor/vchart';
+
+export const tooltip: ITooltipTheme = {
+  offset: { x: 16, y: 16 },
+  panel: {
+    padding: { top: 12, left: 12, right: 12, bottom: 12 },
+    backgroundColor: {
+      type: 'palette',
+      key: 'popupBackgroundColor'
+    } as any,
+    border: {
+      color: {
+        type: 'palette',
+        key: 'popupBackgroundColor'
+      } as any,
+      width: 0,
+      radius: 3
+    },
+    shadow: {
+      x: 0,
+      y: 0,
+      blur: 10,
+      spread: 0,
+      color: '#aeaeae'
+    }
+  },
+  spaceRow: 12,
+  titleLabel: {
+    fontSize: 12,
+    lineHeight: 12,
+    fontColor: '#1D1D2E',
+    fontWeight: '500',
+    textAlign: 'left',
+    textBaseline: 'middle',
+    spacing: 0
+  },
+  shape: { size: 8, spacing: 8 },
+  keyLabel: {
+    fontSize: 12,
+    lineHeight: 12,
+    fontColor: {
+      type: 'palette',
+      key: 'blackColors65'
+    } as any,
+    textAlign: 'left',
+    textBaseline: 'middle',
+    spacing: 12
+  },
+  valueLabel: {
+    fontSize: 12,
+    lineHeight: 12,
+    fontColor: {
+      type: 'palette',
+      key: 'blackColors65'
+    } as any,
+    fontWeight: 'normal',
+    textBaseline: 'middle',
+    spacing: 0
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/mark.ts b/packages/vchart-theme/src/chart-hub/common/mark.ts
new file mode 100644
index 0000000..13971f2
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/mark.ts
@@ -0,0 +1,11 @@
+import type { IGlobalMarkThemeByName } from '@visactor/vchart';
+
+export const markByName: IGlobalMarkThemeByName = {
+  label: {
+    style: {
+      fontSize: 12,
+      fill: { type: 'palette', key: 'blackColors65' },
+      lineWidth: 0
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/series/area.ts b/packages/vchart-theme/src/chart-hub/common/series/area.ts
new file mode 100644
index 0000000..3e0bdce
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/series/area.ts
@@ -0,0 +1,36 @@
+import type { ISeriesTheme, SeriesTypeEnum, SeriesTypeForThemeEnum } from '@visactor/vchart';
+
+export const area: Pick<
+  ISeriesTheme,
+  SeriesTypeEnum.area | SeriesTypeForThemeEnum.area_vertical | SeriesTypeForThemeEnum.area_horizontal
+> = {
+  area: {
+    point: {
+      style: {
+        visible: false,
+        size: 12,
+        lineWidth: 2,
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowBlur: 3,
+        stroke: { type: 'palette', key: 'whiteColors100' }
+      }
+    },
+    line: {
+      style: {
+        curveType: 'monotone',
+        lineWidth: 2
+      }
+    },
+    area: {
+      style: {
+        fillOpacity: 0.25,
+        lineWidth: 2
+      },
+      state: {
+        selected: {
+          fillOpacity: 0.5
+        }
+      }
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/series/bar.ts b/packages/vchart-theme/src/chart-hub/common/series/bar.ts
new file mode 100644
index 0000000..5be7e16
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/series/bar.ts
@@ -0,0 +1,39 @@
+import type { ISeriesTheme, SeriesTypeEnum, SeriesTypeForThemeEnum } from '@visactor/vchart';
+
+const bar: ISeriesTheme['bar'] = {
+  barWidth: 8,
+  // @ts-ignore
+  barGapInGroup: 4, // FIXME: typeError
+  label: {
+    style: {
+      fill: { type: 'palette', key: 'secondaryFontColor' }
+    }
+  }
+};
+
+const bar_horizontal: ISeriesTheme['bar'] = {
+  // @ts-ignore
+  stackCornerRadius: [0, 1, 1, 0], // FIXME: typeError
+  label: {
+    position: 'right',
+    offset: 4
+  }
+};
+
+const bar_vertical: ISeriesTheme['bar'] = {
+  // @ts-ignore
+  stackCornerRadius: [1, 1, 0, 0], // FIXME: typeError
+  label: {
+    position: 'top',
+    offset: 4
+  }
+};
+
+export const barTheme: Pick<
+  ISeriesTheme,
+  SeriesTypeEnum.bar | SeriesTypeForThemeEnum.bar_horizontal | SeriesTypeForThemeEnum.bar_vertical
+> = {
+  bar,
+  bar_horizontal,
+  bar_vertical
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/series/funnel.ts b/packages/vchart-theme/src/chart-hub/common/series/funnel.ts
new file mode 100644
index 0000000..a35ce0f
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/series/funnel.ts
@@ -0,0 +1,30 @@
+import type { ISeriesTheme } from '@visactor/vchart';
+
+export const funnel: ISeriesTheme['funnel'] = {
+  funnel: {
+    state: {
+      selected: {
+        fill: '#1966FF',
+        stroke: '#3958E0',
+        strokeOpacity: 0.2,
+        lineWidth: 4
+      }
+    }
+  },
+  outerLabel: {
+    style: {
+      fontSize: 12
+    },
+    line: {
+      style: {
+        lineWidth: 2
+      }
+    }
+  },
+  label: {
+    style: {
+      fill: { type: 'palette', key: 'whiteColors100' },
+      fontSize: 12
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/series/gauge.ts b/packages/vchart-theme/src/chart-hub/common/series/gauge.ts
new file mode 100644
index 0000000..0c02d3b
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/series/gauge.ts
@@ -0,0 +1,28 @@
+import type { ISeriesTheme } from '@visactor/vchart';
+
+export const gauge: ISeriesTheme = {
+  circularProgress: {
+    // FIXME: not work
+    // radius: 1,
+    // innerRadius: 0.1,
+    progress: {
+      style: {
+        cornerRadius: 100,
+        fill: { type: 'palette', key: 'bandColor' }
+      }
+    },
+    track: {
+      interactive: false,
+      style: {
+        cornerRadius: 100,
+        fill: '#DCDEE1',
+        fillOpacity: 1
+      }
+    }
+  },
+  gaugePointer: {
+    pin: { visible: false },
+    pinBackground: { visible: false },
+    pointer: { visible: false }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/series/heatmap.ts b/packages/vchart-theme/src/chart-hub/common/series/heatmap.ts
new file mode 100644
index 0000000..01aeb66
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/series/heatmap.ts
@@ -0,0 +1,23 @@
+import type { ISeriesTheme } from '@visactor/vchart';
+
+export const heatmap: ISeriesTheme['heatmap'] = {
+  cell: {
+    style: {
+      stroke: { type: 'palette', key: 'whiteColors100' },
+      lineWidth: 1
+    },
+    state: {
+      hover: {
+        zIndex: 100,
+        stroke: '#000'
+      }
+    }
+  },
+  label: {
+    position: 'inside',
+    style: {
+      fill: { type: 'palette', key: 'whiteColors100' },
+      fontSize: 12
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/series/line.ts b/packages/vchart-theme/src/chart-hub/common/series/line.ts
new file mode 100644
index 0000000..29e11ec
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/series/line.ts
@@ -0,0 +1,24 @@
+import type { ISeriesTheme } from '@visactor/vchart';
+
+export const line: ISeriesTheme['line'] = {
+  line: {
+    style: {
+      lineWidth: 2,
+      curveType: 'monotone'
+    }
+  },
+  point: {
+    style: {
+      visible: false,
+      size: 12,
+      lineWidth: 2,
+      shadowColor: 'rgba(0, 0, 0, 0.1)',
+      shadowBlur: 3,
+      stroke: { type: 'palette', key: 'whiteColors100' }
+    }
+  },
+  label: {
+    position: 'top',
+    offset: 4
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/series/pie.ts b/packages/vchart-theme/src/chart-hub/common/series/pie.ts
new file mode 100644
index 0000000..70e0c87
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/series/pie.ts
@@ -0,0 +1,28 @@
+import type { ISeriesTheme } from '@visactor/vchart';
+
+export const pie: ISeriesTheme['pie'] = {
+  outerRadius: 0.8,
+  innerRadius: 0.54,
+  pie: {
+    style: {
+      padAngle: 0,
+      stroke: '#fff',
+      lineWidth: 2
+    },
+    state: {
+      hover: {
+        lineWidth: 0
+      },
+      selected: {
+        lineWidth: 0
+      }
+    }
+  },
+  label: {
+    visible: true,
+    position: 'outside',
+    style: {
+      fill: null
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/series/radar.ts b/packages/vchart-theme/src/chart-hub/common/series/radar.ts
new file mode 100644
index 0000000..59be477
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/series/radar.ts
@@ -0,0 +1,26 @@
+import type { ISeriesTheme } from '@visactor/vchart';
+
+export const radar: ISeriesTheme['radar'] = {
+  line: {
+    style: {
+      lineWidth: 1
+    }
+  },
+  point: {
+    style: {
+      visible: false,
+      size: 12,
+      lineWidth: 2,
+      shadowColor: 'rgba(0, 0, 0, 0.1)',
+      shadowBlur: 3,
+      stroke: { type: 'palette', key: 'whiteColors100' }
+    }
+  },
+  area: {
+    visible: true
+  },
+  label: {
+    position: 'top',
+    offset: 4
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/series/scatter.ts b/packages/vchart-theme/src/chart-hub/common/series/scatter.ts
new file mode 100644
index 0000000..c509aa8
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/series/scatter.ts
@@ -0,0 +1,16 @@
+import type { ISeriesTheme } from '@visactor/vchart';
+
+export const scatter: ISeriesTheme['scatter'] = {
+  point: {
+    style: {
+      symbolType: 'circle',
+      fillOpacity: 0.35,
+      lineWidth: 1,
+      size: 8,
+      stroke: null
+    }
+  },
+  label: {
+    position: 'top'
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/series/treemap.ts b/packages/vchart-theme/src/chart-hub/common/series/treemap.ts
new file mode 100644
index 0000000..b423600
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/series/treemap.ts
@@ -0,0 +1,22 @@
+import type { ISeriesTheme } from '@visactor/vchart';
+
+export const treemap: ISeriesTheme['treemap'] = {
+  gapWidth: 0,
+  leaf: {
+    style: {
+      lineWidth: 2,
+      stroke: { type: 'palette', key: 'whiteColors100' }
+    },
+    state: {
+      hover: {
+        fillOpacity: 0.8,
+        lineWidth: 0
+      }
+    }
+  },
+  label: {
+    style: {
+      fill: { type: 'palette', key: 'whiteColors100' }
+    }
+  }
+};
diff --git a/packages/vchart-theme/src/chart-hub/common/token.ts b/packages/vchart-theme/src/chart-hub/common/token.ts
new file mode 100644
index 0000000..18fbd70
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/common/token.ts
@@ -0,0 +1,9 @@
+import type { BuiltinTokenMap } from '@visactor/vchart';
+
+export const token: Partial<BuiltinTokenMap> = {
+  fontFamily:
+    // eslint-disable-next-line max-len
+    `"PingFang SC", "-apple-system", "Segoe UI", "Helvetica Neue", Arial,
+    Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
+  fontSize: 12
+};
diff --git a/packages/vchart-theme/src/chart-hub/index.ts b/packages/vchart-theme/src/chart-hub/index.ts
new file mode 100644
index 0000000..9d9d5ba
--- /dev/null
+++ b/packages/vchart-theme/src/chart-hub/index.ts
@@ -0,0 +1,60 @@
+import type { ITheme } from '@visactor/vchart';
+import { colorScheme } from './common/color-scheme';
+import { axis } from './common/component/axis';
+import { axisPolar } from './common/component/polar-axis';
+
+import { legend } from './common/component/legend';
+import { token } from './common/token';
+import { tooltip } from './common/component/tooltip';
+import { crosshair } from './common/component/crosshair';
+import { area } from './common/series/area';
+import { barTheme as bar } from './common/series/bar';
+import { line } from './common/series/line';
+import { markByName } from './common/mark';
+import { scatter } from './common/series/scatter';
+import { pie } from './common/series/pie';
+import { indicator } from './common/component/indicator';
+import { funnel } from './common/series/funnel';
+import { treemap } from './common/series/treemap';
+import { gauge } from './common/series/gauge';
+import { heatmap } from './common/series/heatmap';
+import { markLine } from './common/component/mark-line';
+import { markArea } from './common/component/mark-area';
+import { markPoint } from './common/component/mark-point';
+import { dataZoom } from './common/component/data-zoom';
+import { scrollBar } from './common/component/scroll-bar';
+import { radar } from './common/series/radar';
+
+export const chartHubLightTheme: ITheme = {
+  name: 'chartHubLight',
+  type: 'light',
+  description: 'light theme for ChartHub.',
+  colorScheme,
+  token,
+  component: {
+    ...axis,
+    ...legend,
+    ...axisPolar,
+    tooltip,
+    crosshair,
+    indicator,
+    markLine,
+    markArea,
+    markPoint,
+    dataZoom,
+    scrollBar
+  },
+  series: {
+    ...area,
+    ...bar,
+    ...gauge,
+    line,
+    scatter,
+    pie,
+    funnel,
+    treemap,
+    heatmap,
+    radar
+  },
+  markByName
+};
diff --git a/packages/vchart-theme/src/index.ts b/packages/vchart-theme/src/index.ts
index 85a175f..dad49b2 100644
--- a/packages/vchart-theme/src/index.ts
+++ b/packages/vchart-theme/src/index.ts
@@ -1,4 +1,5 @@
 export * from './v-screen';
 export * from './legacy';
 export * from './mobile';
+export * from './chart-hub';
 export * from './theme-map';
diff --git a/packages/vchart-theme/src/legacy/index.ts b/packages/vchart-theme/src/legacy/index.ts
index 3f456d6..62a18b5 100644
--- a/packages/vchart-theme/src/legacy/index.ts
+++ b/packages/vchart-theme/src/legacy/index.ts
@@ -1,6 +1,6 @@
 import { colorLegend } from './legend/color-legend';
 import { sizeLegend } from './legend/size-legend';
-import type { ITheme } from '@visactor/vchart-types';
+import type { ITheme } from '@visactor/vchart';
 
 export const legacyLightTheme: ITheme = {
   name: 'legacyLight',
diff --git a/packages/vchart-theme/src/mobile/dark/index.ts b/packages/vchart-theme/src/mobile/dark/index.ts
index ac8539b..a0e714b 100644
--- a/packages/vchart-theme/src/mobile/dark/index.ts
+++ b/packages/vchart-theme/src/mobile/dark/index.ts
@@ -1,4 +1,4 @@
-import type { ITheme } from '@visactor/vchart-types';
+import type { ITheme } from '@visactor/vchart';
 import { component } from '../common/component';
 import { markByName, markByType } from '../common/mark';
 import { token } from '../common/constants';
diff --git a/packages/vchart-theme/src/mobile/light/index.ts b/packages/vchart-theme/src/mobile/light/index.ts
index d37676e..63e7566 100644
--- a/packages/vchart-theme/src/mobile/light/index.ts
+++ b/packages/vchart-theme/src/mobile/light/index.ts
@@ -1,4 +1,4 @@
-import type { ITheme } from '@visactor/vchart-types';
+import type { ITheme } from '@visactor/vchart';
 import { component } from '../common/component';
 import { markByName, markByType } from '../common/mark';
 import { token } from '../common/constants';
diff --git a/packages/vchart-theme/src/theme-map.ts b/packages/vchart-theme/src/theme-map.ts
index 59bc716..8dbb356 100644
--- a/packages/vchart-theme/src/theme-map.ts
+++ b/packages/vchart-theme/src/theme-map.ts
@@ -1,7 +1,8 @@
-import type { ITheme } from '@visactor/vchart-types';
+import type { ITheme } from '@visactor/vchart';
 import { vScreenThemeList } from './v-screen';
 import { legacyDarkTheme, legacyLightTheme } from './legacy';
 import { mobileDarkTheme, mobileLightTheme } from './mobile';
+import { chartHubLightTheme } from './chart-hub';
 
 export const allThemeMap = new Map([
   // 移动端主题
@@ -11,6 +12,8 @@ export const allThemeMap = new Map([
   [legacyLightTheme.name, legacyLightTheme],
   [legacyDarkTheme.name, legacyDarkTheme],
   // 大屏主题
-  ...([...vScreenThemeList].map(theme => [theme.name, theme]) as [string, ITheme][])
+  ...([...vScreenThemeList].map(theme => [theme.name, theme]) as [string, ITheme][]),
+  // ChartHub 主题
+  [chartHubLightTheme.name, chartHubLightTheme]
   // new theme here
 ]) as Map<string, ITheme>;
diff --git a/packages/vchart-theme/src/v-screen/common/index.ts b/packages/vchart-theme/src/v-screen/common/index.ts
index 37dbd29..29c1a4b 100644
--- a/packages/vchart-theme/src/v-screen/common/index.ts
+++ b/packages/vchart-theme/src/v-screen/common/index.ts
@@ -1,4 +1,4 @@
-import type { ITheme } from '@visactor/vchart-types';
+import type { ITheme } from '@visactor/vchart';
 import { markByName } from './mark';
 import { axis } from './component/axis';
 import { crosshair } from './component/crosshair';
@@ -13,6 +13,7 @@ export const getVScreenCommonTheme = (name: string, description: string, dataSch
   type: 'dark',
   colorScheme: getColorScheme(dataScheme),
   markByName,
+  // @ts-ignore
   series: {
     ...bar,
     ...area
diff --git a/share/chart-demo/src/charts/treemap.ts b/share/chart-demo/src/charts/treemap.ts
new file mode 100644
index 0000000..9653157
--- /dev/null
+++ b/share/chart-demo/src/charts/treemap.ts
@@ -0,0 +1,103 @@
+const spec = {
+  type: 'treemap',
+  data: [
+    {
+      id: 'data',
+      values: [
+        {
+          name: '分类 1',
+          value: 560
+        },
+        {
+          name: '分类 2',
+          value: 500
+        },
+        {
+          name: '分类 3',
+          value: 150
+        },
+        {
+          name: '分类 4',
+          value: 140
+        },
+        {
+          name: '分类 5',
+          value: 115
+        },
+        {
+          name: '分类 6',
+          value: 95
+        },
+        {
+          name: '分类 7',
+          value: 90
+        },
+        {
+          name: '分类 8',
+          value: 75
+        },
+        {
+          name: '分类 9',
+          value: 98
+        },
+        {
+          name: '分类 10',
+          value: 60
+        },
+        {
+          name: '分类 11',
+          value: 45
+        },
+        {
+          name: '分类 12',
+          value: 40
+        },
+        {
+          name: '分类 13',
+          value: 40
+        },
+        {
+          name: '分类 14',
+          value: 35
+        },
+        {
+          name: '分类 15',
+          value: 40
+        },
+        {
+          name: '分类 16',
+          value: 40
+        },
+        {
+          name: '分类 17',
+          value: 40
+        },
+        {
+          name: '分类 18',
+          value: 30
+        },
+        {
+          name: '分类 19',
+          value: 28
+        },
+        {
+          name: '分类 20',
+          value: 16
+        }
+      ]
+    }
+  ],
+  categoryField: 'name',
+  valueField: 'value',
+  label: {
+    visible: true
+  },
+  legends: {
+    visible: true
+  }
+};
+
+export default {
+  title: 'Treemap Chart',
+  spec
+};
diff --git a/share/chart-demo/src/index.ts b/share/chart-demo/src/index.ts
index 46d13fc..80b1a90 100644
--- a/share/chart-demo/src/index.ts
+++ b/share/chart-demo/src/index.ts
@@ -11,7 +11,8 @@ import markLine from './charts/mark-line';
 import markPoint from './charts/mark-point';
 import gauge from './charts/gauge';
 import funnel from './charts/funnel';
+import treemap from './charts/treemap';
 
-export { area, column, pie, bar, rose, radar, scatter, heatmap, gauge, funnel, markArea, markLine, markPoint };
+export { area, column, pie, bar, rose, radar, scatter, heatmap, gauge, funnel, markArea, markLine, markPoint, treemap };
 
 export * from './charts/interface';