diff --git a/examples/sites/demos/pc/app/chart/boxplot/vertical.vue b/examples/sites/demos/pc/app/chart/boxplot/vertical.vue
index a3cbb31e6..e90ca84f1 100644
--- a/examples/sites/demos/pc/app/chart/boxplot/vertical.vue
+++ b/examples/sites/demos/pc/app/chart/boxplot/vertical.vue
@@ -10,10 +10,10 @@ export default {
     TinyBoxplot: ChartBoxplot
   },
   data() {
-    const sourceData0 = this.makeData()
-    const sourceData1 = this.makeData()
-    const sourceData2 = this.makeData()
     return {
+      sourceData0: makeData(),
+      sourceData1: makeData(),
+      sourceData2: makeData(),
       options: {
         padding: [50, 30, 55, 20],
         xAxis: {
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-attributes-demo.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-attributes-demo.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-attributes-demo.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-attributes-demo.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-attributes-demo.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-attributes-demo.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-attributes-demo.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-attributes-demo.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-autonavi-map.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-autonavi-map.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-autonavi-map.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-autonavi-map.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-autonavi-map.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-autonavi-map.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-autonavi-map.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-autonavi-map.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-baidu-map.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-baidu-map.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-baidu-map.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-baidu-map.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-baidu-map.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-baidu-map.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-baidu-map.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-baidu-map.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-bar.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-bar.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-bar.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-bar.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-bar.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-bar.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-bar.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-bar.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-boxplot.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-boxplot.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-boxplot.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-boxplot.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-boxplot.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-boxplot.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-boxplot.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-boxplot.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-candle.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-candle.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-candle.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-candle.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-candle.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-candle.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-candle.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-candle.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-events.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-events.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-events.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-events.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-events.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-events.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-events.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-events.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-funnel.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-funnel.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-funnel.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-funnel.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-funnel.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-funnel.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-funnel.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-funnel.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-gauge.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-gauge.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-gauge.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-gauge.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-gauge.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-gauge.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-gauge.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-gauge.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-graph.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-graph.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-graph.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-graph.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-graph.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-graph.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-graph.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-graph.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-heatmap.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-heatmap.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-heatmap.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-heatmap.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-heatmap.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-heatmap.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-heatmap.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-heatmap.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-histogram.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-histogram.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-histogram.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-histogram.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-histogram.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-histogram.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-histogram.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-histogram.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-line.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-line.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-line.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-line.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-line.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-line.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-line.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-line.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-liquidfill.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-liquidfill.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-liquidfill.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-liquidfill.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-liquidfill.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-liquidfill.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-liquidfill.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-liquidfill.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-map.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-map.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-map.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-map.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-map.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-map.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-map.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-map.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-pie.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-pie.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-pie.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-pie.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-pie.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-pie.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-pie.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-pie.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-process.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-process.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-process.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-process.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-process.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-process.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-process.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-process.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-question.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-question.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-question.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-question.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-question.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-question.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-question.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-question.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-radar.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-radar.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-radar.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-radar.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-radar.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-radar.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-radar.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-radar.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-ring.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-ring.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-ring.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-ring.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-ring.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-ring.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-ring.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-ring.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-sankey.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-sankey.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-sankey.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-sankey.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-sankey.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-sankey.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-sankey.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-sankey.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-scatter.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-scatter.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-scatter.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-scatter.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-scatter.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-scatter.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-scatter.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-scatter.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-sunburst.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-sunburst.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-sunburst.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-sunburst.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-sunburst.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-sunburst.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-sunburst.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-sunburst.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-tree.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-tree.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-tree.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-tree.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-tree.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-tree.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-tree.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-tree.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-waterfall.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-waterfall.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-waterfall.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-waterfall.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-waterfall.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-waterfall.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-waterfall.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-waterfall.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-wordcloud.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-wordcloud.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-wordcloud.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-wordcloud.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-wordcloud.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-wordcloud.json.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart-wordcloud.json.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-wordcloud.json.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart.cn.md
index ed9f5b9e4..857982e89 100644
--- a/examples/sites/demos/pc/app/chart/webdoc/chart.cn.md
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart.cn.md
@@ -4,6 +4,4 @@ title: Chart 图表
 
 # Chart 图表
 
-**【预告】**: Chart 图表组件预计从 `@opentiny/vue@3.22.0` 版本中移除，后续从 `@opentiny/vue-huicharts` 单独引入。
-
-Chart 图表组件基于 `hui-charts` 封装，集成自适应、性能提升、数据状态、无障碍能力、刻度优化等特性。
+<div>基于 hui-charts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/packages/modules.json b/packages/modules.json
index ff1672c42..0e874982f 100644
--- a/packages/modules.json
+++ b/packages/modules.json
@@ -80,15 +80,9 @@
     "type": "component",
     "exclude": false,
     "mode": [
-      "mobile-first",
       "pc"
     ]
   },
-  "AnchorMobileFirst": {
-    "path": "vue/src/anchor/src/mobile-first.vue",
-    "type": "template",
-    "exclude": false
-  },
   "AnchorPc": {
     "path": "vue/src/anchor/src/pc.vue",
     "type": "template",
@@ -1470,11 +1464,6 @@
     "type": "template",
     "exclude": false
   },
-  "Hooks": {
-    "path": "vue-hooks/index.ts",
-    "type": "module",
-    "exclude": false
-  },
   "Hrapprover": {
     "path": "vue/src/hrapprover/index.ts",
     "type": "component",
diff --git a/packages/vue/src/chart/autonavi-map/package.json b/packages/vue/src/chart/autonavi-map/package.json
index 0c57c4e51..9767f0df1 100644
--- a/packages/vue/src/chart/autonavi-map/package.json
+++ b/packages/vue/src/chart/autonavi-map/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-amap",
+  "name": "@opentiny/vue-autonavi-map",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -15,7 +15,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/autonavi-map/src/autonavi-map.vue b/packages/vue/src/chart/autonavi-map/src/autonavi-map.vue
index e03c76970..23c31bf37 100644
--- a/packages/vue/src/chart/autonavi-map/src/autonavi-map.vue
+++ b/packages/vue/src/chart/autonavi-map/src/autonavi-map.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="hui-chart chart-box">
-    <div ref="chartRef" :style="{ width, height }"></div>
+    <div ref="chartRef" :style="{width, height}"></div>
     <slot></slot>
   </div>
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 
 import registerAmap from './amap'
 import { $prefix } from '@opentiny/vue-common'
diff --git a/packages/vue/src/chart/baidu-map/package.json b/packages/vue/src/chart/baidu-map/package.json
index 40e60f98a..b22671d54 100644
--- a/packages/vue/src/chart/baidu-map/package.json
+++ b/packages/vue/src/chart/baidu-map/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-bmap",
+  "name": "@opentiny/vue-baidu-map",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -15,7 +15,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/baidu-map/src/baidu-map.vue b/packages/vue/src/chart/baidu-map/src/baidu-map.vue
index 1882d4082..7dac59cb8 100644
--- a/packages/vue/src/chart/baidu-map/src/baidu-map.vue
+++ b/packages/vue/src/chart/baidu-map/src/baidu-map.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="hui-chart chart-box">
-    <div ref="chartRef" :style="{ width, height }"></div>
+    <div ref="chartRef" :style="{width, height}"></div>
     <slot></slot>
   </div>
 </template>
 
 <script>
 import 'echarts/extension/bmap/bmap'
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { $prefix } from '@opentiny/vue-common'
 
 export default {
diff --git a/packages/vue/src/chart/chart-bar/package.json b/packages/vue/src/chart/chart-bar/package.json
index c0948a1ab..4fea76890 100644
--- a/packages/vue/src/chart/chart-bar/package.json
+++ b/packages/vue/src/chart/chart-bar/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-bar",
+  "name": "@opentiny/vue-chart-bar",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-bar/src/chart-bar.vue b/packages/vue/src/chart/chart-bar/src/chart-bar.vue
index 2a06d1d22..9d95302f0 100644
--- a/packages/vue/src/chart/chart-bar/src/chart-bar.vue
+++ b/packages/vue/src/chart/chart-bar/src/chart-bar.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="hui-chart chart-box">
-    <div ref="chartRef" :style="{ width, height }"></div>
+    <div ref="chartRef" :style="{width, height}"></div>
     <slot></slot>
   </div>
 </template>
 
 <script>
 import { histogram } from './histogram'
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { $prefix } from '@opentiny/vue-common'
 
 export default {
diff --git a/packages/vue/src/chart/chart-bar/src/histogram.ts b/packages/vue/src/chart/chart-bar/src/histogram.ts
index 7734f8de2..46da3dfb9 100644
--- a/packages/vue/src/chart/chart-bar/src/histogram.ts
+++ b/packages/vue/src/chart/chart-bar/src/histogram.ts
@@ -1,13 +1,4 @@
-import {
-  getFormatted,
-  cloneDeep,
-  getStackMap,
-  get,
-  set,
-  isNull,
-  getRows,
-  getTooltip
-} from '@opentiny/vue-huicharts-core'
+import { getFormatted, cloneDeep, getStackMap, get, set, isNull, getRows, getTooltip } from '@opentiny/vue-chart-core'
 
 const VALUE_AXIS_OPACITY = 0.5
 
diff --git a/packages/vue/src/chart/chart-boxplot/package.json b/packages/vue/src/chart/chart-boxplot/package.json
index 4a004d694..0f0f12ce6 100644
--- a/packages/vue/src/chart/chart-boxplot/package.json
+++ b/packages/vue/src/chart/chart-boxplot/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-boxplot",
+  "name": "@opentiny/vue-chart-boxplot",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-boxplot/src/boxplot.ts b/packages/vue/src/chart/chart-boxplot/src/boxplot.ts
index 04dc5cbe5..5a61a20bb 100644
--- a/packages/vue/src/chart/chart-boxplot/src/boxplot.ts
+++ b/packages/vue/src/chart/chart-boxplot/src/boxplot.ts
@@ -1,4 +1,4 @@
-import { getFormatted, itemPoint, itemLabel, itemContent, htmlHandler } from '@opentiny/vue-huicharts-core'
+import { getFormatted, itemPoint, itemLabel, itemContent, htmlHandler } from '@opentiny/vue-chart-core'
 
 const getXAxis = (args) => {
   const { columns, xAxisName, axisVisible, xAxisType } = args
diff --git a/packages/vue/src/chart/chart-boxplot/src/chart-boxplot.vue b/packages/vue/src/chart/chart-boxplot/src/chart-boxplot.vue
index 8be1afbae..51f3433da 100644
--- a/packages/vue/src/chart/chart-boxplot/src/chart-boxplot.vue
+++ b/packages/vue/src/chart/chart-boxplot/src/chart-boxplot.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { prepareBoxplotData } from 'echarts/extension/dataTool'
 import { boxplot } from './boxplot'
 import { $prefix } from '@opentiny/vue-common'
diff --git a/packages/vue/src/chart/chart-candle/package.json b/packages/vue/src/chart/chart-candle/package.json
index 3075123a5..0309cf16d 100644
--- a/packages/vue/src/chart/chart-candle/package.json
+++ b/packages/vue/src/chart/chart-candle/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-candle",
+  "name": "@opentiny/vue-chart-candle",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
diff --git a/packages/vue/src/chart/chart-candle/src/candle.ts b/packages/vue/src/chart/chart-candle/src/candle.ts
index 3297b883a..e690c98f7 100644
--- a/packages/vue/src/chart/chart-candle/src/candle.ts
+++ b/packages/vue/src/chart/chart-candle/src/candle.ts
@@ -16,7 +16,7 @@
  * dataType	数据展示格式	string	可选值: KMB, normal, percent
  */
 
-import { getFormatted, itemPoint, itemLabel, itemContent } from '@opentiny/vue-huicharts-core'
+import { getFormatted, itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const isNull = (x) => x === null || x === undefined
 let defaultKName = ''
diff --git a/packages/vue/src/chart/chart-candle/src/chart-candle.vue b/packages/vue/src/chart/chart-candle/src/chart-candle.vue
index 13fb4ff10..342272ed7 100644
--- a/packages/vue/src/chart/chart-candle/src/chart-candle.vue
+++ b/packages/vue/src/chart/chart-candle/src/chart-candle.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { t } from '@opentiny/vue-locale'
 import { candle } from './candle'
 import { $prefix } from '@opentiny/vue-common'
diff --git a/packages/vue/src/chart/chart-core/base/chart.ts b/packages/vue/src/chart/chart-core/base/chart.ts
new file mode 100644
index 000000000..bc80fd383
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/chart.ts
@@ -0,0 +1,63 @@
+/* eslint-disable new-cap */
+/* eslint-disable no-unused-expressions */
+import core from './core'
+import Register from './register'
+import Theme from './feature/token'
+import { isFunction } from './util/type'
+import axistip from './feature/axistip'
+import { mergeExtend } from './util/merge'
+import readScreen from './feature/readScreen'
+import mediaScreen from './feature/mediaScreen'
+
+// 图表核心对象，通过 Register 全量引入图表给 HuiCharts 渲染，打包容量较大
+export default class HuiCharts extends core {
+  constructor() {
+    super()
+    // 图表名称
+    this.chartName
+  }
+
+  // 传入简化后的icharts-option
+  setSimpleOption(chartName, iChartOption, plugins = {}, isInit = true) {
+    if (isInit) {
+      Theme.setDefaultTheme(iChartOption.theme)
+      this.mediaScreenObserver && this.mediaScreenObserver.setInitOption(iChartOption)
+    }
+    if (iChartOption.readScreen) {
+      readScreen(this.dom, iChartOption.readScreen)
+    }
+    if (isFunction(chartName)) {
+      this.redirectSelfChart(chartName, iChartOption, plugins)
+      return
+    }
+    this.plugins = plugins
+    this.chartName = chartName
+    this.iChartOption = iChartOption
+    const ChartClass = this.getChartClass(chartName)
+    this.ichartsIns = new ChartClass(iChartOption, this.echartsIns, this.plugins)
+    this.eChartOption = this.ichartsIns.getOption()
+    this.iChartOption.axistip && axistip(this.dom, this.echartsIns, this.eChartOption)
+    mergeExtend(this.iChartOption, this.eChartOption)
+  }
+
+  // 获取图表类
+  getChartClass(name) {
+    return Register.getRegisteredComp(name)
+  }
+
+  // 开启响应式布局（类媒体查询效果）
+  mediaScreen(dom, screenOption) {
+    this.mediaScreenObserver = new mediaScreen(dom, screenOption, (option) => {
+      this.setSimpleOption(this.chartName, option, this.plugins, false)
+      this.render()
+    })
+  }
+
+  // 图表刷新，包括刷新配置和数据
+  refresh(iChartOption) {
+    this.iChartOption = iChartOption
+    this.setSimpleOption(this.chartName, iChartOption, this.plugins)
+    this.render()
+    this.mediaScreenObserver && this.mediaScreenObserver.refresh()
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/AutonaviMapChart/index.ts b/packages/vue/src/chart/chart-core/base/components/AutonaviMapChart/index.ts
new file mode 100644
index 000000000..9f37bb84d
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/AutonaviMapChart/index.ts
@@ -0,0 +1,147 @@
+import BaseChart from '../BaseChart'
+import * as echarts from 'echarts/lib/echarts'
+
+// 常规的调用方法
+// integrateChart.init(chartRef.current);
+// integrateChart.setSimpleOption(AutonaviMapChart, option, {});
+// integrateChart.render();
+let amapPromise = null
+
+export default class AutonaviMapChart extends BaseChart {
+  constructor() {
+    super()
+    // 图表echarts实例
+    this.echartsIns = null
+    // 图表icharts实例
+    this.ichartsIns = null
+
+    // 图表echarts配置项
+    this.eChartOption = null
+    // 图表icharts配置项
+    this.iChartOption = null
+
+    // 图表渲染容器
+    this.dom = null
+    // 图表配置项
+    this.option = null
+  }
+
+  getAmap(option) {
+    if (!amapPromise) {
+      const key = option.key
+      const url = option.url
+      const version = option.version || option.ver || option.v
+      amapPromise = new Promise((resolve) => {
+        const cbName = 'amap' + Date.now()
+        let script = document.createElement('script')
+        window[cbName] = resolve
+        let src = `${url}?v=${version}&key=${key}`
+        if (option.plugin) {
+          src += `&plugin=${option.plugin}`
+        }
+        script.src = `${src}&callback=${cbName}`
+        script.onload = () => resolve()
+        document.body.appendChild(script)
+      })
+    }
+    return amapPromise
+  }
+
+  // 初始化图表渲染容器
+  init(dom) {
+    this.uninstall()
+    this.dom = dom
+    this.echartsIns = echarts.init(this.dom)
+  }
+
+  // 初始化图表渲染配置
+  setSimpleOption(chartName, option) {
+    this.option = option
+    this.getAmap(this.option).then(() => {
+      this.echartsIns.setOption(this.option)
+      this.setResizeObserver()
+    })
+  }
+
+  // 图表渲染回调
+  render() {
+    this.initDom() // 渲染dom
+    this.renderCallBack && this.renderCallBack(this)
+  }
+
+  // 图表渲染完成时回调
+  onRenderReady(callback) {
+    this.renderCallBack = callback
+  }
+
+  // 渲染dom
+  initDom() {}
+
+  // 监听容器变化
+  setResizeObserver() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+    this.resizeObserver = new ResizeObserver((entries) => {
+      this.resizeDom()
+    })
+    this.resizeObserver.observe(this.dom)
+  }
+
+  resizeDom() {
+    this.echartsIns && this.echartsIns.resize && this.echartsIns.resize()
+  }
+
+  // 图表刷新，刷新配置项
+  refresh(option) {
+    this.iChartOption = option
+    this.setSimpleOption('AutonaviMapChart', this.iChartOption)
+    this.resizeDom()
+  }
+
+  // 图表刷新，仅刷新数据
+  refreshData(data) {
+    this.iChartOption.series[0].data = data
+    this.refresh(this.iChartOption)
+  }
+
+  // 刷新图表自适应宽度
+  setResize() {
+    this.resizeDom()
+  }
+
+  // 销毁图表
+  uninstall() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+    // 销毁ECharts实例
+    if (this.echartsIns && !this.echartsIns.isDisposed()) {
+      this.echartsIns.dispose()
+    }
+    this.echartsIns = null
+    this.dom = null
+  }
+
+  // 获取到ECharts实例
+  getEchartsInstance() {
+    return this.echartsIns
+  }
+
+  // 获取到ECharts配置项
+  getEchartsOption() {
+    return this.echartsIns.getOption()
+  }
+
+  // 获取 ECharts 高德地图组件
+  getAmapComponent() {
+    return this.echartsIns.getModel().getComponent('amap')
+  }
+
+  // 获取高德地图实例
+  getAmapInstance() {
+    return this.getAmapComponent().getAMap()
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BaiduMapChart/index.ts b/packages/vue/src/chart/chart-core/base/components/BaiduMapChart/index.ts
new file mode 100644
index 000000000..b7d223543
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BaiduMapChart/index.ts
@@ -0,0 +1,138 @@
+import BaseChart from '../BaseChart'
+import * as echarts from 'echarts'
+import 'echarts/extension/bmap/bmap'
+
+export default class BaiduMapChart extends BaseChart {
+  constructor() {
+    super()
+    // 图表echarts实例
+    this.echartsIns = null
+    // 图表渲染容器
+    this.dom = null
+    // 图表配置项
+    this.option = null
+    // 图表所需数据
+    this.data = null
+    // 图表容器的宽高变化监听器
+    this.resizeObserver = null
+  }
+
+  // 初始化图表渲染容器
+  init(dom) {
+    this.uninstall()
+    this.dom = dom
+  }
+
+  // 初始化图表渲染配置
+  setSimpleOption(chartName, option) {
+    this.option = option
+  }
+
+  // 判断某个script是否存在
+  isScriptExist(src) {
+    let scripts = document.getElementsByTagName('script')
+    for (let i = 0; i < scripts.length; i++) {
+      if (scripts[i].src && scripts[i].src === src) {
+        return true
+      }
+    }
+    return false
+  }
+
+  loadMap({ key, version, url }) {
+    return new Promise((resolve) => {
+      let cbName = 'bmap' + Date.now()
+      let script = document.createElement('script')
+      let ver = version || '2.0'
+
+      window[cbName] = resolve
+      script.src = [`${url}?v=${ver}`, `ak=${key}`, `callback=${cbName}`].join('&')
+      document.body.appendChild(script)
+    })
+  }
+
+  // 加载百度api，并渲染图表
+  render() {
+    let url = this.option.url
+    let ver = this.option.v || '2.0'
+    let key = this.option.key
+    let src = [`${url}?${ver}`, `ak=${key}`].join('&')
+    let bmap = this.option.bmap
+    let scriptExists = this.isScriptExist(src)
+    // 判断是否重复加载script
+    if (scriptExists) {
+      this.renderInit()
+    } else {
+      this.loadMap({ key, version: ver, url }).then(() => {
+        this.renderInit()
+      })
+    }
+  }
+
+  // 渲染图表
+  renderInit() {
+    this.echartsIns = echarts.init(this.dom)
+    // 渲染
+    this.setOption(this.option)
+    this.setResizeObserver()
+    // 图表渲染完成时回调
+    this.renderCallBack && this.renderCallBack(this.echartsIns)
+  }
+
+  // 第一次渲染: 调用echarts原生的setOption
+  setOption(option) {
+    this.echartsIns.setOption(option)
+  }
+
+  // 图表渲染完成时回调
+  onRenderReady(callback) {
+    this.renderCallBack = callback
+  }
+
+  // 监听容器变化
+  setResizeObserver() {
+    this.resizeObserver = new ResizeObserver((entries) => {
+      this.resizeDom()
+    })
+    this.resizeObserver.observe(this.dom)
+  }
+
+  resizeDom() {
+    this.echartsIns && this.echartsIns.resize && this.echartsIns.resize()
+  }
+
+  // 图表刷新，包括刷新配置和数据
+  refresh(iChartOption) {
+    this.iChartOption = iChartOption
+    this.setSimpleOption(this.chartName, iChartOption)
+    this.render()
+  }
+
+  // 图表刷新，仅刷新数据
+  refreshData(data) {
+    this.iChartOption.series[0].data = data
+    this.refresh(this.iChartOption)
+  }
+
+  // 刷新图表自适应宽度
+  setResize() {
+    this.resizeDom()
+  }
+
+  // 销毁图表
+  uninstall() {
+    // 卸载window resize监听功能
+    window.removeEventListener('resize', this.throttleResize)
+    // 卸载container容器变化监听
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+    // 销毁ECharts实例
+    if (this.echartsIns && !this.echartsIns.isDisposed()) {
+      this.echartsIns.dispose()
+    }
+    this.echartsIns = null
+    this.dom = null
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BarChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/BarChart/chartToken.ts
new file mode 100644
index 000000000..051a68632
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BarChart/chartToken.ts
@@ -0,0 +1,29 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    itemStyle: { borderWidth, borderColor, borderRadius, color },
+    label: { color: colorLabel, fontSize },
+    barWidth
+  } = Theme.config.BarChart
+
+  const {
+    colorState: { colorError }
+  } = Theme.config
+
+  return {
+    borderWidth,
+    borderColor,
+    borderRadius,
+    color,
+    labelColor: colorLabel,
+    fontSize,
+    barWidth,
+    colorError
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/BarChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/BarChart/handleOptipn.ts
new file mode 100644
index 000000000..1d021a7f6
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BarChart/handleOptipn.ts
@@ -0,0 +1,84 @@
+import defendXSS from '../../util/defendXSS'
+import chartToken from './chartToken'
+
+/**
+ * 给堆叠图的柱子中间加上空白缝隙, 处理柱子圆角的递进关系
+ */
+export function setStack(baseOption, iChartOption, legendData, seriesData) {
+  const type = iChartOption.type
+  if (type && type === 'stack') {
+    // 添加堆叠图空白缝隙
+    baseOption.series.forEach((item) => {
+      item.itemStyle.borderWidth = chartToken.borderWidth
+      item.itemStyle.borderColor = chartToken.borderColor
+    })
+    // 柱子圆角，上层数值为空时，圆角递进到下层
+    const direction = iChartOption.direction
+    iChartOption.data.forEach((item, i) => {
+      for (let j = legendData.length - 1; j >= 0; j--) {
+        const name = legendData[j]
+        if (item[name]) {
+          seriesData[name][i] = {
+            value: seriesData[name][i],
+            itemStyle: {
+              borderRadius:
+                direction === 'horizontal'
+                  ? [0, chartToken.borderRadius, chartToken.borderRadius, 0]
+                  : [chartToken.borderRadius, chartToken.borderRadius, 0, 0]
+            }
+          }
+          break
+        }
+      }
+    })
+  }
+}
+
+/**
+ * 将所有y轴的label都转为正数
+ * 内置好转为正数的tooltip
+ */
+export function setDoubleSides(baseOption, iChartOption) {
+  const type = iChartOption.type
+  if (type && type === 'double-sides') {
+    const yAxis = baseOption.yAxis
+    yAxis.forEach((item) => {
+      item.axisLabel.formatter = (value) => {
+        return Math.abs(value)
+      }
+    })
+    if (!baseOption.tooltip.formatter) {
+      baseOption.tooltip.formatter = (params, ticket, callback) => {
+        let html = ''
+        params.forEach((item, index) => {
+          if (index === 0) {
+            html += `<div style="margin-bottom:4px;">${defendXSS(item.name)}</div>`
+          }
+          html += `<div>
+                      <span style="display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${defendXSS(
+                        item.color
+                      )};"></span>
+                      <span style="margin-left:5px;color:#000000">
+                          <span style="display:inline-block; margin-right:8px;min-width:48px;">${defendXSS(
+                            item.seriesName
+                          )}</span> 
+                          <span style="font-weight:bold">${defendXSS(item.value ? Math.abs(item.value) : '-')}</span>
+                      </span>
+                  </div>`
+        })
+        return html
+      }
+    }
+  }
+}
+
+/**
+ * 设置柱状图的方向
+ */
+export function setDirection(baseOption, direction) {
+  if (direction && direction === 'horizontal') {
+    const temp = baseOption.xAxis
+    baseOption.xAxis = baseOption.yAxis
+    baseOption.yAxis = temp
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BarChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/BarChart/handleSeries.ts
new file mode 100644
index 000000000..f6033116f
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BarChart/handleSeries.ts
@@ -0,0 +1,619 @@
+import merge from '../../util/merge'
+import defendXSS from '../../util/defendXSS'
+import { getColor } from '../../util/color'
+import cloneDeep from '../../util/cloneDeep'
+import { isArray, isNumber } from '../../util/type'
+import { getMarkLineDefault } from '../../option/config/mark'
+import chartToken from './chartToken'
+
+export const seriesInit = () => {
+  return {
+    label: {
+      show: false,
+      color: chartToken.labelColor,
+      fontSize: chartToken.fontSize
+    },
+    // 数据
+    data: [],
+    // 柱形
+    type: 'bar',
+    // 柱条宽度
+    barWidth: chartToken.barWidth,
+    // 柱间距离
+    barGap: '60%',
+    // 阈值线
+    markLine: null,
+    // 峰值标志
+    markPoint: null,
+    // 柱形的每个样式配置项
+    itemStyle: {
+      borderRadius: [chartToken.borderRadius, chartToken.borderRadius, 0, 0]
+    }
+  }
+}
+
+function handleWaterFall(type, seriesUnit) {
+  if (type && type === 'water-fall') {
+    // 调整堆叠柱子圆角
+    seriesUnit.itemStyle.borderRadius = [
+      chartToken.borderRadius,
+      chartToken.borderRadius,
+      chartToken.borderRadius,
+      chartToken.borderRadius
+    ]
+    // 瀑布图最有有一个总体数据
+    seriesUnit.data.push(
+      seriesUnit.data.reduce(function (prev, curr) {
+        const n = Number(curr) || 0
+        return prev + n
+      }, 0)
+    )
+  }
+}
+
+function handleRange(type, seriesUnit) {
+  if (type && type === 'range') {
+    // 调整堆叠柱子圆角
+    seriesUnit.itemStyle.borderRadius = [
+      chartToken.borderRadius,
+      chartToken.borderRadius,
+      chartToken.borderRadius,
+      chartToken.borderRadius
+    ]
+  }
+}
+
+/**
+ * 组装echarts所需要的series
+ * @param {图表数据} seriesData
+ * @param {图例数据} legendData
+ * @param {是否面积图} isArea
+ * @param {是否曲线} isSmooth
+ * @param {是否阶梯线} isStep
+ * @param {阈值线} markLine
+ * @param {阈值箭头} markPoint
+ * @param {颜色集合} colors
+ * @returns
+ */
+export function setSeries(seriesData, legendData, iChartOption) {
+  // 柱状图类型
+  const type = iChartOption.type
+  // 柱状图方向
+  const direction = iChartOption.direction
+  // 覆盖用户传入的itemStyle
+  const seriesInit_ = handleItemStyle(direction, iChartOption.itemStyle)
+  // 拼装series
+  const series = []
+  legendData.forEach((legend, index) => {
+    const seriesUnit = cloneDeep(seriesInit_)
+    // 数值显示
+    handleLabel(seriesUnit, iChartOption, index)
+    // 聚焦效果
+    handleFocus(seriesUnit, iChartOption)
+    // 数据 / 数据名称
+    seriesUnit.name = legend
+    // 如果设置了 barMinHeight，那么就把数据里面的0设置成null
+    if (iChartOption.itemStyle && iChartOption.itemStyle.barMinHeight) {
+      seriesUnit.data = seriesData[legend].map((item) => {
+        return item === 0 ? undefined : item
+      })
+    } else {
+      seriesUnit.data = seriesData[legend]
+    }
+    // 阈值线
+    handleMarkLine(seriesUnit, iChartOption, direction)
+    // 堆叠图
+    handleStack(type, seriesUnit, index, legendData, iChartOption)
+    // 双向图
+    handleBothSides(type, seriesUnit, direction, index, legendData)
+    // 数据均为正数的双向图
+    handleDoubleSides(type, seriesUnit, index, legendData)
+    // 瀑布图
+    handleWaterFall(type, seriesUnit)
+    // 区间图
+    handleRange(type, seriesUnit)
+    // 包含图
+    handleContain(type, seriesUnit)
+    series.push(seriesUnit)
+  })
+  // 配置多个series的y轴index
+  handleYaxis(series, iChartOption.yAxis)
+  return series
+}
+
+function handleItemStyle(direction, itemStyle) {
+  const seriesInit_ = cloneDeep(seriesInit())
+  if (direction && direction === 'horizontal') {
+    seriesInit_.itemStyle.borderRadius = [0, chartToken.borderRadius, chartToken.borderRadius, 0]
+  }
+  if (itemStyle?.barMinHeight) {
+    seriesInit_.barMinHeight = itemStyle.barMinHeight
+  }
+  if (itemStyle?.barWidth) {
+    seriesInit_.barWidth = itemStyle.barWidth
+  }
+  if (itemStyle?.barGap) {
+    seriesInit_.barGap = itemStyle.barGap
+  }
+  if (itemStyle?.color) {
+    seriesInit_.itemStyle.color = itemStyle.color
+  }
+  merge(seriesInit_.itemStyle, itemStyle)
+  return seriesInit_
+}
+
+function handleLabel(seriesUnit, iChartOption, index) {
+  const label = iChartOption.label
+  let labelOption
+  if (label && isArray(label)) {
+    labelOption = label[index]
+  } else {
+    labelOption = label
+  }
+  if (labelOption && labelOption.show) {
+    merge(seriesUnit.label, labelOption)
+    seriesUnit.label.show = true
+    seriesUnit.label.offset = labelOption.offset || [0, 0]
+    seriesUnit.label.position = labelOption.position || 'inside'
+    seriesUnit.label.formatter = labelOption.formatter
+  }
+}
+
+function handleMarkLine(seriesUnit, iChartOption, direction) {
+  const name = seriesUnit.name
+  const markLine = iChartOption.markLine
+  const isTopMarkLine = markLine && markLine.top && !(markLine.topUse && !markLine.topUse.includes(name))
+  const isBottomMarkLine = markLine && markLine.bottom && !(markLine.bottomUse && !markLine.bottomUse.includes(name))
+  if (isTopMarkLine || isBottomMarkLine) {
+    seriesUnit.markLine = cloneDeep(getMarkLineDefault())
+    merge(seriesUnit.markLine, markLine)
+    seriesUnit.markLine.lineStyle.color = markLine.color || chartToken.colorError
+  }
+  if (isTopMarkLine) {
+    if (direction && direction === 'horizontal') {
+      seriesUnit.markLine.data.push({ xAxis: markLine.top })
+    } else {
+      seriesUnit.markLine.data.push({ yAxis: markLine.top })
+    }
+  }
+  if (isBottomMarkLine) {
+    if (direction && direction === 'horizontal') {
+      seriesUnit.markLine.data.push({ xAxis: markLine.bottom })
+    } else {
+      seriesUnit.markLine.data.push({ yAxis: markLine.bottom })
+    }
+  }
+}
+
+function handleFocus(seriesUnit, iChartOption) {
+  if (iChartOption.focus) {
+    seriesUnit.emphasis = {
+      focus: 'series',
+      blurScope: 'global'
+    }
+  }
+}
+
+function handleStack(type, seriesUnit, index, legendData, iChartOption) {
+  if (type && type === 'stack') {
+    const stack = iChartOption.stack
+    if (stack) {
+      for (const name in stack) {
+        if (Object.hasOwnProperty.call(stack, name)) {
+          const stackArray = stack[name]
+          const seriesName = seriesUnit.name
+          const stackIndex = stackArray.indexOf(seriesName)
+          if (stackIndex !== -1) {
+            seriesUnit.stack = name
+            if (stackIndex + 1 < stackArray.length) {
+              delete seriesUnit.itemStyle.borderRadius
+            }
+          }
+          break
+        }
+      }
+    } else {
+      seriesUnit.stack = 'stack'
+      if (index !== legendData.length - 1) {
+        delete seriesUnit.itemStyle.borderRadius
+      }
+    }
+  }
+}
+
+function handleBothSides(type, seriesUnit, direction, index, legendData) {
+  if (type && (type === 'both-sides' || type === 'double-sides')) {
+    seriesUnit.stack = 'stack'
+    // 调整堆叠柱子圆角
+    if (direction && direction === 'horizontal') {
+      if (index === 0) {
+        seriesUnit.itemStyle.borderRadius = [0, chartToken.borderRadius, chartToken.borderRadius, 0]
+      }
+      if (index === legendData.length - 1) {
+        seriesUnit.itemStyle.borderRadius = [chartToken.borderRadius, 0, 0, chartToken.borderRadius]
+      }
+    } else {
+      if (index === 0) {
+        seriesUnit.itemStyle.borderRadius = [chartToken.borderRadius, chartToken.borderRadius, 0, 0]
+      }
+      if (index === legendData.length - 1) {
+        seriesUnit.itemStyle.borderRadius = [0, 0, chartToken.borderRadius, chartToken.borderRadius]
+      }
+    }
+  }
+}
+
+function handleDoubleSides(type, seriesUnit, index, legendData) {
+  if (type && type === 'double-sides') {
+    if (index === legendData.length - 1) {
+      seriesUnit.data = seriesUnit.data.map((item) => {
+        if (isNumber(item)) {
+          return -1 * item
+        } else {
+          return item
+        }
+      })
+    }
+  }
+}
+
+function handleContain(type, seriesUnit) {
+  if (type && type === 'contain') {
+    seriesUnit.barGap = '-100%'
+  }
+}
+
+function handleColorStops(percent, originColor, markLineColor) {
+  const colorStops = [
+    {
+      offset: 0,
+      color: markLineColor || chartToken.colorError
+    },
+    {
+      offset: percent,
+      color: markLineColor || chartToken.colorError
+    },
+    {
+      offset: percent + 0.001,
+      color: originColor
+    },
+    {
+      offset: 1,
+      color: originColor
+    }
+  ]
+  return colorStops
+}
+
+function handleTopObj(d, direction, percent, originColor, markLineColor) {
+  const topObj = {
+    value: d,
+    itemStyle: {
+      color: {
+        type: 'linear',
+        x: direction === 'horizontal' ? 1 : 0,
+        y: direction === 'horizontal' ? 0 : 0,
+        x2: direction === 'horizontal' ? 0 : 0,
+        y2: direction === 'horizontal' ? 0 : 1,
+        colorStops: handleColorStops(percent, originColor, markLineColor)
+      }
+    }
+  }
+  return topObj
+}
+
+function handleBottomObj(d, direction, percent, originColor, markLineColor) {
+  const bottomObj = {
+    value: d,
+    itemStyle: {
+      color: {
+        type: 'linear',
+        x: direction === 'horizontal' ? 0 : 0,
+        y: direction === 'horizontal' ? 0 : 1,
+        x2: direction === 'horizontal' ? 1 : 0,
+        y2: direction === 'horizontal' ? 0 : 0,
+        colorStops: handleColorStops(percent, originColor, markLineColor)
+      }
+    }
+  }
+  return bottomObj
+}
+const colorStopsOrigin = [
+  { offset: 0, color: chartToken.colorError },
+  { offset: 1, color: chartToken.colorError }
+]
+
+function handleColorStopsTop(originColor, bottomPercent) {
+  const colorStops = [
+    { offset: 0, color: originColor },
+    { offset: bottomPercent, color: originColor },
+    { offset: bottomPercent + 0.0001, color: chartToken.colorError },
+    { offset: 1, color: chartToken.colorError }
+  ]
+  return colorStops
+}
+
+function handleColorStopsBottom(originColor, topPercent) {
+  const colorStops = [
+    { offset: 0, color: chartToken.colorError },
+    { offset: topPercent, color: chartToken.colorError },
+    { offset: topPercent + 0.0001, color: originColor },
+    { offset: 1, color: originColor }
+  ]
+  return colorStops
+}
+
+function handleColorStopsOther(originColor, topPercent, bottomPercent) {
+  const colorStops = [
+    { offset: 0, color: chartToken.colorError },
+    { offset: topPercent, color: chartToken.colorError },
+    { offset: topPercent + 0.0001, color: originColor },
+    { offset: bottomPercent, color: originColor },
+    { offset: bottomPercent + 0.0001, color: chartToken.colorError },
+    { offset: 1, color: chartToken.colorError }
+  ]
+  return colorStops
+}
+
+function handleResObj(d, direction, colorStops) {
+  const resObj = {
+    value: d,
+    itemStyle: {
+      color: {
+        type: 'linear',
+        x: direction === 'horizontal' ? 1 : 0,
+        y: direction === 'horizontal' ? 0 : 0,
+        x2: direction === 'horizontal' ? 0 : 0,
+        y2: direction === 'horizontal' ? 0 : 1,
+        colorStops
+      }
+    }
+  }
+  return resObj
+}
+
+function handleSeries(iChartOption, baseOption, exclude, colors, direction) {
+  // 顶部阈值
+  let top = iChartOption.markLine.top
+  // 底部阈值
+  let bottom = iChartOption.markLine.bottom
+  const usefullSeries = baseOption.series.filter((item) => {
+    return !exclude.includes(item.name)
+  })
+  usefullSeries.forEach((item, index) => {
+    if (!exclude.includes(item.name)) {
+      const barData = item.data
+      const placeHolderData = baseOption.series[index * 2].data
+      item.data = barData.map((d, i) => {
+        const pd = placeHolderData[i]
+        if (top === undefined) {
+          top = pd + d + 1
+        }
+        if (bottom === undefined) {
+          bottom = pd - 1
+        }
+        const originColor = getColor(colors, index)
+        let topPercent = 0
+        let bottomPercent = 1
+        topPercent = (d + pd - top) / d
+        topPercent < 0 && (topPercent = 0)
+        topPercent > 1 && (topPercent = 1)
+        bottomPercent = (d + pd - bottom) / d
+        bottomPercent < 0 && (bottomPercent = 0)
+        bottomPercent > 1 && (bottomPercent = 1)
+        let colorStops = []
+        if (topPercent === 1 || bottomPercent === 0) {
+          // 纯红
+          colorStops = colorStopsOrigin
+        } else if (topPercent === 0 && bottomPercent === 1) {
+          // 原色
+          return d
+        } else if (topPercent === 0) {
+          colorStops = handleColorStopsTop(originColor, bottomPercent)
+        } else if (bottomPercent === 1) {
+          colorStops = handleColorStopsBottom(originColor, topPercent)
+        } else {
+          colorStops = handleColorStopsOther(originColor, topPercent, bottomPercent)
+        }
+        const resObj = handleResObj(d, direction, colorStops)
+        return resObj
+      })
+    }
+  })
+}
+
+// 针对阈值线以上显示红色区域的需求，图表需要进行特殊处理
+export function setMarkLine(baseOption, iChartOption) {
+  const type = iChartOption.type
+  const colors = baseOption.color
+  const direction = iChartOption.direction
+  const exclude = ['Placeholder']
+  if (iChartOption.markLine && type !== 'water-fall' && type !== 'range') {
+    // 顶部阈值
+    const top = iChartOption.markLine.top
+    const topUse = iChartOption.markLine.topUse
+    // 底部阈值
+    const bottom = iChartOption.markLine.bottom
+    const bottomUse = iChartOption.markLine.bottomUse
+    // 用户自定义阈值线颜色
+    const markLineColor = iChartOption.markLine.color
+    const usefullSeries = baseOption.series.filter((item) => {
+      return !exclude.includes(item.name)
+    })
+    usefullSeries.forEach((item, index) => {
+      if (!exclude.includes(item.name)) {
+        const barData = item.data
+        item.data = barData.map((d) => {
+          const originColor = getColor(colors, index)
+          // 如果该柱形高度超过阈值，侧改变其颜色
+          if (top && d >= 0 && top >= 0 && d > top) {
+            if (topUse && !topUse.includes(item.name)) {
+              return d
+            }
+            const percent = (d - top) / (d - 0)
+            const topObj = handleTopObj(d, direction, percent, originColor, markLineColor)
+            return topObj
+            // 如果该柱形高度低于阈值，侧改变其颜色
+          } else if (bottom && d <= 0 && bottom <= 0 && d < bottom) {
+            if (bottomUse && !bottomUse.includes(item.name)) {
+              return d
+            }
+            const percent = (bottom - d) / (0 - d)
+            const bottomObj = handleBottomObj(d, direction, percent, originColor, markLineColor)
+            return bottomObj
+          } else {
+            return d
+          }
+        })
+      }
+    })
+  }
+  //
+  if (iChartOption.markLine && type === 'range') {
+    handleSeries(iChartOption, baseOption, exclude, colors, direction)
+  }
+}
+
+function placeFun(index, placeholderData) {
+  const a = {
+    name: 'Placeholder',
+    type: 'bar',
+    stack: `stack${index}`,
+    itemStyle: {
+      borderColor: chartToken.borderColor,
+      color: chartToken.color
+    },
+    emphasis: {
+      itemStyle: {
+        borderColor: chartToken.borderColor,
+        color: chartToken.color
+      }
+    },
+    data: placeholderData
+  }
+  return a
+}
+
+// 针对区间图表需求，图表需要进行特殊处理
+export function setRange(baseOption, iChartOption) {
+  const type = iChartOption.type
+  if (type && type === 'range') {
+    const tempArray = []
+    baseOption.series.forEach((item, index) => {
+      const barData = item.data
+      const barRealData = []
+      const placeholderData = []
+      const placeholder = placeFun(index, placeholderData)
+      barData.forEach((d) => {
+        placeholderData.push(d[0])
+        barRealData.push(d[1] - d[0])
+      })
+      item.stack = `stack${index}`
+      item.data = barRealData
+      tempArray.push(placeholder)
+      tempArray.push(item)
+    })
+    baseOption.series = tempArray
+  }
+}
+
+// 针对瀑布图表需求，图表需要进行特殊处理
+export function setWaterFall(baseOption, iChartOption) {
+  const type = iChartOption.type
+  const totalName = iChartOption.totalName || 'Total'
+  const totalPosition = iChartOption.totalPosition || 'end'
+  if (type && type === 'water-fall') {
+    const tempArray = []
+    baseOption.series.forEach((item, index) => {
+      const barData = item.data
+      const placeholderData = [0]
+      const placeholder = placeFun(index, placeholderData)
+      if (totalPosition === 'end') {
+        barData.forEach((d, i) => {
+          if (i < barData.length - 1) {
+            placeholderData.push((Number(d) || 0) + placeholderData[i])
+          }
+        })
+        placeholderData[placeholderData.length - 1] = 0
+      } else {
+        barData.unshift(barData.pop())
+        placeholderData[0] = barData[0]
+        barData.forEach((d, i) => {
+          if (i > 0) {
+            placeholderData.push(placeholderData[i - 1] - (Number(d) || 0))
+          }
+        })
+        placeholderData[0] = 0
+      }
+      item.stack = `stack${index}`
+      tempArray.push(placeholder)
+      tempArray.push(item)
+    })
+    if (totalPosition === 'end') {
+      baseOption.xAxis[0].data.push(totalName)
+    } else {
+      baseOption.xAxis[0].data.unshift(totalName)
+    }
+    baseOption.series = tempArray
+  }
+}
+
+/**
+ * 为了实现一些特殊的样式，增加了一些series，如柱状图中的PlaceHolder series
+ * 因此在 tooltip 中应该被屏蔽这些series
+ * 因此对 tooltip.formatter 进行二次封装
+ */
+export function setLimitFormatter(baseOption, iChartOption, seriesData) {
+  const type = iChartOption.type
+  const toolTipFormatter = baseOption.tooltip.formatter
+  const exclude = ['Placeholder']
+  const colors = baseOption.color
+  baseOption.tooltip.formatter = (params, ticket, callback) => {
+    const newParams = params.filter((item) => {
+      return !exclude.includes(item.seriesName)
+    })
+    if (toolTipFormatter) {
+      return toolTipFormatter(newParams, ticket, callback)
+    }
+    let htmlString = ''
+    newParams.forEach((item, index) => {
+      if (index === 0) {
+        htmlString += `<div style="margin-bottom:4px;">${defendXSS(item.name)}</div>`
+      }
+      const itemColor = typeof item.color === 'string' ? item.color : getColor(colors, index)
+      htmlString += `
+                    <div>
+                        <span style="display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${defendXSS(
+                          itemColor
+                        )};">
+                        </span>
+                        <span style="margin-left:5px;">
+                            <span style="display:inline-block;margin-right:8px;min-width:60px;">${defendXSS(
+                              item.seriesName
+                            )}</span> 
+                            <span style="font-weight:bold">
+                              ${defendXSS(
+                                type === 'range'
+                                  ? `${`${`[${params[index * 2].value}`}-${params[index * 2].value + item.value}`}]`
+                                  : item.value || seriesData[item.seriesName][item.dataIndex]
+                              )}
+                            </span>
+                        </span>
+                    </div>
+                `
+    })
+    return htmlString
+  }
+}
+
+function handleYaxis(series, yAxis) {
+  if (Array.isArray(yAxis)) {
+    yAxis.forEach((y, index) => {
+      series.forEach((s, indexs) => {
+        if (y.dataName && y.dataName.includes(s.name)) {
+          series[indexs].yAxisIndex = index
+        }
+      })
+    })
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BarChart/handleVisualMap.ts b/packages/vue/src/chart/chart-core/base/components/BarChart/handleVisualMap.ts
new file mode 100644
index 000000000..7595631fa
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BarChart/handleVisualMap.ts
@@ -0,0 +1,37 @@
+import min from '../../util/sort/min'
+import max from '../../util/sort/max'
+import { getColor } from '../../util/color'
+import chartToken from './chartToken'
+
+export function setVisualMap(legendData, seriesData, markLine, colors) {
+  const visualMap = []
+  if (markLine) {
+    const topValue = markLine.top
+    const bottomValue = markLine.bottom
+    legendData.forEach((legendName, index) => {
+      const data = seriesData[legendName]
+      const minData = min(data)
+      const maxData = max(data)
+      const bottom = bottomValue || minData - 1
+      const top = topValue || maxData + 1
+      // 根据数据大小映射颜色
+      visualMap.push({
+        show: false,
+        type: 'piecewise',
+        dimension: 1,
+        seriesIndex: index,
+        pieces: [
+          {
+            gt: bottom,
+            lt: top,
+            color: getColor(colors, index)
+          }
+        ],
+        outOfRange: {
+          color: chartToken.colorError
+        }
+      })
+    })
+  }
+  return visualMap
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BarChart/index.ts b/packages/vue/src/chart/chart-core/base/components/BarChart/index.ts
new file mode 100644
index 000000000..73d28a214
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BarChart/index.ts
@@ -0,0 +1,110 @@
+import LineChart from '../LineChart'
+import init from '../../option/init'
+import { event } from '../../util/event'
+import cloneDeep from '../../util/cloneDeep'
+import BaseOption from '../../option/base'
+import { mergeVisualMap, mergeSeries } from '../../util/merge'
+import RectCoordSys from '../../option/RectSys'
+import { setStack, setDirection, setDoubleSides } from './handleOptipn'
+import { xkey, xdata, ldata, ydata } from '../../option/RectSys'
+
+import { setSeries, setRange, setMarkLine, setWaterFall, setLimitFormatter } from './handleSeries'
+
+class BarChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.baseOption = cloneDeep(BaseOption)
+    this.chartInstance = chartInstance
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption()
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption
+    // 装载除series之外的其他配置
+    RectCoordSys(this.baseOption, this.iChartOption, 'BarChart')
+    // x轴key值
+    const xAxisKey = xkey(iChartOption)
+    // x轴数据
+    const xAxisData = xdata(iChartOption.data, xAxisKey)
+    // 图例数据
+    const legendData = ldata(iChartOption.data, xAxisKey)
+    // 连线的数据
+    const seriesData = ydata(iChartOption.data, legendData)
+    // 赋值数据
+    this.baseOption.legend.data = iChartOption.legend.data || legendData
+    this.baseOption.xAxis.forEach((item) => {
+      item.data = xAxisData
+    })
+    this.baseOption.series = setSeries(seriesData, legendData, iChartOption)
+    // 给堆叠图的柱子中间加上空白缝隙，并覆盖图例的点击事件
+    setStack(this.baseOption, iChartOption, legendData, seriesData)
+    // 针对数据均为正数的双向柱状图进行一些特殊处理
+    setDoubleSides(this.baseOption, iChartOption)
+    // 针对瀑布图表需求，图表需要进行特殊处理
+    setWaterFall(this.baseOption, iChartOption)
+    // 针对区间图表需求，图表需要进行特殊处理
+    setRange(this.baseOption, iChartOption)
+    // 针对阈值线变色，图表需要进行特殊处理
+    setMarkLine(this.baseOption, iChartOption)
+    // 设置柱状图的方向
+    setDirection(this.baseOption, iChartOption.direction)
+    // 对 tooltip.formatter 进行二次封装
+    setLimitFormatter(this.baseOption, iChartOption, seriesData)
+    // 配置图表事件
+    if (iChartOption.event) {
+      event(this.chartInstance, iChartOption.event)
+    }
+    // 是否关闭hover态的效果，默认为false
+    if (iChartOption.silent) {
+      this.baseOption.tooltip = {}
+    }
+    // 合并用户自定义series
+    mergeSeries(iChartOption, this.baseOption)
+    // 合并用户自定义visualMap
+    mergeVisualMap(iChartOption, this.baseOption)
+  }
+
+  // 根据渲染出的结果，二次计算option
+  updateOptionAgain(YAxiMax, YAxiMin) {
+    const baseOption = this.baseOption
+    const iChartOption = this.iChartOption
+    const lineDataName = iChartOption.lineDataName
+    // 折柱混合
+    if (lineDataName && lineDataName.length > 0) {
+      const lineChartBaseOpt = new LineChart(iChartOption, {}, this.chartInstance)
+      const lineBaseOption = lineChartBaseOpt.getOption()
+      const lineSeries = lineBaseOption.series
+      const barSeries = baseOption.series
+      lineDataName.forEach((lineName) => {
+        let bar = null
+        let line = null
+        for (let i = 0; i < lineSeries.length; i++) {
+          if (lineSeries[i].name === lineName) {
+            line = lineSeries[i]
+            break
+          }
+        }
+        for (let i = 0; i < barSeries.length; i++) {
+          if (barSeries[i].name === lineName) {
+            bar = barSeries[i]
+            break
+          }
+        }
+        for (const key in line) {
+          bar[key] = line[key]
+        }
+      })
+    }
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption() {}
+}
+
+export default BarChart
diff --git a/packages/vue/src/chart/chart-core/base/components/BaseChart/index.ts b/packages/vue/src/chart/chart-core/base/components/BaseChart/index.ts
new file mode 100644
index 000000000..bd3c9abac
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BaseChart/index.ts
@@ -0,0 +1,113 @@
+import { insertStateDom, removeStateDom } from '../../util/init/insert'
+export default class BaseChart {
+  // 图表渲染容器
+  dom
+  // 图表渲染配置
+  option
+
+  constructor() {
+    // 必须实现 init 方法，初始化图表渲染容器
+    if (this.init === undefined) {
+      throw new Error('This chart has not overwrite "init" callback!')
+    }
+    // 必须实现 setSimpleOption 方法，初始化图表渲染配置
+    if (this.setSimpleOption === undefined) {
+      throw new Error('This chart has not overwrite "setSimpleOption" callback!')
+    }
+    // 必须实现 render 方法，调用时开始渲染图表
+    if (this.render === undefined) {
+      throw new Error('This chart has not overwrite "render" callback!')
+    }
+    // 必须实现 onRenderReady 方法
+    if (this.onRenderReady === undefined) {
+      throw new Error('This chart has not overwrite "onRenderReady" callback!')
+    }
+    // 必须实现 refresh 方法，传入新的option，刷新图表
+    if (this.refresh === undefined) {
+      throw new Error('This chart has not overwrite "refresh" callback!')
+    }
+    // 必须实现 refreshData 方法，传入新的data，刷新图表
+    if (this.refreshData === undefined) {
+      throw new Error('This chart has not overwrite "refreshData" callback!')
+    }
+    // 必须实现 setResize 方法，该方法一般手动调用，实现图表自适应宽度
+    if (this.setResize === undefined) {
+      throw new Error('This chart has not overwrite "setResize" callback!')
+    }
+    // 必须实现 uninstall 方法，清空图表容器，卸载所有监听事件
+    if (this.uninstall === undefined) {
+      throw new Error('This chart has not overwrite "uninstall" callback!')
+    }
+  }
+
+  // 加载状态
+  showLoading(option) {
+    insertStateDom(this.dom, 'loading', option)
+  }
+
+  hideLoading() {
+    removeStateDom(this.dom, 'loading')
+  }
+
+  closeLoading() {
+    removeStateDom(this.dom, 'loading')
+  }
+
+  // 错误状态
+  showError(option) {
+    insertStateDom(this.dom, 'error', option)
+  }
+
+  closeError() {
+    removeStateDom(this.dom, 'error')
+  }
+
+  // 空数据状态
+  showEmpty(option) {
+    insertStateDom(this.dom, 'empty', option)
+  }
+
+  closeEmpty() {
+    removeStateDom(this.dom, 'empty')
+  }
+
+  // 阶段空数据状态
+  showStageEmpty(option) {
+    insertStateDom(this.dom, 'stage_empty', option)
+  }
+
+  closeStageEmpty() {
+    removeStateDom(this.dom, 'stage_empty')
+  }
+
+  // 自定义数据状态
+  showState(option) {
+    insertStateDom(this.dom, 'custom', option)
+  }
+
+  closeState() {
+    removeStateDom(this.dom, 'custom')
+  }
+
+  // 传入自定义DOM
+  showCustomDom(callback) {
+    if (this.dom.getElementsByClassName('huicharts-custom-dom').length > 0) return
+    if (getComputedStyle(this.dom).position === ('static' || '')) {
+      this.dom.style.position = 'relative'
+    }
+    let customContainer = document.createElement('div')
+    customContainer.className = 'huicharts-custom-dom'
+    customContainer.setAttribute(
+      'style',
+      'position:absolute;width:100%;height:100%;top:0px;left:0px;display:flex;justify-content:center;align-items:center'
+    )
+    this.dom.appendChild(customContainer)
+    callback(customContainer)
+  }
+
+  // 删除自定义DOM
+  closeCustomDom() {
+    let customContainer = this.dom.getElementsByClassName('huicharts-custom-dom')
+    this.dom.removeChild(customContainer[0])
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BoxplotChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/chartToken.ts
new file mode 100644
index 000000000..a66a52de9
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/chartToken.ts
@@ -0,0 +1,16 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    itemStyle: { color: colorBgPrimary }
+  } = Theme.config.BoxplotChart
+
+  return {
+    itemColor: colorBgPrimary
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/BoxplotChart/handleOption.ts b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/handleOption.ts
new file mode 100644
index 000000000..90a31c743
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/handleOption.ts
@@ -0,0 +1,52 @@
+import defendXSS from '../../util/defendXSS'
+
+/**
+ * 设置图的方向
+ */
+export function setDirection(baseOption, direction) {
+  if (direction && direction === 'horizontal') {
+    const temp = baseOption.xAxis
+    baseOption.xAxis = baseOption.yAxis
+    baseOption.yAxis = temp
+  }
+}
+
+function tooltipFormatter(params) {
+  const { data, color, seriesType } = params
+  const labels = ['下限', '下四分位数', '中位数', '上四分位数', '上限']
+  let htmlString = ''
+  if (seriesType === 'boxplot') {
+    const arr = []
+    labels.forEach((item, index) => {
+      htmlString = `<div>
+                            <span style="display:inline-block;width:10px;height:10px;
+                            margin-right:4px;border-radius:5px;border-style: solid;border-width:1px;
+                            border-color:${defendXSS(color)};background-color:${defendXSS(color)};"></span>
+                            <span style="display:inline-block;width:90px">${defendXSS(item)}:</span><span>${defendXSS(
+                              data[index + 1]
+                            )}</span>
+                       </div>`
+      arr.push(htmlString)
+    })
+    htmlString = arr.join('<br/>')
+  } else {
+    htmlString = `<div>
+                            <span style="display:inline-block;width:10px;height:10px;
+                            margin-right:4px;border-radius:5px;border-style: solid;border-width:1px;
+                            border-color:${defendXSS(color)};background-color:${defendXSS(color)};"></span>
+                            <span style="display:inline-block;width:90px">离散点:</span><span>${defendXSS(
+                              data[1]
+                            )}</span>
+                       </div>`
+  }
+  return htmlString
+}
+
+/**
+ * 配置默认的鼠标悬浮提示框
+ */
+export function setTooltip(baseOpt) {
+  if (!baseOpt.tooltip.formatter) {
+    baseOpt.tooltip.formatter = tooltipFormatter
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BoxplotChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/handleSeries.ts
new file mode 100644
index 000000000..86875351c
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/handleSeries.ts
@@ -0,0 +1,50 @@
+import cloneDeep from '../../util/cloneDeep'
+import chartToken from './chartToken'
+
+const datasetInit = [
+  {
+    source: []
+  },
+  {
+    transform: {
+      type: 'boxplot'
+    }
+  },
+  {
+    fromDatasetIndex: 1,
+    fromTransformResult: 1
+  }
+]
+
+const seriesInit = [
+  {
+    name: 'boxplot',
+    type: 'boxplot',
+    datasetIndex: 1,
+    itemStyle: {
+      color: ''
+    }
+  },
+  {
+    name: 'outlier',
+    type: 'scatter',
+    datasetIndex: 2
+  }
+]
+
+/**
+ * 组装echarts所需要的dataset
+ * @param {传入数据} data
+ * @returns
+ */
+export function setDataset(data) {
+  const dataset = cloneDeep(datasetInit)
+  dataset[0].source = data
+  return dataset
+}
+
+export function setSeries() {
+  const series = cloneDeep(seriesInit)
+  series[0].itemStyle.color = chartToken.itemColor
+  return series
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BoxplotChart/index.ts b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/index.ts
new file mode 100644
index 000000000..036663a5d
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/index.ts
@@ -0,0 +1,52 @@
+import init from '../../option/init'
+import { event } from '../../util/event'
+import { setDataset, setSeries } from './handleSeries'
+import { setDirection, setTooltip } from './handleOption'
+import RectCoordSys from '../../option/RectSys'
+import chartToken from './chartToken'
+
+const CHART_NAME = 'BoxplotChart'
+export default class BoxplotChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    this.iChartOption = init(iChartOption)
+    this.updateOption(chartInstance)
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption
+    // 装载除series之外的其他配置
+    RectCoordSys(this.baseOption, this.iChartOption, CHART_NAME)
+    // 箱形图data必须设为undefined
+    this.baseOption.xAxis[0].data = undefined
+    // 提示框trigger设为item
+    this.baseOption.tooltip.trigger = 'item'
+    // 配置默认dataset
+    if (iChartOption.data && !iChartOption.dataset) {
+      this.baseOption.dataset = setDataset(iChartOption.data)
+      this.baseOption.series = setSeries()
+    }
+    // 自定义dataset和series
+    if (iChartOption.dataset && iChartOption.series) {
+      this.baseOption.dataset = iChartOption.dataset
+      this.baseOption.series = iChartOption.series
+      this.baseOption.series.forEach((item) => {
+        item.itemStyle = {}
+        item.itemStyle.color = chartToken.itemColor
+      })
+    }
+    // 横向
+    setDirection(this.baseOption, iChartOption.direction)
+    // 提示框
+    setTooltip(this.baseOption)
+    // 配置图表事件
+    if (iChartOption.event) {
+      event(chartInstance, iChartOption.event)
+    }
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BubbleChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/chartToken.ts
new file mode 100644
index 000000000..872a8d95c
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BubbleChart/chartToken.ts
@@ -0,0 +1,19 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    emphasis: {
+      label: { color: colorLabel }
+    }
+  } = Theme.config.BubbleChart
+
+  return {
+    emphasisLabelColor: colorLabel,
+    labelColor: colorLabel
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleData.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleData.ts
new file mode 100644
index 000000000..34d3ee2d4
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleData.ts
@@ -0,0 +1,22 @@
+/**
+ * 从数据中拿出legend-data
+ */
+export function getLegendData(data) {
+  return Object.keys(data)
+}
+
+/**
+ * 从数据中拿出x轴的坐标数据
+ */
+export function getXAxisData(data) {
+  const xAxisData = []
+  const dataValues = Object.values(data)
+  dataValues.forEach((item) => {
+    item.forEach((val) => {
+      if (!xAxisData.includes(val[0])) {
+        xAxisData.push(val[0])
+      }
+    })
+  })
+  return xAxisData
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleOptipn.ts
new file mode 100644
index 000000000..0a487e387
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleOptipn.ts
@@ -0,0 +1,53 @@
+import { changeRgbaOpacity } from '../../util/color'
+import defendXSS from '../../util/defendXSS'
+
+function tooltipFormatter(params) {
+  const seriesName = params.seriesName
+  const color = params.color
+  const data = params.data
+  const [x, y, radius, name] = data
+  let htmlString = `<div style="margin-bottom:4px;">
+                                ${defendXSS(seriesName)}
+                         </div>`
+  htmlString += `<div style="margin-bottom:4px;">
+                            <span style="display:inline-block;width:10px;height:10px;
+                            margin-right:8px;border-radius:5px;border-style: solid;border-width:1px;
+                            border-color:${defendXSS(changeRgbaOpacity(color, 1))};background-color:${defendXSS(
+                              color
+                            )};"></span>
+                            <span>${defendXSS(name)}</span>
+                       </div>`
+  htmlString += `
+            <div>
+                <span style="display:inline-block;margin-right:8px;min-width:60px;">x维度</span> 
+                <span>${defendXSS(x)}</span>
+            </div>
+        `
+  htmlString += `
+            <div>
+                <span style="display:inline-block;margin-right:8px;min-width:60px;">y维度</span> 
+                <span>${defendXSS(y)}</span>
+            </div>
+        `
+  htmlString += `
+            <div>
+                <span style="display:inline-block;margin-right:8px;min-width:60px;">半径维度</span> 
+                <span>${defendXSS(radius)}</span>
+            </div>
+        `
+  return htmlString
+}
+
+/**
+ * 配置默认的鼠标悬浮提示框
+ */
+export function setTooltip(baseOpt, iChartOption) {
+  baseOpt.tooltip.trigger = 'item'
+  if (iChartOption.trigger === 'axis') {
+    baseOpt.tooltip.trigger = 'axis'
+    baseOpt.tooltip.axisPointer.type = 'shadow'
+  }
+  if (!baseOpt.tooltip.formatter) {
+    baseOpt.tooltip.formatter = tooltipFormatter
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleSeries.ts
new file mode 100644
index 000000000..17df96b23
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleSeries.ts
@@ -0,0 +1,72 @@
+import { getColor, codeToRGB } from '../../util/color'
+import cloneDeep from '../../util/cloneDeep'
+import { getMarkLineDefault } from '../../option/config/mark'
+import chartToken from './chartToken'
+import merge from '../../util/merge'
+
+export const seriesInit = {
+  // 数据
+  data: [],
+  // 气泡图
+  type: 'scatter',
+  // 鼠标hover时显示label，并且其他legend变成灰色
+  emphasis: {
+    label: {
+      show: true,
+      color: '#ffffff',
+      fontSize: 14,
+      formatter(param) {
+        return param.data[3]
+      },
+      position: 'top'
+    }
+  },
+  // 气泡样式
+  itemStyle: {}
+}
+
+export function setSeries({ legendData, data, markLine, color, iChartOption }) {
+  // 更改hover时显示的label颜色
+  seriesInit.emphasis.label.color = chartToken.emphasisLabelColor
+  const series = []
+  legendData.forEach((legend, index) => {
+    const seriesUnit = cloneDeep(seriesInit)
+    const itemBorderColor = getColor(color, index)
+    // 设置图元透明度
+    const itemColor = codeToRGB(itemBorderColor, iChartOption.symbolOpacity || 0.2)
+    // 阈值线
+    if (markLine) {
+      seriesUnit.markLine = cloneDeep(getMarkLineDefault())
+      if (markLine.y) {
+        seriesUnit.markLine.data.push({ yAxis: markLine.y })
+      }
+      if (markLine.x) {
+        seriesUnit.markLine.data.push({ xAxis: markLine.x })
+      }
+    }
+    // 数据 / 数据名称
+    seriesUnit.name = legend
+    seriesUnit.data = data[legend]
+    seriesUnit.itemStyle = {
+      color: itemColor,
+      borderColor: itemBorderColor,
+      borderWidth: 1
+    }
+    series.push(seriesUnit)
+  })
+  return series
+}
+
+// 添加seires属性
+export function handleSeriesExtra(baseOpt, iChartOption) {
+  const { symbol, symbolRotate, symbolOffset, cursor, label, itemStyle, emphasis } = iChartOption
+  baseOpt.series.forEach((item) => {
+    item.symbol = symbol
+    item.symbolRotate = symbolRotate
+    item.symbolOffset = symbolOffset
+    item.cursor = cursor
+    item.label = label
+    merge(item.itemStyle, itemStyle)
+    merge(item.emphasis, emphasis)
+  })
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleTrendLine.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleTrendLine.ts
new file mode 100644
index 000000000..a0dfaa795
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleTrendLine.ts
@@ -0,0 +1,45 @@
+import * as echarts from 'echarts'
+import chartToken from './chartToken'
+
+/**
+ * 针对趋势线需求，图表需要进行特殊处理
+ */
+export function handleTrendLine(option, iChartOption, plugins) {
+  const ecStat = plugins.ecStat
+  if (iChartOption.trendLineConfig) {
+    if (ecStat) {
+      echarts.registerTransform(ecStat.transform.regression)
+      // 集合数据
+      option.dataset.push({
+        transform: {
+          type: 'ecStat:regression',
+          config: iChartOption.trendLineConfig
+        }
+      })
+      // 趋势线
+      option.series.push({
+        name: 'trendline',
+        type: 'line',
+        smooth: true,
+        datasetIndex: 1,
+        symbolSize: 0.1,
+        symbol: 'circle',
+        label: {
+          show: true,
+          fontSize: 14,
+          color: chartToken.labelColor
+        },
+        labelLayout: {
+          dx: -20
+        },
+        encode: {
+          label: 2,
+          tooltip: 1
+        },
+        silent: true
+      })
+    } else {
+      throw new Error('您必须安装echarts-stat才可以使用趋势线功能')
+    }
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleVisualMap.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleVisualMap.ts
new file mode 100644
index 000000000..8a9908986
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleVisualMap.ts
@@ -0,0 +1,39 @@
+import min from '../../util/sort/min'
+import max from '../../util/sort/max'
+
+export function setVisualMap(baseOption, iChartOption, legendData) {
+  const visualMap = []
+  const bubbleSize = iChartOption.bubbleSize || [10, 70]
+  const radius = baseOption.dataset[0].source.map((item) => {
+    return item[2]
+  })
+  const minValue = min(radius)
+  const maxValue = max(radius)
+  const seriesIndex = new Array(legendData.length).fill(0).map((item, index) => {
+    return index
+  })
+  visualMap.push({
+    show: false,
+    dimension: 2,
+    min: minValue,
+    max: maxValue,
+    seriesIndex,
+    inRange: {
+      symbolSize: bubbleSize
+    }
+  })
+  return visualMap
+}
+
+// 设置数据集
+export function setDataset(baseOption, iChartOption) {
+  let source = []
+  Object.keys(iChartOption.data).forEach((key) => {
+    source = source.concat(iChartOption.data[key])
+  })
+  return [
+    {
+      source
+    }
+  ]
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/BubbleChart/index.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/index.ts
new file mode 100644
index 000000000..dadf51992
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/BubbleChart/index.ts
@@ -0,0 +1,86 @@
+import init from '../../option/init'
+import BaseOption from '../../option/base'
+import cloneDeep from '../../util/cloneDeep'
+import { getLegendData, getXAxisData } from './handleData'
+import { setSeries, handleSeriesExtra } from './handleSeries'
+import { setTooltip } from './handleOptipn'
+import { handleTrendLine } from './handleTrendLine'
+import { setDataset, setVisualMap } from './handleVisualMap'
+import RectCoordSys from '../../option/RectSys'
+import { event } from '../../util/event'
+import { mergeSeries, mergeVisualMap } from '../../util/merge'
+
+class BubbleChart {
+  constructor(iChartOption, chartInstance, plugins) {
+    this.baseOption = {}
+    this.baseOption = cloneDeep(BaseOption)
+    this.iChartOption = {}
+    this.chartInstance = chartInstance
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(plugins)
+  }
+
+  updateOption(plugins) {
+    const iChartOption = this.iChartOption
+    // 装载除series之外的其他配置
+    RectCoordSys(this.baseOption, this.iChartOption, 'BubbleChart')
+    // 增加气泡图的默认悬浮提示框
+    setTooltip(this.baseOption, iChartOption)
+    // 组装基础数据
+    const legendData = getLegendData(iChartOption.data)
+    // 设置x轴类型，是目录型，还是数值型
+    const { xAxisType } = iChartOption
+    if (
+      legendData &&
+      legendData[0] &&
+      iChartOption.data[legendData[0]] &&
+      iChartOption.data[legendData[0]][0] &&
+      iChartOption.data[legendData[0]][0][0] &&
+      typeof iChartOption.data[legendData[0]][0][0] === 'string'
+    ) {
+      this.baseOption.xAxis.forEach((item) => {
+        item.type = xAxisType || 'category'
+        item.data = getXAxisData(iChartOption.data)
+      })
+    } else {
+      this.baseOption.xAxis.forEach((item) => {
+        item.type = xAxisType || 'value'
+      })
+    }
+    // 赋值数据
+    this.baseOption.legend.data = this.baseOption.legend.data || legendData
+    this.baseOption.series = setSeries({
+      legendData,
+      data: iChartOption.data,
+      markLine: iChartOption.markLine,
+      color: this.baseOption.color,
+      iChartOption
+    })
+    // 添加dataset
+    this.baseOption.dataset = setDataset(this.baseOption, iChartOption)
+    // 设置VisualMap，通过数值映射气泡大小
+    this.baseOption.visualMap = setVisualMap(this.baseOption, iChartOption, legendData)
+    // 针对趋势线的需求，图表需要进行特殊处理
+    handleTrendLine(this.baseOption, iChartOption, plugins)
+    // 添加seires属性
+    handleSeriesExtra(this.baseOption, iChartOption)
+    // 配置图表事件
+    if (iChartOption.event) {
+      event(this.chartInstance, iChartOption.event)
+    }
+    // 合并用户自定义series
+    mergeSeries(iChartOption, this.baseOption)
+    // 合并用户自定义visualMap
+    mergeVisualMap(iChartOption, this.baseOption)
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption() {}
+}
+
+export default BubbleChart
diff --git a/packages/vue/src/chart/chart-core/base/components/CandlestickChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/BaseOption.ts
new file mode 100644
index 000000000..ab498340b
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/BaseOption.ts
@@ -0,0 +1,33 @@
+// 显示volume需要的grid
+const VOLUMEGRID = [
+  {
+    left: '5%',
+    right: '5%',
+    height: '50%',
+    top: '2%',
+    containLabel: false
+  },
+  {
+    left: '5%',
+    right: '5%',
+    top: '63%',
+    height: '25%',
+    containLabel: false
+  }
+]
+
+const BASICSERIES = [
+  {
+    name: '日K',
+    type: 'candlestick',
+    data: undefined,
+    itemStyle: {
+      color: undefined,
+      color0: undefined,
+      borderColor: undefined,
+      borderColor0: undefined
+    }
+  }
+]
+
+export { BASICSERIES, VOLUMEGRID }
diff --git a/packages/vue/src/chart/chart-core/base/components/CandlestickChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/chartToken.ts
new file mode 100644
index 000000000..089b49e91
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/chartToken.ts
@@ -0,0 +1,21 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    axisPointer: {
+      label: { color: colorTextSecondary }
+    }
+  } = Theme.config.CandlestickChart
+
+  const { colorState } = Theme.config
+
+  return {
+    axisPointerLabelColor: colorTextSecondary,
+    colorState
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/CandlestickChart/hanleOption.ts b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/hanleOption.ts
new file mode 100644
index 000000000..3b5a5aab8
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/hanleOption.ts
@@ -0,0 +1,119 @@
+import { isArray } from '../../util/type'
+import cloneDeep from '../../util/cloneDeep'
+import { VOLUMEGRID } from './BaseOption'
+import merge from '../../util/merge'
+import chartToken from './chartToken'
+import { xkey } from '../../option/RectSys'
+
+function handleData(iChartOpt) {
+  const { data } = iChartOpt
+  const xAxisDataName = xkey(iChartOpt)
+  if (data && data.length !== 0) {
+    const time = []
+    const total = []
+    data.forEach((item) => {
+      time.push(item[xAxisDataName])
+      const totalItem = [item.open, item.close, item.lowest, item.highest]
+      if (item.volume) {
+        totalItem.push(item.volume)
+      }
+      total.push(totalItem)
+    })
+    return {
+      time,
+      total
+    }
+  }
+  return null
+}
+
+function handleAxis(baseOpt, data, volume) {
+  const { xAxis } = baseOpt
+  if (isArray(xAxis)) {
+    const len = xAxis.length
+    if (volume && len === 1) {
+      const secXaxis = cloneDeep(xAxis[0])
+      xAxis.push(secXaxis)
+    }
+    xAxis.forEach((x, xIndex) => {
+      x.data = data.time
+      x.boundaryGap = false
+      x.axisLine.onZero = false
+      if (xIndex === 1) {
+        x.axisLabel.show = false
+        x.axisTick.show = false
+        x.gridIndex = 1
+      }
+    })
+  } else {
+    xAxis.data = data.time
+    xAxis.boundaryGap = false
+    xAxis.axisLine.onZero = false
+  }
+
+  const { yAxis } = baseOpt
+  const lenY = yAxis.length
+  if (volume && lenY === 1) {
+    const secYaxis = cloneDeep(yAxis[0])
+    yAxis.push(secYaxis)
+  }
+  yAxis.forEach((y, yIndex) => {
+    y.scale = true
+    if (yIndex === 1) {
+      y.axisLabel.show = false
+      y.splitLine.show = false
+      y.gridIndex = 1
+    }
+  })
+}
+
+function handleDataZoom(baseOpt, iChartOpt) {
+  const { dataZoom } = iChartOpt
+  baseOpt.dataZoom[0].show = true
+  baseOpt.dataZoom[0].xAxisIndex = [0, 1]
+  baseOpt.dataZoom[0].bottom = '6%'
+  if (dataZoom) {
+    merge(baseOpt.dataZoom[0], dataZoom)
+  }
+}
+
+function handleLegend(baseOpt, iChartOpt) {
+  const { legend } = iChartOpt
+  if (legend) {
+    merge(baseOpt.legend, legend)
+  }
+}
+
+function handleTooltip(baseOpt, iChartOpt) {
+  const inerTooltip = { ...baseOpt.tooltip }
+  delete inerTooltip.axisPointer
+  inerTooltip.axisPointer = { type: 'cross' }
+  baseOpt.tooltip = inerTooltip
+  if (iChartOpt.tooltip) {
+    merge(baseOpt.tooltip, iChartOpt.tooltip)
+  }
+}
+
+function handleGrid(baseOpt, iChartOpt) {
+  const { volume, grid } = iChartOpt
+  // 用户没有自定义grid,并且需要去显示volume,使用默认值
+  if (!grid && volume) {
+    baseOpt.grid = cloneDeep(VOLUMEGRID)
+  }
+}
+
+function handleAxisPointer(baseOpt) {
+  const axisPointer = {
+    link: [
+      {
+        xAxisIndex: 'all'
+      }
+    ],
+    label: {
+      color: chartToken.axisPointerLabelColor
+    }
+  }
+  baseOpt.axisPointer = axisPointer
+}
+
+export { handleData, handleAxis, handleDataZoom, handleLegend, handleTooltip, handleGrid, handleAxisPointer }
diff --git a/packages/vue/src/chart/chart-core/base/components/CandlestickChart/hanleSeries.ts b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/hanleSeries.ts
new file mode 100644
index 000000000..932f1487c
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/hanleSeries.ts
@@ -0,0 +1,110 @@
+import cloneDeep from '../../util/cloneDeep'
+import { BASICSERIES } from './BaseOption'
+import LineChart from '../LineChart'
+import BarChart from '../BarChart'
+import { xkey } from '../../option/RectSys'
+import chartToken from './chartToken'
+
+function handleSeries(baseOpt, iChartOpt, data, chartInstance) {
+  const { upColor, downColor } = iChartOpt
+  const { colorState } = chartToken
+  const upStateColor = upColor || colorState.colorError
+  const downStateColor = downColor || colorState.colorSuccess
+  const baseSeries = cloneDeep(BASICSERIES)
+  baseSeries[0].data = data.total
+  baseSeries[0].itemStyle.color = upStateColor
+  baseSeries[0].itemStyle.color0 = downStateColor
+  baseSeries[0].itemStyle.borderColor = upStateColor
+  baseSeries[0].itemStyle.borderColor0 = downStateColor
+  baseOpt.series = baseSeries
+
+  handleMaAndVolSeries(baseOpt, iChartOpt, data, { upStateColor, downStateColor }, chartInstance)
+}
+
+// 用于计算相关的平均值
+function calculateMA(dayCount, data) {
+  const result = []
+  for (let i = 0, len = data.length; i < len; i++) {
+    if (i < dayCount) {
+      result.push('')
+      continue
+    }
+    let sum = 0
+    for (let j = 0; j < dayCount; j++) {
+      sum += +data[i - j][1]
+    }
+    result.push(Number((sum / dayCount).toFixed(2)))
+  }
+  return result
+}
+
+function getLineChartData(data, total, ma, xAxisKey) {
+  const maData = {}
+  ma.forEach((item) => {
+    const data = calculateMA(item, total)
+    maData[`MA${item}`] = data
+  })
+  const lineData = data.map((obj, index) => {
+    const newObj = {
+      [xAxisKey]: obj[xAxisKey]
+    }
+    for (const i in maData) {
+      newObj[i] = maData[i][index]
+    }
+    return newObj
+  })
+  return lineData
+}
+
+function getBarChartData(data, xAxisKey) {
+  const barData = data.map((obj) => {
+    const newObj = {
+      [xAxisKey]: obj[xAxisKey],
+      volume: obj.volume
+    }
+    return newObj
+  })
+  return barData
+}
+
+function handleMaSeries(baseOpt, iChartOpt, data, total, inerMa, xAxisKey, chartInstance) {
+  const lineChartData = getLineChartData(data, total, inerMa, xAxisKey)
+  const newIchartOption = { ...iChartOpt, data: lineChartData }
+  const lineChart = new LineChart(newIchartOption, {}, chartInstance)
+  const lineBaseOption = lineChart.getOption()
+  const lineSeries = lineBaseOption.series
+  for (let i = 0; i < lineSeries.length; i++) {
+    baseOpt.series.push(lineSeries[i])
+  }
+}
+
+function handleVol(baseOpt, iChartOpt, data, xAxisKey, { upStateColor, downStateColor }, total, chartInstance) {
+  const barChartData = getBarChartData(data, xAxisKey)
+  const newIchartOption = { ...iChartOpt, data: barChartData }
+  const barChart = new BarChart(newIchartOption, {}, chartInstance)
+  // 获取生成的相应的barchart配置
+  const barBaseOption = barChart.getOption()
+  const barSeries = barBaseOption.series[0]
+  barSeries.itemStyle.color = (params) => {
+    const { dataIndex } = params
+    const curTimeData = total[dataIndex]
+    return curTimeData[0] > curTimeData[1] ? downStateColor : upStateColor
+  }
+  barSeries.xAxisIndex = 1
+  barSeries.yAxisIndex = 1
+  baseOpt.series.push(barSeries)
+}
+
+function handleMaAndVolSeries(baseOpt, iChartOpt, inerData, { upStateColor, downStateColor }, chartInstance) {
+  const { MA, volume, data } = iChartOpt
+  const { total } = inerData
+  const xAxisKey = xkey(iChartOpt)
+  if (MA && MA.length !== 0) {
+    handleMaSeries(baseOpt, iChartOpt, data, total, MA, xAxisKey, chartInstance)
+  }
+  if (volume) {
+    handleVol(baseOpt, iChartOpt, data, xAxisKey, { upStateColor, downStateColor }, total, chartInstance)
+  }
+}
+
+export { handleSeries, handleMaSeries }
diff --git a/packages/vue/src/chart/chart-core/base/components/CandlestickChart/index.ts b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/index.ts
new file mode 100644
index 000000000..824ffbd70
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/index.ts
@@ -0,0 +1,55 @@
+import init from '../../option/init'
+import { event } from '../../util/event'
+import RectCoordSys from '../../option/RectSys'
+import {
+  handleData,
+  handleAxis,
+  handleDataZoom,
+  handleTooltip,
+  handleLegend,
+  handleGrid,
+  handleAxisPointer
+} from './hanleOption'
+import { handleSeries } from './hanleSeries'
+import { mergeSeries } from '../../util/merge'
+
+class CandlestickChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    this.chartInstance = chartInstance
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption()
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption
+    const volume = this.iChartOption.volume
+    const data = handleData(iChartOption)
+    if (!data) return
+    handleSeries(this.baseOption, iChartOption, data, this.chartInstance)
+    RectCoordSys(this.baseOption, iChartOption)
+    // 装载除series之外的其他配置
+    handleGrid(this.baseOption, iChartOption)
+    // 平均线和成交量,在这部分对ma和vol的图表进行处理
+    handleAxis(this.baseOption, data, volume)
+    handleTooltip(this.baseOption, iChartOption)
+    handleDataZoom(this.baseOption, iChartOption)
+    handleLegend(this.baseOption, iChartOption)
+    handleAxisPointer(this.baseOption)
+    event(this.chartInstance, iChartOption.event)
+    mergeSeries(iChartOption, this.baseOption)
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption(option) {
+    this.baseOption = option
+  }
+}
+
+export default CandlestickChart
diff --git a/packages/vue/src/chart/chart-core/base/components/FunnelChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/FunnelChart/chartToken.ts
new file mode 100644
index 000000000..229f7d4b0
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/FunnelChart/chartToken.ts
@@ -0,0 +1,18 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    itemStyle: { borderColor: colorBorder },
+    label: { color: colorLabel }
+  } = Theme.config.FunnelChart
+
+  return {
+    labelColor: colorLabel,
+    borderColor: colorBorder
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/FunnelChart/handleLegend.ts b/packages/vue/src/chart/chart-core/base/components/FunnelChart/handleLegend.ts
new file mode 100644
index 000000000..098ea471b
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/FunnelChart/handleLegend.ts
@@ -0,0 +1,37 @@
+import cloneDeep from '../../util/cloneDeep'
+
+// 设置legend顺序
+export function setLegend(baseOption) {
+  let dataUnit = cloneDeep(baseOption.series[0].data)
+  let data = []
+  let sort = []
+  if (dataUnit !== undefined) {
+    data = dataUnit
+    sort = baseOption.series[0].sort
+  }
+  let legendData = sortData(sort, data)
+  return legendData
+}
+
+function sortData(sort, data) {
+  let legendName = []
+  // 升序
+  if (sort === 'ascending') {
+    const sortedData = [...data].sort((a, b) => {
+      return a.value - b.value
+    })
+    sortedData.forEach((item) => {
+      legendName.push(item.name)
+    })
+  }
+  // 降序
+  else {
+    const sortedData = [...data].sort((a, b) => {
+      return b.value - a.value
+    })
+    sortedData.forEach((item) => {
+      legendName.push(item.name)
+    })
+  }
+  return legendName
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/FunnelChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/FunnelChart/handleSeries.ts
new file mode 100644
index 000000000..1757e4cea
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/FunnelChart/handleSeries.ts
@@ -0,0 +1,141 @@
+import cloneDeep from '../../util/cloneDeep'
+import chartToken from './chartToken'
+
+export const seriesInit = {
+  type: 'funnel',
+  width: '80%',
+  min: 0,
+  max: 100,
+  minSize: '0%',
+  maxSize: '100%',
+  left: 'center',
+  top: 60,
+  bottom: 60,
+  funnelAlign: 'center',
+  orient: 'vertical',
+  sort: 'descending',
+  gap: 10,
+  itemStyle: {
+    borderColor: '',
+    borderWidth: 1
+  },
+  label: {},
+  data: []
+}
+
+const SIZE_NAME = ['width', 'height', 'min', 'max', 'minSize', 'maxSize']
+const POSITION_NAME = ['left', 'right', 'top', 'bottom', 'funnelAlign', 'orient']
+
+/**
+ * 组装echarts所需要的series
+ * @param {传入数据} iChartOption
+ * @returns
+ */
+export function setSeries(iChartOption) {
+  const { data, sort, size, position, gap } = iChartOption
+  let series = []
+  const selfSeries = iChartOption.series
+  // 处理series里多个数据的优先级配置方法
+  if (selfSeries !== undefined && selfSeries.length !== 0) {
+    selfSeries.forEach((seriesItem) => {
+      const seriesUnit = seriesItem
+      // 处理size的优先级
+      for (let index = 0; index < SIZE_NAME.length; index++) {
+        const name = SIZE_NAME[index]
+        if (seriesUnit[name] === undefined) {
+          if (iChartOption.size && iChartOption.size[name]) {
+            // 下面说明一级属性的赋值给series
+            seriesUnit[name] = iChartOption.size[name]
+          } else {
+            // series的不存在size，把初始化的赋值给series
+            seriesUnit[name] = seriesInit[name]
+          }
+        }
+      }
+      // 处理position的优先级
+      for (let index = 0; index < POSITION_NAME.length; index++) {
+        const name = POSITION_NAME[index]
+        if (seriesUnit[name] === undefined) {
+          if (iChartOption.position && iChartOption.position[name]) {
+            // 下面说明一级属性的赋值给series
+            seriesUnit[name] = iChartOption.position[name]
+          } else {
+            // series的不存在position，把初始化的赋值给series
+            seriesUnit[name] = seriesInit[name]
+          }
+        }
+      }
+      // 处理label
+      const defaultLabel = {
+        show: true,
+        color: chartToken.labelColor
+      }
+      seriesUnit.label = Object.assign(defaultLabel, seriesUnit.label)
+      // 处理gap、sort的优先级
+      const config = ['gap', 'sort']
+      for (let index = 0; index < config.length; index++) {
+        const name = config[index]
+        if (seriesUnit[name] === undefined) {
+          if (iChartOption && iChartOption[name]) {
+            // 把一级属性值赋给series
+            seriesUnit[name] = iChartOption[name]
+          } else {
+            // 把初始化的赋值给series
+            seriesUnit[name] = seriesInit[name]
+          }
+        }
+      }
+      // 处理图形边框颜色
+      const defaultItemStyle = {
+        borderColor: chartToken.borderColor,
+        borderWidth: 1
+      }
+      seriesUnit.itemStyle = Object.assign(defaultItemStyle, seriesUnit.itemStyle)
+    })
+    series = selfSeries
+  } else {
+    // 处理单个数据的默认配置
+    const seriesUnit = cloneDeep(seriesInit)
+    data && (seriesUnit.data = data)
+    // 配置项变成一级属性，处理sort和gap
+    sort && (seriesUnit.sort = sort)
+    gap && (seriesUnit.gap = gap)
+    // 配置漏斗图的label
+    setLabel(seriesUnit, iChartOption)
+    // 处理漏斗图的size和position
+    setSize(size, seriesUnit)
+    setPosition(position, seriesUnit)
+    // 处理图形边框颜色
+    seriesUnit.itemStyle.borderColor = chartToken.borderColor
+    series.push(seriesUnit)
+  }
+  return series
+}
+
+// 处理漏斗图的大小
+function setSize(size, seriesUnit) {
+  for (let index = 0; index < SIZE_NAME.length; index++) {
+    const name = SIZE_NAME[index]
+    if (size !== undefined && size[name] !== undefined) {
+      seriesUnit[name] = size[name]
+    }
+  }
+}
+
+// 处理漏斗图的位置
+function setPosition(position, seriesUnit) {
+  for (let index = 0; index < POSITION_NAME.length; index++) {
+    const name = POSITION_NAME[index]
+    if (position !== undefined && position[name] !== undefined) {
+      seriesUnit[name] = position[name]
+    }
+  }
+}
+
+// 设置label的属性主要是formatter
+function setLabel(seriesUnit, iChartOption) {
+  seriesUnit.label.color = chartToken.labelColor
+  seriesUnit.label.position = 'inside'
+  seriesUnit.label.show = true
+  Object.assign(seriesUnit.label, iChartOption.label)
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/FunnelChart/index.ts b/packages/vue/src/chart/chart-core/base/components/FunnelChart/index.ts
new file mode 100644
index 000000000..a250933a5
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/FunnelChart/index.ts
@@ -0,0 +1,37 @@
+import init from '../../option/init'
+import { event } from '../../util/event'
+import { setLegend } from './handleLegend.js'
+import { setSeries } from './handleSeries.js'
+import PolarCoordSys from '../../option/PolarSys'
+
+const CHART_NAME = 'FunnelChart'
+
+export default class FunnelChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance)
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption
+    // 装载除series之外的其他配置
+    PolarCoordSys(this.baseOption, iChartOption, CHART_NAME)
+    // 组装series
+    this.baseOption.series = setSeries(iChartOption)
+    // 组装legend.data
+    // eslint-disable-next-line no-unused-expressions
+    this.baseOption.legend.data ? this.baseOption.legend.data : setLegend(this.baseOption)
+    // 配置图表事件
+    if (iChartOption.event) {
+      event(chartInstance, iChartOption.event)
+    }
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/GaugeChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/GaugeChart/BaseOption.ts
new file mode 100644
index 000000000..53a7c9753
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/GaugeChart/BaseOption.ts
@@ -0,0 +1,11 @@
+import BaseOption from '../../option/base'
+
+BaseOption.series = []
+BaseOption.tooltip = {
+  show: true,
+  trigger: 'item',
+  formatter: '{b}: {c} ({d}%)'
+}
+BaseOption.legend = {}
+
+export default BaseOption
diff --git a/packages/vue/src/chart/chart-core/base/components/GaugeChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/GaugeChart/chartToken.ts
new file mode 100644
index 000000000..59c9dd85e
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/GaugeChart/chartToken.ts
@@ -0,0 +1,31 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    axisLine: {
+      lineStyle: { color: colorAxisLine }
+    },
+    splitLine: {
+      lineStyle: { color: colorAxisSplitLine }
+    },
+    axisLabel: { color: colorTextSecondary },
+    detail: {
+      rich: { color: colorTextPrimary }
+    }
+  } = Theme.config.GaugeChart
+
+  const { colorState } = Theme.config
+
+  return {
+    marklineColor: colorState.colorError,
+    axisLineColor: colorAxisLine,
+    splitLineColor: colorAxisSplitLine,
+    axisLabelColor: colorTextSecondary,
+    detailRichColor: colorTextPrimary
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/GaugeChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/GaugeChart/handleOptipn.ts
new file mode 100644
index 000000000..9eae3ebb0
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/GaugeChart/handleOptipn.ts
@@ -0,0 +1,9 @@
+import tooltip from '../../option/config/tooltip'
+
+/**
+ * 配置鼠标悬浮提示框
+ */
+export function handleTooltip(iChartOpt, chartName) {
+  const basicTip = tooltip(iChartOpt, chartName)
+  return basicTip
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/GaugeChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/GaugeChart/handleSeries.ts
new file mode 100644
index 000000000..58d7557b5
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/GaugeChart/handleSeries.ts
@@ -0,0 +1,479 @@
+import { codeToHex, codeToRGB } from '../../util/color'
+import cloneDeep from '../../util/cloneDeep'
+import chartToken from './chartToken'
+
+export const emptySeriesUnit = {
+  type: 'gauge',
+  startAngle: 0,
+  endAngle: 0,
+  center: ['50%', '50%'],
+  radius: '50%',
+  splitNumber: 2,
+  axisLine: { show: false },
+  axisLabel: { show: false },
+  splitLine: { show: false },
+  itemStyle: { show: false },
+  axisTick: { show: false },
+  pointer: { show: false },
+  detail: { show: false },
+  title: { show: false },
+  data: []
+}
+
+export const seriesInit = {
+  name: '',
+  type: 'gauge',
+  // 仪表盘轨道底色
+  axisLine: {
+    roundCap: true,
+    lineStyle: {
+      width: 10
+    }
+  },
+  // 仪表盘进度条
+  progress: {
+    show: true,
+    roundCap: true,
+    width: 10
+  },
+  // 大刻度数量
+  splitNumber: 4,
+  // 大刻度线样式
+  splitLine: {
+    distance: 0,
+    length: 10,
+    lineStyle: {
+      width: 2
+    }
+  },
+  // 大刻度数值
+  axisLabel: {
+    distance: 16,
+    fontSize: 14,
+    color: 'red'
+  },
+  // 小刻度线样式
+  axisTick: {
+    distance: 0,
+    length: 10,
+    lineStyle: {
+      color: 'transparent',
+      width: 2
+    }
+  },
+  // 指针样式
+  pointer: {
+    show: false,
+    icon: 'path://M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z',
+    length: '10%',
+    width: 16,
+    offsetCenter: [0, '-108%']
+  },
+  title: {
+    show: false
+  },
+  detail: {
+    valueAnimation: true
+  },
+  data: []
+}
+
+// 设置刻度线现实与否/刻度线数量
+function handleSplitLine(iChartOption, seriesUnit) {
+  if (iChartOption.splitLine) {
+    if (iChartOption.splitLine.show !== undefined) {
+      seriesUnit.splitLine.show = iChartOption.splitLine.show
+    } else {
+      seriesUnit.splitLine.show = true
+    }
+  } else {
+    seriesUnit.splitLine.show = true
+  }
+  if (seriesUnit.splitLine.show) {
+    seriesUnit.splitNumber = iChartOption.splitNumber || 4
+  } else {
+    seriesUnit.splitNumber = -1
+  }
+  if (iChartOption.itemStyle) {
+    const { lineStyle, width } = iChartOption.itemStyle
+    seriesUnit.splitLine.length = (lineStyle && lineStyle.length) || width || 10
+    seriesUnit.splitLine.distance = width ? width * -1 : -3
+  } else {
+    seriesUnit.splitLine.length = 10
+    seriesUnit.splitLine.distance = -3
+  }
+  if (iChartOption.itemStyle && iChartOption.itemStyle.lineStyle) {
+    if (iChartOption.itemStyle.lineStyle.color) {
+      seriesUnit.splitLine.lineStyle.color = iChartOption.itemStyle.lineStyle.color
+    } else {
+      seriesUnit.splitLine.lineStyle.color = chartToken.splitLineColor
+    }
+    seriesUnit.splitLine.lineStyle.width = iChartOption.itemStyle.lineStyle.width || 4
+  }
+}
+
+// 根据主题设置刻度线的颜色
+function handleTheme(iChartOption) {
+  const { orbitalColor } = iChartOption
+  seriesInit.axisLine.lineStyle.color = [[1, orbitalColor || chartToken.axisLineColor]]
+  seriesInit.splitLine.lineStyle.color = chartToken.splitLineColor
+  seriesInit.axisLabel.color = chartToken.axisLabelColor
+}
+
+// 配置仪表盘中心文本
+function handleDetail(seriesUnit, text, data) {
+  seriesUnit.detail.formatter =
+    text.formatter ||
+    function (value) {
+      return `{value|${value}}\n{name|${data[0].name}}`
+    }
+  seriesUnit.detail.offsetCenter = text.offset || [0, 0]
+  seriesUnit.detail.rich = text.formatterStyle || {
+    value: {
+      fontSize: 60,
+      fontWeight: 'bolder',
+      color: chartToken.detailRichColor
+    },
+    name: {
+      fontSize: 14,
+      color: chartToken.detailRichColor,
+      padding: [24, 0, 0, 0]
+    }
+  }
+}
+
+// 设置仪表盘进度条宽度
+function handleProgress(seriesUnit, iChartOption, data) {
+  const { itemStyle } = iChartOption
+  seriesUnit.progress.width = itemStyle ? (itemStyle.width ? itemStyle.width : 10) : 10
+  if (data && data.length !== 0 && data[0].value === 0) {
+    seriesUnit.progress.roundCap = false
+  }
+}
+
+// 设置仪表盘进度条宽度
+function handleAxisLine(seriesUnit, iChartOption) {
+  const { itemStyle } = iChartOption
+  seriesUnit.axisLine.lineStyle.width = itemStyle ? (itemStyle.width ? itemStyle.width : 10) : 10
+}
+
+// 轨道颜色分块
+function setSplitColor(series, splitColor) {
+  series.axisLine.lineStyle.color = splitColor
+  series.axisLine.roundCap = false
+  series.progress.show = false
+  series.pointer.itemStyle = { color: 'auto' }
+}
+
+// 给series配置progress渐变色，并考虑纯色情况
+function setGradientColor(series, gradientColor) {
+  const linearColor = {
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: 1 / (series.data[0].value / series.max),
+    y2: 0,
+    colorStops: gradientColor.map((item, index) => {
+      return {
+        offset: index === 0 ? 0 : index / (gradientColor.length - 1),
+        color: item
+      }
+    }),
+    global: false
+  }
+  // 考虑纯色情况
+  if (linearColor.colorStops.length === 1) {
+    linearColor.colorStops.push({
+      offset: 1,
+      color: gradientColor[0]
+    })
+  }
+  series.progress.itemStyle = { color: linearColor }
+  series.pointer.itemStyle = { color: linearColor }
+}
+
+// 轨道颜色分块外环光晕效果
+function setOuterHalo(seriesHalo, splitColor) {
+  const temp = cloneDeep(emptySeriesUnit)
+  const outerGaugeHalo = cloneDeep(temp)
+  outerGaugeHalo.startAngle = seriesHalo.startAngle
+  outerGaugeHalo.endAngle = seriesHalo.endAngle
+  outerGaugeHalo.center = seriesHalo.center
+  const distance = seriesHalo.pointer.lineDistance.slice(0, seriesHalo.pointer.lineDistance.length - 1) - 0
+  outerGaugeHalo.radius = `${parseFloat(seriesHalo.radius) + distance}%`
+  outerGaugeHalo.axisLine = {
+    lineStyle: {
+      width: 1,
+      opacity: 0.3,
+      color: splitColor
+    }
+  }
+  outerGaugeHalo.splitNumber = splitColor.length
+  outerGaugeHalo.splitLine = {
+    // 不同颜色之间的中缝
+    distance: 8,
+    length: 10,
+    lineStyle: {
+      width: 2,
+      color: ''
+    }
+  }
+  // 2022/7/18 暂时把分割颜色屏蔽掉 darkColor、lightColor
+  outerGaugeHalo.splitLine.lineStyle.color = 'transparent'
+
+  return outerGaugeHalo
+}
+
+// progress渐变色外环光晕效果
+function setProgressOuterHalo(series, gradientColor, mask, iChartOption) {
+  const temp = cloneDeep(emptySeriesUnit)
+  const linearColor = {
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: 1,
+    y2: 0,
+    colorStops: gradientColor.map((item, index) => {
+      return {
+        offset: index === 0 ? 0 : index / (gradientColor.length - 1),
+        color: item
+      }
+    }),
+    global: false
+  }
+  const outerGauge = cloneDeep(temp)
+  outerGauge.startAngle = series.startAngle
+  outerGauge.endAngle = series.endAngle
+  // 是否开启蒙层及角度
+  if (mask && mask.show) {
+    outerGauge.startAngle = series.startAngle - 5
+    outerGauge.endAngle = series.endAngle + 5
+  }
+  outerGauge.center = series.center
+  const distance = series.pointer.lineDistance.slice(0, series.pointer.lineDistance.length - 1) - 0
+  outerGauge.radius = `${parseFloat(series.radius) + distance}%`
+  outerGauge.axisLine = {
+    lineStyle: {
+      width: 1,
+      opacity: 0.3,
+      color: [[1, linearColor]]
+    }
+  }
+  // 开启蒙层outerGauge原先的光晕线变为蒙层区域，配置样式
+  if (mask && mask.show) {
+    const { pointerStyle } = iChartOption
+    outerGauge.axisLine = {
+      lineStyle: {
+        width: mask.width || ((pointerStyle && pointerStyle.lineDistance) || '5%').replace('%', '') * 2.5,
+        opacity: 0.1,
+        color: [[1, linearColor]]
+      }
+    }
+  }
+  return outerGauge
+}
+
+// 蒙层开启后，配置高亮光晕线
+function setHightLightGauge(series, iChartOption) {
+  const { gradientColor, mask } = iChartOption
+  // 是否开启蒙层
+  if (mask && mask.show) {
+    const { pointerStyle } = iChartOption
+    const outerGauge = cloneDeep(emptySeriesUnit)
+    outerGauge.startAngle = series.startAngle - 5
+    outerGauge.endAngle = series.endAngle + 5
+    outerGauge.center = series.center
+    const seriesRadius = series.radius.replace('%', '')
+    const pointerRadius = (pointerStyle && pointerStyle.lineDistance) || '5%'
+    outerGauge.radius = `${seriesRadius - 0 + (pointerRadius.replace('%', '') - 0)}%`
+    if (mask.hightLight !== false) {
+      mask.hightLight = true
+    }
+    // 是否开启蒙层高亮
+    if (mask && mask.hightLight) {
+      const linearColor = {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 1,
+        y2: 0,
+        colorStops: gradientColor.map((item, index) => {
+          return {
+            offset: index === 0 ? 0 : index / (gradientColor.length - 1),
+            color: codeToRGB(codeToHex(item), 0.5)
+          }
+        }),
+        global: false
+      }
+      const max = iChartOption.max || 100
+      outerGauge.axisLine = {
+        lineStyle: {
+          width: 1,
+          opacity: 1,
+          color: [
+            // [0.28, linearColor],
+            [(iChartOption.data[0].value - (5 * max) / 100) / max, codeToRGB(codeToHex(gradientColor[0]), 0.5)],
+            [(iChartOption.data[0].value + (5 * max) / 100) / max, codeToRGB(codeToHex(gradientColor[0]), 1)],
+            [1, linearColor]
+          ]
+        }
+      }
+    } else {
+      const linearColor = {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 1,
+        y2: 0,
+        colorStops: gradientColor.map((item, index) => {
+          return {
+            offset: index === 0 ? 0 : index / (gradientColor.length - 1),
+            color: item
+          }
+        }),
+        global: false
+      }
+      outerGauge.axisLine = {
+        lineStyle: {
+          width: 1,
+          opacity: 0.3,
+          color: [[1, linearColor]]
+        }
+      }
+    }
+    return outerGauge
+  }
+}
+
+// 添加一个空series，使用该空series的pointer来作为阈值线的红线
+function setMarkLine(series, markLine, marklineColor) {
+  const temp = cloneDeep(emptySeriesUnit)
+  const markGauge = cloneDeep(temp)
+  markGauge.name = 'markLine'
+  markGauge.min = series.min
+  markGauge.max = series.max
+  markGauge.startAngle = series.startAngle
+  markGauge.endAngle = series.endAngle
+  markGauge.center = series.center
+  markGauge.radius = series.radius
+  markGauge.animation = false
+  markGauge.pointer = {
+    icon: 'path://M0 0 L30 0 L30 100 L0 100 Z',
+    width: 3,
+    length: 15,
+    offsetCenter: [0, '-86%'],
+    itemStyle: {
+      color: marklineColor
+    }
+  }
+  markGauge.data = [{ value: markLine }]
+  return markGauge
+}
+
+function handleOther(iChartOption, seriesUnit, series, data) {
+  const { marklineColor } = chartToken
+  if (iChartOption.splitColor && iChartOption.splitColor.length > 0) {
+    setSplitColor(seriesUnit, iChartOption.splitColor)
+  } else if (iChartOption.gradientColor && iChartOption.gradientColor.length > 0) {
+    setGradientColor(seriesUnit, iChartOption.gradientColor)
+  }
+  // 若有阈值线，超过阈值线时为告警红色
+  if (iChartOption.markLine && data[0].value >= iChartOption.markLine) {
+    seriesUnit.pointer.itemStyle = { color: marklineColor }
+    seriesUnit.progress.itemStyle = { color: marklineColor }
+  }
+  series.push(seriesUnit)
+  // 轨道颜色分块、progress外环光晕效果
+  if (iChartOption.splitColor && iChartOption.splitColor.length > 0) {
+    const outerGauge = setOuterHalo(seriesUnit, iChartOption.splitColor)
+    // 是否展示外层光晕
+    if (iChartOption.itemStyle && iChartOption.itemStyle.outerGauge) {
+      if (iChartOption.itemStyle.outerGauge.show === false) {
+        outerGauge.axisLine.lineStyle.width = 0
+        outerGauge.axisLine.lineStyle.opacity = 0
+      }
+    }
+    series.push(outerGauge)
+  } else if (iChartOption.gradientColor && iChartOption.gradientColor.length > 1) {
+    const outerGauge = setProgressOuterHalo(seriesUnit, iChartOption.gradientColor, iChartOption.mask, iChartOption)
+    // 是否展示外层光晕
+    if (iChartOption.itemStyle && iChartOption.itemStyle.outerGauge) {
+      if (!iChartOption.itemStyle.outerGauge.show) {
+        outerGauge.axisLine.lineStyle.width = 0
+        outerGauge.axisLine.lineStyle.opacity = 0
+      }
+    }
+    series.push(outerGauge)
+    // 蒙层及高亮
+    const hightLightGauge = setHightLightGauge(seriesUnit, iChartOption)
+    series.push(hightLightGauge)
+  }
+  // 阈值线
+  if (iChartOption.markLine) {
+    const markGauge = setMarkLine(seriesUnit, iChartOption.markLine, marklineColor)
+    series.push(markGauge)
+  }
+}
+
+/**
+ * 组装echarts所需要的series
+ * @param {主题} theme
+ * @param {数据} data
+ * @returns
+ */
+function handleSeries(iChartOption) {
+  const seriesName = iChartOption.seriesName
+  const data = iChartOption.data
+  const text = iChartOption.text || {}
+  const chartPosition = iChartOption.position || iChartOption.chartPosition || {}
+  const axisLabelStyle = iChartOption.axisLabelStyle || {}
+  const { pointerStyle, pointer, min, max, startAngle, endAngle, silent } = iChartOption
+  // 更改仪表盘轨道底色
+  handleTheme(iChartOption)
+  // 更换刻度文本颜色、字号、字体宽度等样式
+  if (axisLabelStyle.color) {
+    seriesInit.axisLabel.color = axisLabelStyle.color
+  } else {
+    seriesInit.axisLabel.color = chartToken.axisLabelColor
+  }
+  seriesInit.axisLabel.distance = axisLabelStyle.distance || 16
+  seriesInit.axisLabel.fontWeight = axisLabelStyle.fontWeight || 400
+  seriesInit.axisLabel.fontSize = axisLabelStyle.fontSize || 14
+  // 组装数据
+  const series = []
+  const seriesUnit = cloneDeep(seriesInit)
+  seriesUnit.name = seriesName || iChartOption.name
+  seriesUnit.data = data
+  // 控制刻度线及刻度文本是否展示;大刻度数量以及判断刻度文本是否显示
+  handleSplitLine(iChartOption, seriesUnit)
+  // 中间文本
+  handleDetail(seriesUnit, text, data)
+  // 进度条宽度
+  handleProgress(seriesUnit, iChartOption, data)
+  handleAxisLine(seriesUnit, iChartOption)
+  // 指针
+  seriesUnit.pointer.show = pointer || false
+  seriesUnit.pointer.width = (pointerStyle && pointerStyle.width) || 16
+  seriesUnit.pointer.length = (pointerStyle && pointerStyle.length) || '10%'
+  seriesUnit.pointer.offsetCenter[1] = (pointerStyle && pointerStyle.pointerDistance) || '-108%'
+  seriesUnit.pointer.lineDistance = (pointerStyle && pointerStyle.lineDistance) || '5%'
+  // 位置
+  seriesUnit.center = chartPosition.center || ['50%', '50%']
+  // 半径
+  seriesUnit.radius = chartPosition.radius || '70%'
+  // 最小值
+  seriesUnit.min = min || 0
+  // 最大值
+  seriesUnit.max = max || 100
+  // 开始角度
+  seriesUnit.startAngle = startAngle === undefined ? 225 : startAngle
+  // 结束角度
+  seriesUnit.endAngle = endAngle === undefined ? -45 : endAngle
+  // 轨道颜色分块、progress渐变只能二选一
+  handleOther(iChartOption, seriesUnit, series, data)
+  // 是否关闭hover态的效果，默认为false
+  series[0].silent = silent || false
+  return series
+}
+
+export default handleSeries
diff --git a/packages/vue/src/chart/chart-core/base/components/GaugeChart/index.ts b/packages/vue/src/chart/chart-core/base/components/GaugeChart/index.ts
new file mode 100644
index 000000000..d8aea46a3
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/GaugeChart/index.ts
@@ -0,0 +1,42 @@
+import BaseOption from './BaseOption'
+import handleSeries from './handleSeries'
+import cloneDeep from '../../util/cloneDeep'
+import { handleTooltip } from './handleOptipn'
+import { event } from '../../util/event'
+import { mergeSeries } from '../../util/merge'
+import init from '../../option/init'
+
+const chartName = 'GaugeChart'
+class GaugeChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    this.baseOption = cloneDeep(BaseOption)
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(iChartOption, chartInstance)
+  }
+
+  updateOption(iChartOption, chartInstance) {
+    // 图表基础颜色
+    this.baseOption.color = iChartOption.color
+    // 图表鼠标悬浮提示框
+    this.baseOption.tooltip = handleTooltip(iChartOption, chartName)
+    // 赋值数据
+    this.baseOption.series = handleSeries(iChartOption, this.baseOption.color)
+    // 配置图表事件
+    event(chartInstance, iChartOption.event)
+    // 合并用户自定义series
+    this.baseOption.legend.show = false
+    mergeSeries(iChartOption, this.baseOption)
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption() {}
+}
+
+export default GaugeChart
diff --git a/packages/vue/src/chart/chart-core/base/components/GraphChart/index.ts b/packages/vue/src/chart/chart-core/base/components/GraphChart/index.ts
new file mode 100644
index 000000000..ecb9e2523
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/GraphChart/index.ts
@@ -0,0 +1,23 @@
+import merge from '../../util/merge'
+
+class GraphChart {
+  constructor(iChartOption) {
+    this.rootData = {}
+    this.baseOption = {}
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(iChartOption)
+  }
+
+  updateOption(iChartOption) {
+    // 兼容echarts属性
+    merge(this.baseOption, iChartOption)
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption() {}
+}
+
+export default GraphChart
diff --git a/packages/vue/src/chart/chart-core/base/components/HeatMapChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/BaseOption.ts
new file mode 100644
index 000000000..4fd2b5427
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/BaseOption.ts
@@ -0,0 +1,101 @@
+const BaseOption = {
+  visualMap: {
+    show: false,
+    dimension: 2,
+    type: '',
+    min: '',
+    max: '',
+    inRange: {
+      colorAlpha: [0, 1]
+    }
+  }
+}
+
+// 图表类型
+const CHARTTYPE = ['RectangularHeatMapChart', 'CalendarHeatMapChart', 'HexagonHeatMapChart']
+
+// 基础series
+const SERIESUNIT = {
+  RectangularHeatMapChart: {
+    type: 'scatter',
+    symbol: 'rect',
+    symbolSize: '',
+    cursor: 'pointer',
+    data: []
+  },
+  CalendarHeatMapChart: {
+    name: '',
+    type: 'heatmap',
+    cursor: 'pointer',
+    label: {
+      show: undefined,
+      color: ''
+    },
+    data: [],
+    emphasis: {
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: 'rgba(0, 0, 0, 0.5)'
+      }
+    },
+    itemStyle: {
+      borderColor: ''
+    },
+    progressive: 1000,
+    animation: false
+  },
+  HexagonHeatMapChart: {
+    type: 'custom',
+    name: '',
+    renderItem: undefined,
+    data: []
+  }
+}
+
+// 基础visualMap
+const VISUALMAPUNIT = {
+  RectangularHeatMapChart: {
+    show: false,
+    dimension: 2,
+    min: '',
+    max: '',
+    inRange: {
+      colorAlpha: [0, 1]
+    }
+  },
+  CalendarHeatMapChart: {
+    show: true,
+    dimension: 2,
+    min: '',
+    max: '',
+    inRange: {},
+    inverse: true,
+    itemWidth: 16,
+    itemHeight: 400,
+    text: [],
+    textStyle: {
+      color: '',
+      fontSize: 14
+    }
+  },
+  HexagonHeatMapChart: {
+    show: false,
+    type: 'continuous',
+    dimension: 2,
+    min: '',
+    max: '',
+    inRange: {
+      color: undefined
+    }
+  }
+}
+
+// 热力图的图元颜色
+const SYMBOLCOLOR = {
+  RectangularHeatMapChart: '#F43146',
+  CalendarHeatMapChart: '#1F55B5',
+  HexagonHeatMapChart: ['#FFFFFF', '#448DFF', '#4350EA', '#33307C ', '#242648', '#973152', '#F8364D']
+}
+export default BaseOption
+
+export { SYMBOLCOLOR, CHARTTYPE, SERIESUNIT, VISUALMAPUNIT }
diff --git a/packages/vue/src/chart/chart-core/base/components/HeatMapChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/chartToken.ts
new file mode 100644
index 000000000..03fc13147
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/chartToken.ts
@@ -0,0 +1,28 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    axisLine: {
+      lineStyle: { color: colorAxisLine }
+    },
+    visualMap: {
+      text: { color: colorTextPrimary }
+    },
+    label: { color: colorLabel },
+    custom: {
+      style: { stroke: colorBorder }
+    }
+  } = Theme.config.HeatMapChart
+
+  return {
+    axisLineColor: colorAxisLine,
+    visualMapTextColor: colorTextPrimary,
+    labelColor: colorLabel,
+    customStrokeColor: colorBorder
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleData.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleData.ts
new file mode 100644
index 000000000..0a390125f
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleData.ts
@@ -0,0 +1,127 @@
+/**
+ * 从数据中拿出key
+ */
+function getDataKeys(data) {
+  return Object.keys(data)
+}
+
+/**
+ * 处理矩阵热力图data
+ */
+function handleRectData(data) {
+  return data
+}
+
+/**
+ * 处理日历热力图类目data
+ */
+function handleCategoryName(data) {
+  const defaultArr = []
+  data.forEach((item) => {
+    if (!defaultArr.includes(item)) {
+      defaultArr.push(item)
+    }
+  })
+  return defaultArr
+}
+
+/**
+ * 处理日历热力图类目SeriesData
+ */
+function handlecalendarSeriesData(xAxisData, yAxisData, data, keyName) {
+  return data.map((item) => {
+    return [xAxisData.indexOf(item[keyName[0]]), yAxisData.indexOf(item[keyName[1]]), item[keyName[2]]]
+  })
+}
+
+/**
+ * 处理日历热力图data
+ */
+function handleCalendarData(data) {
+  const calendarData = []
+  const keyName = getDataKeys(data[0])
+  // x轴类目数据
+  const xCategoryName = data.map((item) => {
+    return item[keyName[0]]
+  })
+  // y轴类目数据
+  const yCategoryName = data.map((item) => {
+    return item[keyName[1]]
+  })
+  // 最终x轴数据
+  const xAxisData = handleCategoryName(xCategoryName)
+  // 最终x轴数据
+  const yAxisData = handleCategoryName(yCategoryName)
+  // 最终Series数据
+  const calendarSeriesData = handlecalendarSeriesData(xAxisData, yAxisData, data, keyName)
+  calendarData.push(xAxisData)
+  calendarData.push(yAxisData)
+  calendarData.push(calendarSeriesData)
+  return calendarData
+}
+
+// 计算六边形的具体中心坐标
+function computeCoordinates(arr, number, halfWidth, r) {
+  return arr.map((item, index) => {
+    // 一组六边形的个数，根据规范第一行的数量和第二行的数量相差1，即(number-1)+number为一组
+    const groupNumber = number * 2 - 1
+    // 将索引与index取余，用来判断在组的第一行
+    const remainder = index % groupNumber
+    // 判断所在的分组
+    const group = index / groupNumber
+    // 当前数据所在的组数
+    const lineNumber = Math.floor(group)
+    if (remainder < number - 1) {
+      return [(remainder + 1) * 2 * halfWidth, (1 + 3 * lineNumber) * r, item.value, r, item]
+    } else {
+      return [((remainder - number + 1) * 2 + 1) * halfWidth, (1 + 1.5 * (2 * lineNumber + 1)) * r, item.value, r, item]
+    }
+  })
+}
+
+/**
+ * 处理蜂窝热力图data
+ */
+function handleHexagonData(data, iChartOption, chartInstance) {
+  // 获取chart容器的宽高
+  const containerWidth = chartInstance.getWidth()
+  const containerHeight = chartInstance.getHeight()
+  // 处理的数据
+  const hexagonData = []
+  // 每行的图形个数
+  const number = iChartOption.quantity || 40
+  // x轴最大刻度
+  const xValue = containerWidth
+  // y轴最大刻度
+  const yValue = containerHeight
+  const initialData = data
+  const x = xValue / (2 * number)
+  // r为蜂窝的半径，圆的半径，正方形的边长的一半
+  const r = x / Math.sqrt(0.75)
+  // 圆心的半径
+  const coordinatesArr = computeCoordinates(initialData, number, x, r)
+  hexagonData.push(coordinatesArr)
+  hexagonData.push(xValue)
+  hexagonData.push(yValue)
+  hexagonData.push(r)
+  return hexagonData
+}
+
+// 数据的处理函数
+const dataHandler = {
+  RectangularHeatMapChart: handleRectData,
+  CalendarHeatMapChart: handleCalendarData,
+  HexagonHeatMapChart: handleHexagonData
+}
+
+/**
+ * 从数据中拿出chart需要的数据
+ */
+export function getData(type, iChartOption, chartInstance) {
+  // 蜂窝热力图数据特殊处理
+  if (iChartOption.data && iChartOption.data.length > 0) {
+    const chartData = dataHandler[type](iChartOption.data, iChartOption, chartInstance)
+    return chartData
+  }
+  return null
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleOptipn.ts
new file mode 100644
index 000000000..47069ce9b
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleOptipn.ts
@@ -0,0 +1,228 @@
+import { changeRgbaOpacity } from '../../util/color'
+import { SYMBOLCOLOR, CHARTTYPE } from './BaseOption'
+import xAxis from '../../option/config/xAxis'
+import yAxis from '../../option/config/yAxis'
+import grid from '../../option/config/grid'
+import tooltip from '../../option/config/tooltip'
+
+import defendXSS from '../../util/defendXSS'
+import chartToken from './chartToken'
+import merge from '../../util/merge'
+import { isArray } from '../../util/type'
+
+function setHeatMapDeaultIchartOption(iChartOpt) {
+  if (!iChartOpt.color) {
+    iChartOpt.color = SYMBOLCOLOR[iChartOpt.type]
+  }
+  const padding = iChartOpt.chartPadding || iChartOpt.padding
+  if (!padding && iChartOpt.type === CHARTTYPE[1]) {
+    iChartOpt.padding = iChartOpt.handle ? [50, 120, 20, 20] : [50, 30, 20, 20]
+  }
+}
+
+/**
+ * 矩形热力图自定义提示框回调函数
+ */
+function rectangularFormatter(params) {
+  const color = params.color
+  const data = params.data
+  const [x, y, z, name] = data
+  let htmlString = `<div style="margin-bottom:4px;">
+                                矩形热力图
+                            </div>`
+  htmlString += `<div style="margin-bottom:4px;">
+                            <span style="display:inline-block;width:10px;height:10px;
+                            margin-right:8px;border-style: solid;border-width:1px;
+                            border-color:${defendXSS(changeRgbaOpacity(color, 1))};background-color:${defendXSS(
+                              color
+                            )};"></span>
+                            <span>${defendXSS(name)}</span>
+                        </div>`
+  htmlString += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">x维度</span> 
+                                <span>${defendXSS(x)}</span>
+                            </div>`
+  htmlString += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">y维度</span> 
+                                <span>${defendXSS(y)}</span>
+                            </div>`
+  htmlString += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;
+                                min-width:60px;">透明度维度</span> 
+                                <span>${defendXSS(z)}</span>
+                            </div>`
+  return htmlString
+}
+
+/**
+ * 日历热力图自定义提示框回调函数
+ */
+function calendarFormatter(params) {
+  const color = params.color
+  const data = params.data
+  const name = params.name
+  const [, , z] = data
+  let htmlDom = `<div style="margin-bottom:4px;">
+                                日历热力图
+                            </div>`
+  htmlDom += `<div style="margin-bottom:4px;">
+                            <span style="display:inline-block;width:10px;
+                            height:10px;margin-right:8px;border-style: solid;
+                            border-width:1px;border-color:${defendXSS(
+                              changeRgbaOpacity(color, 1)
+                            )};background-color:${defendXSS(color)};"></span>
+                            <span>${defendXSS(name)}</span>
+                        </div>`
+  htmlDom += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;
+                                min-width:60px;">Value</span> 
+                                <span>${defendXSS(z)}</span>
+                            </div>`
+  return htmlDom
+}
+
+/**
+ * 蜂窝热力图自定义提示框回调函数
+ */
+function hexagonFormatter(params) {
+  const color = params.color
+  const data = params.data
+  const [x, y, z, name] = data
+  let html = `<div style="margin-bottom:4px;">
+                            蜂窝热力图
+                            </div>`
+  html += `<div style="margin-bottom:4px;">
+                            <span style="display:inline-block;width:10px;
+                            height:10px;margin-right:8px;border-style: solid;
+                            border-width:1px;border-color:${defendXSS(
+                              changeRgbaOpacity(color, 1)
+                            )};background-color:${defendXSS(color)};"></span>
+                            <span>${defendXSS(name)}</span>
+                        </div>`
+  html += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">x维度</span> 
+                                <span>${defendXSS(x)}</span>
+                            </div>`
+  html += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">y维度</span> 
+                                <span>${defendXSS(y)}</span>
+                            </div>`
+  html += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">颜色维度</span> 
+                                <span>${defendXSS(z)}</span>
+                            </div>`
+  return html
+}
+
+function handleRectangularXaxis(xAxis) {
+  xAxis.type = 'value'
+  xAxis.axisLine.show = false
+}
+
+function handleCalendarXaxis(xAxis, data) {
+  xAxis.data = data[0]
+  xAxis.axisTick.show = false
+  // 给文本设置左侧padding，使其不溢出
+  xAxis.axisLabel.padding = [0, 0, 0, (10 * data[0][0].length) / 2]
+}
+
+function handleHexagonXaxis(xAxis, data) {
+  xAxis.type = 'value'
+  xAxis.axisLine.show = false
+  xAxis.axisTick.show = false
+  xAxis.axisLabel.show = false
+  xAxis.min = 0
+  xAxis.max = data[1]
+}
+
+// x轴的处理函数
+const xAxisHandler = {
+  RectangularHeatMapChart: handleRectangularXaxis,
+  CalendarHeatMapChart: handleCalendarXaxis,
+  HexagonHeatMapChart: handleHexagonXaxis
+}
+
+function handleXaxis(baseOpt, type, data, iChartOpt, initIchartOpt) {
+  const basicXaxis = xAxis(iChartOpt)
+  xAxisHandler[type](basicXaxis[0], data)
+  baseOpt.xAxis = basicXaxis
+  if (initIchartOpt.xAxis) {
+    baseOpt.xAxis.forEach((item, index) => {
+      merge(item, isArray(initIchartOpt.xAxis) ? initIchartOpt.xAxis[index] : initIchartOpt.xAxis)
+    })
+  }
+}
+
+function handleCalendarYaxis(yAxis, data) {
+  yAxis.type = 'category'
+  yAxis.data = data[1]
+  yAxis.splitLine.show = false
+  yAxis.axisLabel.margin = 20
+  yAxis.axisLine = {
+    show: true,
+    lineStyle: {
+      width: 2,
+      color: chartToken.axisLineColor
+    }
+  }
+}
+
+function handleHexagonYaxis(yAxis, data) {
+  yAxis.axisLine.show = false
+  yAxis.splitLine.show = false
+  yAxis.axisLabel.show = false
+  yAxis.min = 0
+  yAxis.max = data[2]
+}
+
+// y轴的处理函数
+const yAxisHandler = {
+  CalendarHeatMapChart: handleCalendarYaxis,
+  HexagonHeatMapChart: handleHexagonYaxis
+}
+
+function handleYaxis(baseOpt, type, data, iChartOpt, initIchartOpt) {
+  const basicYaxis = yAxis(baseOpt, iChartOpt)
+  if (type !== CHARTTYPE[0]) {
+    yAxisHandler[type](basicYaxis[0], data, iChartOpt)
+  }
+  baseOpt.yAxis = basicYaxis
+  if (initIchartOpt.yAxis) {
+    baseOpt.yAxis.forEach((item, index) => {
+      merge(item, isArray(initIchartOpt.yAxis) ? initIchartOpt.yAxis[index] : initIchartOpt.yAxis)
+    })
+  }
+}
+
+function handleColor(baseOpt, iChartOpt) {
+  baseOpt.color = iChartOpt.color
+}
+
+function handleGrid(baseOpt, iChartOpt) {
+  const basicGrid = grid(iChartOpt)
+  baseOpt.grid = basicGrid
+}
+
+const heatMapTooltipFormatter = {
+  RectangularHeatMapChart: rectangularFormatter,
+  CalendarHeatMapChart: calendarFormatter,
+  HexagonHeatMapChart: hexagonFormatter
+}
+
+function handleTooltip(baseOpt, iChartOpt, type) {
+  const basicTooltip = tooltip(iChartOpt)
+  if (!iChartOpt.tipHtml && !iChartOpt?.tooltip?.formatter) {
+    basicTooltip.formatter = heatMapTooltipFormatter[type]
+  }
+  basicTooltip.trigger = 'item'
+  baseOpt.tooltip = basicTooltip
+}
+
+export { handleXaxis, setHeatMapDeaultIchartOption, handleYaxis, handleColor, handleGrid, handleTooltip }
diff --git a/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleSeries.ts
new file mode 100644
index 000000000..eead4e627
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleSeries.ts
@@ -0,0 +1,71 @@
+import { CHARTTYPE, SERIESUNIT } from './BaseOption'
+import cloneDeep from '../../util/cloneDeep'
+import chartToken from './chartToken'
+
+// 蜂窝的render函数
+function handleRenderItem(params, api) {
+  // 六边形中心坐标,根据画布的左上方定位
+  const center = api.coord([api.value(0), api.value(1)])
+  const points = [] // 六边形的坐标数组
+  const viewRadius = api.size([api.value(3), api.value(3)]) // 六边形的半径
+  let angle = Math.PI / 6 // 角度
+  for (let i = 0; i < 6; i++, angle += Math.PI / 3) {
+    points.push([center[0] + viewRadius[0] * Math.cos(angle), center[1] + viewRadius[0] * Math.sin(angle)])
+  }
+  return {
+    type: 'group',
+    children: [
+      {
+        type: 'polygon',
+        shape: {
+          points
+        },
+        style: {
+          stroke: chartToken.customStrokeColor,
+          fill: api.visual('color'),
+          lineWidth: 1
+        }
+      }
+    ]
+  }
+}
+
+function handleRectangularSeries(seriesUnit, iChartOpt, data) {
+  seriesUnit.symbolSize = iChartOpt.rectangleSize || 8
+  seriesUnit.data = data
+}
+
+function handleCalendarSeries(seriesUnit, iChartOpt, data) {
+  seriesUnit.data = data[2]
+  seriesUnit.itemStyle.borderColor = iChartOpt.borderColor || iChartOpt.color
+  seriesUnit.label.show = iChartOpt.showLabel ?? true
+  seriesUnit.label.color = chartToken.labelColor
+  if (iChartOpt.changeProperty && iChartOpt.changeProperty === 'color') {
+    seriesUnit.itemStyle.borderWidth = 0
+  }
+}
+
+function handleHexagonSeries(seriesUnit, data) {
+  seriesUnit.data = data[0]
+  seriesUnit.renderItem = handleRenderItem
+}
+
+const seriesHandler = {
+  RectangularHeatMapChart: handleRectangularSeries,
+  CalendarHeatMapChart: handleCalendarSeries,
+  HexagonHeatMapChart: handleHexagonSeries
+}
+
+function handleSeries(baseOpt, iChartOpt, data, type) {
+  const series = []
+  const seriesItem = cloneDeep(SERIESUNIT[type])
+  // 设置具体属性
+  if (type === CHARTTYPE[2]) {
+    seriesHandler[type](seriesItem, data)
+  } else {
+    seriesHandler[type](seriesItem, iChartOpt, data)
+  }
+  series.push(seriesItem)
+  baseOpt.series = series
+}
+export { handleSeries }
diff --git a/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleVisualMap.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleVisualMap.ts
new file mode 100644
index 000000000..180ff5115
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleVisualMap.ts
@@ -0,0 +1,62 @@
+import min from '../../util/sort/min'
+import max from '../../util/sort/max'
+import { VISUALMAPUNIT, CHARTTYPE } from './BaseOption'
+import cloneDeep from '../../util/cloneDeep'
+import merge from '../../util/merge'
+import chartToken from './chartToken'
+
+/**
+ * 设置日历热力图视觉滑块控制手柄
+ */
+function handleCalendar(iChartOption, visualMapItem, maxValue, minValue) {
+  visualMapItem.show = !!iChartOption.handle
+  if (iChartOption.handle) {
+    visualMapItem.inverse = !!iChartOption.handle.inverse
+    visualMapItem.text = iChartOption.handle.text || [maxValue, minValue]
+    visualMapItem.orient = iChartOption.handle.orient || 'vertical'
+    visualMapItem.calculable = !!iChartOption.handle.calculable
+    visualMapItem.textStyle.color = chartToken.visualMapTextColor
+    visualMapItem.itemWidth = iChartOption.handle.width || 20
+    visualMapItem.itemHeight = iChartOption.handle.height || 400
+    if (iChartOption.handle.position) {
+      merge(visualMapItem, iChartOption.handle.position)
+    } else {
+      visualMapItem.right = '4%'
+      visualMapItem.bottom = '6%'
+    }
+  }
+  if (!iChartOption.changeProperty || iChartOption.changeProperty === 'opcity') {
+    visualMapItem.inRange = { opacity: [0, 1] }
+  } else {
+    visualMapItem.inRange = { color: iChartOption.color }
+  }
+}
+
+/**
+ * 组装echarts所需要的series
+ */
+export function setVisualMap(baseOpt, type, data, iChartOption) {
+  const visualMap = []
+  const visualMapItem = cloneDeep(VISUALMAPUNIT[type])
+  const intervalData = {
+    RectangularHeatMapChart: data,
+    CalendarHeatMapChart: data[2],
+    HexagonHeatMapChart: data[0]
+  }
+  const intervalArr = intervalData[type].map((item) => {
+    return item[2]
+  })
+  const minValue = min(intervalArr)
+  const maxValue = max(intervalArr)
+  visualMapItem.min = minValue
+  visualMapItem.max = maxValue
+  if (type === CHARTTYPE[1]) {
+    // 设置视觉滑块控制手柄  设置VisualMap控制的热力变化属性
+    handleCalendar(iChartOption, visualMapItem, maxValue, minValue)
+  }
+  if (type === CHARTTYPE[2]) {
+    visualMapItem.inRange.color = iChartOption.color
+  }
+  visualMap.push(visualMapItem)
+  baseOpt.visualMap = visualMap
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/HeatMapChart/index.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/index.ts
new file mode 100644
index 000000000..bce03304f
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/index.ts
@@ -0,0 +1,72 @@
+import BaseOption from './BaseOption'
+import cloneDeep from '../../util/cloneDeep'
+import { getData } from './handleData'
+import { handleSeries } from './handleSeries'
+import { setVisualMap } from './handleVisualMap'
+import { event } from '../../util/event'
+import {
+  handleXaxis,
+  handleYaxis,
+  handleColor,
+  handleGrid,
+  handleTooltip,
+  setHeatMapDeaultIchartOption
+} from './handleOptipn'
+import init from '../../option/init'
+
+class HeatMapChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    this.initIchartOption = cloneDeep(iChartOption)
+    this.baseOption = cloneDeep(BaseOption)
+    setHeatMapDeaultIchartOption(iChartOption)
+    this.iChartOption = init(iChartOption)
+    this.chartInstance = chartInstance
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption()
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption
+    const { type } = iChartOption
+    if (!type) {
+      throw new Error('HeatMapChart must have a name')
+    }
+    // 图表数据
+    const data = getData(type, iChartOption, this.chartInstance)
+    if (!data) return
+    handleColor(this.baseOption, iChartOption)
+    // 图表x轴
+    handleXaxis(this.baseOption, type, data, iChartOption, this.initIchartOption)
+    // 图表y轴
+    handleYaxis(this.baseOption, type, data, iChartOption, this.initIchartOption)
+    // 设置chartpadding
+    handleGrid(this.baseOption, iChartOption)
+    //  图表鼠标悬浮提示框
+    handleTooltip(this.baseOption, iChartOption, type)
+    // 图表的series
+    handleSeries(this.baseOption, iChartOption, data, type)
+    // 图表VisualMap
+    setVisualMap(this.baseOption, type, data, iChartOption)
+    // 配置图表事件
+    event(this.chartInstance, iChartOption.event)
+  }
+
+  // 页面需要重新resize
+  resize() {
+    // 仅针对蜂窝热力图需要在resize的时候去重新render图表
+    if (this.iChartOption.type === 'HexagonHeatMapChart') {
+      this.updateOption(this.iChartOption, this.chartInstance)
+      this.chartInstance?.setOption(this.baseOption)
+    }
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption() {}
+}
+
+export default HeatMapChart
diff --git a/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/bottomArea.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/bottomArea.ts
new file mode 100644
index 000000000..7a90cbe85
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/bottomArea.ts
@@ -0,0 +1,173 @@
+import min from '../../../util/sort/min'
+import { isNumber } from '../../../util/type'
+import { defaultFormatter } from '../handleOptipn'
+import { getColor, codeToRGB } from '../../../util/color'
+import chartToken from './chartToken'
+
+/**
+ * 为series添加areaStyle
+ */
+function bottomArea(baseOption, iChartOption, YAxiMax) {
+  // 添加markLine的areaStyle
+  markLineArea(baseOption, iChartOption, YAxiMax)
+  // 添加split的areaStyle
+  splitArea(baseOption, iChartOption, YAxiMax)
+  // tooltip屏蔽假的同名Series
+  formatter(baseOption, iChartOption)
+}
+
+function markLineArea(baseOption, iChartOption, YAxiMax) {
+  if (
+    iChartOption.area &&
+    iChartOption.markLine &&
+    iChartOption.markLine.bottom &&
+    isNumber(iChartOption.markLine.bottom)
+  ) {
+    const temp = []
+    baseOption.series.forEach((item) => {
+      const bottomColor = codeToRGB(iChartOption.markLine.bottomColor, 0.15) || chartToken.colorError
+      const minValue = min(item.data)
+      const percent = (iChartOption.markLine.bottom - minValue) / (YAxiMax - minValue)
+      if (iChartOption.markLine.bottom >= minValue) {
+        // 该series是为了实现红色特殊area的样式而加的，因此在tooltip中应该被屏蔽
+        const newSeries = pureBottomArea(item, percent, bottomColor)
+        temp.push(newSeries)
+      }
+    })
+    baseOption.series = baseOption.series.concat(temp)
+  }
+}
+
+/**
+ * 为series添加split分割区域的底部areaStyle,
+ */
+function splitArea(baseOption, iChartOption, YAxiMax) {
+  if (iChartOption.area && iChartOption.splitLine) {
+    const temp = []
+    const colors = baseOption.color
+    baseOption.series.forEach((item, index) => {
+      const minValue = min(item.data)
+      const percent = (iChartOption.splitLine - minValue) / (YAxiMax - minValue)
+      const color = getColor(colors, index)
+      const colorTo = codeToRGB(color, 0.15)
+      const colorFrom = codeToRGB(color, 0.15)
+      // 该series是为了实现红色特殊area的样式而加的，因此在tooltip中应该被屏蔽
+      const newSeries = gradientBottomArea(item, percent, colorTo, colorFrom)
+      temp.push(newSeries)
+    })
+    baseOption.series = baseOption.series.concat(temp)
+  }
+}
+
+// 创建一个渐变色-同名的Series，用来显示分割渐变区域
+function gradientBottomArea(item, percent, colorTo, colorFrom) {
+  const newSeries = {
+    type: item.type,
+    name: item.name,
+    data: item.data,
+    smooth: item.smooth,
+    step: item.step,
+    lineStyle: {
+      width: 0
+    },
+    symbol: 'none',
+    areaStyle: {
+      origin: 'end',
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: chartToken.colorAreaTP
+          },
+          {
+            offset: 1 - percent - 0.00001,
+            color: chartToken.colorAreaTP
+          },
+          {
+            offset: 1 - percent,
+            color: colorTo
+          },
+          {
+            offset: 1,
+            color: colorFrom
+          }
+        ]
+      }
+    }
+  }
+  return newSeries
+}
+
+// 创建一个纯色-同名Series，用来显示红色阈值区域
+function pureBottomArea(itemx, percentx, bottomColorx) {
+  const seriesObj = {
+    type: itemx.type,
+    name: itemx.name,
+    data: itemx.data,
+    smooth: itemx.smooth,
+    step: itemx.step,
+    symbol: 'none',
+    areaStyle: {
+      color: {
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: chartToken.colorAreaTP
+          },
+          {
+            offset: 1 - percentx - 0.00001,
+            color: chartToken.colorAreaTP
+          },
+          {
+            offset: 1 - percentx,
+            color: bottomColorx
+          },
+          {
+            offset: 1,
+            color: bottomColorx
+          }
+        ],
+        type: 'linear'
+      },
+      origin: 'end'
+    },
+    lineStyle: {
+      width: 0
+    }
+  }
+  return seriesObj
+}
+
+/**
+ * 面积图的bottom阈值区域功能是使用植入假的同名Series来实现的
+ * 因此在 tooltip 中应该被屏蔽这些假的同名Series
+ */
+function formatter(baseOption, iChartOption) {
+  if (iChartOption.area) {
+    if (
+      iChartOption.splitLine ||
+      (iChartOption.markLine && iChartOption.markLine.bottom && isNumber(iChartOption.markLine.bottom))
+    ) {
+      const dataLength = baseOption.legend.data.length
+      const tipFormatter = baseOption.tooltip.formatter
+      baseOption.tooltip.formatter = (params, ticket, callback) => {
+        if (tipFormatter) {
+          return tipFormatter(params.slice(0, dataLength), ticket, callback)
+        } else {
+          return defaultFormatter(params, dataLength)
+        }
+      }
+    }
+  }
+}
+
+export default bottomArea
diff --git a/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/chartToken.ts
new file mode 100644
index 000000000..4943b0fa2
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/chartToken.ts
@@ -0,0 +1,19 @@
+import Theme from '../../../feature/token'
+import proxy from '../../../util/proxy'
+
+function getChartToken() {
+  const {
+    areaStyle: { color: colorBgTransparent }
+  } = Theme.config.AreaChart
+
+  const { colorError } = Theme.config.colorState
+
+  return {
+    colorAreaTP: colorBgTransparent,
+    colorError
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/index.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/index.ts
new file mode 100644
index 000000000..4368ea7ff
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/index.ts
@@ -0,0 +1,4 @@
+import topArea from './topArea'
+import bottomArea from './bottomArea'
+
+export { topArea, bottomArea }
diff --git a/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/topArea.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/topArea.ts
new file mode 100644
index 000000000..3d4ba9238
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/topArea.ts
@@ -0,0 +1,122 @@
+import * as echarts from 'echarts'
+import max from '../../../util/sort/max'
+import { isNumber } from '../../../util/type'
+import { getColor, codeToRGB } from '../../../util/color'
+import chartToken from './chartToken'
+
+/**
+ * 为series添加areaStyle
+ */
+function topArea(baseOption, iChartOption, YAxiMin) {
+  // 添加默认areaStyle
+  defaultArea(baseOption, iChartOption, YAxiMin)
+  // 添加markLine的areaStyle
+  markLineArea(baseOption, iChartOption, YAxiMin)
+  // 添加split的areaStyle
+  splitArea(baseOption, iChartOption, YAxiMin)
+}
+
+function splitArea(baseOption, iChartOption, YAxiMin) {
+  if (iChartOption.area && iChartOption.splitLine) {
+    const colors = baseOption.color
+    const splitLine = iChartOption.splitLine
+    baseOption.series.forEach((item, index) => {
+      const maxValue = max(item.data)
+      const color = getColor(colors, index)
+      const colorTo = codeToRGB(color, 0.15)
+      const colorFrom = codeToRGB(color, 0.15)
+      const percent = (maxValue - splitLine) / (maxValue - YAxiMin)
+      item.areaStyle = {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: colorFrom },
+            { offset: percent, color: colorTo },
+            { offset: percent + 0.00001, color: chartToken.colorAreaTP },
+            { offset: 1, color: chartToken.colorAreaTP }
+          ]
+        }
+      }
+    })
+  }
+}
+
+function markLineArea(baseOption, iChartOption, YAxiMin) {
+  if (
+    iChartOption.area &&
+    iChartOption.markLine &&
+    iChartOption.markLine.top &&
+    isNumber(iChartOption.markLine.top) &&
+    iChartOption.markLine.topChangeColor !== false
+  ) {
+    const colors = baseOption.color
+    const markLine = iChartOption.markLine
+    const topColor = codeToRGB(markLine.topColor, 0.15) || chartToken.colorError
+    baseOption.series.forEach((item, index) => {
+      const maxValue = max(item.data)
+      const color = getColor(colors, index)
+      const colorTo = codeToRGB(color, 0)
+      const colorFrom = codeToRGB(color, 0.15)
+      const percent = (maxValue - markLine.top) / (maxValue - YAxiMin)
+      if (maxValue > markLine.top) {
+        item.areaStyle = {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: topColor
+              },
+              {
+                offset: percent,
+                color: topColor
+              },
+              {
+                offset: percent + 0.00001,
+                color: colorFrom
+              },
+              {
+                offset: 1,
+                color: colorTo
+              }
+            ]
+          }
+        }
+      }
+    })
+  }
+}
+
+function defaultArea(baseOption, iChartOption, YAxiMin) {
+  if (iChartOption.area) {
+    const colors = baseOption.color
+    baseOption.series.forEach((item, index) => {
+      const color = getColor(colors, index)
+      const colorTo = codeToRGB(color, 0)
+      const colorFrom = codeToRGB(color, 0.15)
+      item.areaStyle = {
+        opacity: 1,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: colorFrom
+          },
+          {
+            offset: 1,
+            color: colorTo
+          }
+        ])
+      }
+    })
+  }
+}
+
+export default topArea
diff --git a/packages/vue/src/chart/chart-core/base/components/LineChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/chartToken.ts
new file mode 100644
index 000000000..35dc0fb41
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LineChart/chartToken.ts
@@ -0,0 +1,35 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+const getChartToken = () => {
+  const {
+    symbolSize: { symbolSizeSM, symbolSizeLG },
+    itemStyle: { borderZero, border, borderColor },
+    lineStyle: { lineWidth },
+    markLine: {
+      lineStyle: { color }
+    }
+  } = Theme.config.LineChart
+
+  const { colorError } = Theme.config.colorState
+
+  const { tooltipTextColor, visualMapPiecesColor, visualMapDashColor } = Theme.config
+
+  return {
+    symbolSizeSM,
+    borderZero,
+    symbolSizeLG,
+    lineWidth,
+    color,
+    border,
+    borderColor,
+    colorError,
+    tooltipTextColor,
+    visualMapPiecesColor,
+    visualMapDashColor
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/LineChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/handleOptipn.ts
new file mode 100644
index 000000000..35fcb88fa
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LineChart/handleOptipn.ts
@@ -0,0 +1,92 @@
+import cloneDeep from '../../util/cloneDeep'
+import defendXSS from '../../util/defendXSS'
+import chartToken from './chartToken'
+
+// 给图例和x轴赋值
+export function handleData(baseOpt, legendData, xAxisData) {
+  if (!baseOpt.legend.data) {
+    baseOpt.legend.data = legendData
+  }
+  baseOpt.xAxis.forEach((item) => {
+    item.data = xAxisData
+  })
+}
+
+export function onlyOnePoint(baseOption) {
+  baseOption.series.forEach((item) => {
+    if (item.data.length === 1) {
+      item.showSymbol = true
+    }
+  })
+}
+
+// 针对离散数据, 创建同名Series, 显示离散数据的单个点
+export function discrete(iChartOption, baseOption) {
+  if (iChartOption.discrete) {
+    // 创建同名Series
+    baseOption.series.forEach((series) => {
+      const newSeries = cloneDeep(series)
+      newSeries.symbol = 'circle'
+      newSeries.symbolSize = chartToken.symbolSizeSM
+      newSeries.itemStyle.borderWidth = chartToken.borderZero
+      newSeries.showSymbol = true
+      newSeries.showAllSymbol = true
+      newSeries.emphasis = {
+        itemStyle: {
+          opacity: 0
+        }
+      }
+      const discreteData = []
+      for (let index = 0; index < newSeries.data.length; index++) {
+        const pre = newSeries.data[index - 1]
+        const next = newSeries.data[index]
+        const cur = newSeries.data[index + 1]
+        if (!isNullValue(pre) || !isNullValue(cur)) {
+          discreteData.push(null)
+        } else {
+          discreteData.push(next)
+        }
+      }
+      newSeries.data = discreteData
+      baseOption.series.push(newSeries)
+    })
+    // 覆盖tipHtml，过滤同名Series
+    const dataLength = baseOption.legend.data.length
+    const tipFormatter = baseOption.tooltip.formatter
+    baseOption.tooltip.formatter = (params, ticket, callback) => {
+      if (tipFormatter) {
+        return tipFormatter(params.slice(0, dataLength), ticket, callback)
+      } else {
+        return defaultFormatter(params, dataLength)
+      }
+    }
+  }
+}
+
+function isNullValue(value) {
+  return value === '' || value === undefined || value === null
+}
+
+export function defaultFormatter(params, dataLength) {
+  let htmlString = ''
+  params.forEach((item, index) => {
+    // 只显示实线数据的tooltip
+    if (index < dataLength) {
+      if (index === 0) {
+        htmlString += `<div style="margin-bottom:4px;">${defendXSS(item.name)}</div>`
+      }
+      htmlString += `<div>
+                              <span style="display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${defendXSS(
+                                item.color
+                              )};"></span>
+                              <span style="margin-left:5px;>
+                                  <span style="display:inline-block; margin-right:8px;min-width:60px;">${defendXSS(
+                                    item.seriesName
+                                  )}</span> 
+                                  <span style="font-weight:bold">${defendXSS(item.value)}</span>
+                              </span>
+                          </div>`
+    }
+  })
+  return htmlString
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/LineChart/handlePredict.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/handlePredict.ts
new file mode 100644
index 000000000..ff267fa56
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LineChart/handlePredict.ts
@@ -0,0 +1,99 @@
+import cloneDeep from '../../util/cloneDeep'
+import defendXSS from '../../util/defendXSS'
+import chartToken from './chartToken'
+
+function setDashedLineVisualMap(seriesIndex, lineColor, predictIndex) {
+  const vm = {
+    type: 'piecewise',
+    seriesIndex,
+    dimension: 0,
+    show: false,
+    pieces: [
+      {
+        gte: 0,
+        lte: predictIndex,
+        color: chartToken.visualMapPiecesColor
+      },
+      {
+        gt: predictIndex,
+        color: lineColor
+      }
+    ]
+  }
+  return vm
+}
+
+// htmlString中判断item.color.colorStops是判读是否为折柱混合的图表，如果是需要从item.color.colorStops对象中获取颜色
+function setToolTip(dataLength, fontColor, selfFormatter) {
+  if (selfFormatter) {
+    return selfFormatter
+  }
+  const tipHtml = (params) => {
+    let htmlString = ''
+    params.forEach((item, index) => {
+      // 只显示实线数据的tooltip
+      if (index < dataLength) {
+        if (index === 0) {
+          htmlString += `${defendXSS(item.name)}<br/>`
+        }
+        const { colorStops: color_ } = item.color
+        htmlString += `
+                    <div>
+                        <span style="display:inline-block;width:10px;
+                        height:10px;border-radius:5px;background-color:${defendXSS(
+                          color_ ? color_[0].color : item.color
+                        )};">
+                        </span>
+                        <span style="margin-left:5px;color:${defendXSS(fontColor)}">
+                            <span style="display:inline-block;width:80px;">${defendXSS(item.seriesName)}</span> 
+                            <span style="font-weight:bold">${defendXSS(item.value)}</span>
+                        </span>
+                    </div>
+                `
+      }
+    })
+    return htmlString
+  }
+  return tipHtml
+}
+
+/**
+ * 针对预测值图表需求，图表需要进行特殊处理
+ */
+export function handlePredict(option, predict, tipHtml, lineStyle) {
+  if (predict) {
+    // 取出数据
+    const data = option.series
+    const dataLength = data.length
+    const xAxisDataLength = option.xAxis[0].data.length
+    const predictIndex = option.xAxis[0].data.indexOf(predict)
+    // 制作虚线的series(只有匹配成功即predictIndex>-1时，才设置阈值线的样式)
+    if (predictIndex > -1) {
+      for (let index = 0; index < dataLength; index++) {
+        const temp = cloneDeep(data[index])
+        temp.lineStyle = {
+          // 为了视觉上看不见盖住粗细+1
+          width: chartToken.lineWidth + 1,
+          type: [5, 8]
+        }
+        temp.itemStyle = {
+          opacity: 0
+        }
+        temp.silent = true
+        temp.showSymbol = false
+        temp.showAllSymbol = false
+        // 插入虚线的series
+        option.series.push(temp)
+        // VisualMap只能处理线的颜色，不能处理面积的颜色
+        let dashColor = chartToken.visualMapDashColor
+        if (lineStyle && lineStyle.dashColor) {
+          dashColor = lineStyle.dashColor
+        }
+        // 虚线颜色
+        option.visualMap.push(setDashedLineVisualMap(dataLength + index, dashColor, predictIndex, xAxisDataLength))
+      }
+    }
+    // 修改tooltip,不显示虚线的tooltip
+    option.tooltip.formatter = setToolTip(dataLength, chartToken.tooltipTextColor, tipHtml)
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/LineChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/handleSeries.ts
new file mode 100644
index 000000000..0233db7d6
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LineChart/handleSeries.ts
@@ -0,0 +1,232 @@
+import cloneDeep from '../../util/cloneDeep'
+import { isString, isObject } from '../../util/type'
+import { getMarkLineDefault, getMarkPointDefault } from '../../option/config/mark'
+import chartToken from './chartToken'
+
+export const seriesInit = () => {
+  return {
+    label: { show: false },
+    // 连线上的小圆点样式
+    symbol: 'emptyCircle',
+    symbolSize: chartToken.symbolSizeLG,
+    showSymbol: false,
+    // 数据
+    data: [],
+    // 线形
+    type: 'line',
+    // 线条样式
+    lineStyle: {
+      width: chartToken.lineWidth
+    },
+    // 折线阶梯
+    step: false,
+    // 折线平滑
+    smooth: false,
+    // 阈值线
+    markLine: null,
+    // 峰值标志
+    markPoint: null,
+    // 折线点的每个样式配置项
+    itemStyle: {}
+  }
+}
+
+/**
+ * 组装echarts所需要的series
+ */
+export function setSeries(params) {
+  const { yAxis, theme, itemStyle } = params
+  // 防止同一个页面的不同lineChart之间出现样式串通
+  const localSeriesUnit = cloneDeep(seriesInit())
+  // 根据不同的theme，生成不同的itemStyle
+  handleItemStyleWithTheme(localSeriesUnit, theme)
+  // 覆盖用户传入的itemStyle
+  handleItemStyle(localSeriesUnit, itemStyle)
+  // 拼装series
+  const series = []
+  handleSeries({ ...params, series, localSeriesUnit })
+  // 配置多个series的y轴index
+  handleYaxis(series, yAxis)
+  return series
+}
+
+function handleItemStyleWithTheme(seriesUnit, theme) {
+  if (theme.toLowerCase().includes('cloud-light')) {
+    seriesUnit.symbol = 'emptyCircle'
+    seriesUnit.itemStyle = {}
+  } else {
+    seriesUnit.symbol = 'circle'
+    seriesUnit.itemStyle = {
+      shadowBlur: 2,
+      borderWidth: chartToken.border,
+      borderColor: chartToken.borderColor,
+      shadowColor: 'rgba(0, 0, 0, .2)'
+    }
+  }
+}
+
+function handleItemStyle(seriesUnit, itemStyle) {
+  if (!itemStyle) return
+  // 兼容老版本的 itemStyle.symbolSize
+  if (itemStyle.symbolSize) {
+    seriesUnit.symbolSize = itemStyle.symbolSize
+  }
+  for (const key in itemStyle) {
+    seriesUnit.itemStyle[key] = itemStyle[key]
+  }
+}
+
+function handleSeries(params) {
+  const {
+    theme,
+    stack,
+    focus,
+    colors,
+    isStep,
+    isArea,
+    series,
+    isSmooth,
+    markLine,
+    markPoint,
+    splitLine,
+    legendData,
+    seriesData,
+    localSeriesUnit
+  } = params
+  legendData.forEach((legend, index) => {
+    const seriesUnit = cloneDeep(localSeriesUnit)
+    // 折线平滑
+    seriesUnit.smooth = isSmooth || false
+    // 折线阶梯
+    seriesUnit.step = (isStep && 'end') || false
+    // 阈值线
+    markLine && handleMarkLine(markLine, seriesUnit, theme, legend)
+    // 峰值标记
+    markPoint && handleMarkPoint(markPoint, seriesUnit, theme, legend)
+    // 聚焦效果
+    focus && handleFocus(focus, seriesUnit)
+    // 数据 / 数据名称
+    seriesUnit.name = legend
+    seriesUnit.data = seriesData[legend]
+    // 堆叠效果
+    stack && handleStack(stack, seriesUnit)
+    series.push(seriesUnit)
+  })
+}
+
+function handleYaxis(series, yAxis) {
+  if (Array.isArray(yAxis)) {
+    yAxis.forEach((y, index) => {
+      series.forEach((s, indexs) => {
+        if (y.dataName && y.dataName.includes(s.name)) {
+          series[indexs].yAxisIndex = index
+        }
+      })
+    })
+  }
+}
+
+function handleMarkLine(markLine, seriesUnit, theme, seriesName) {
+  seriesUnit.markLine = cloneDeep(getMarkLineDefault())
+  if (markLine.top && !(markLine.topUse && !markLine.topUse.includes(seriesName))) {
+    let markLineData = {}
+    if (isString(markLine.top)) {
+      markLineData = { type: markLine.top }
+    } else {
+      markLineData = { yAxis: markLine.top }
+    }
+    markLineData.label = { show: false, position: 'insideEndTop' }
+    markLineData.lineStyle = {}
+    markLine.topPosition && (markLineData.label.position = markLine.topPosition || 'insideStartTop')
+    markLine.topLabel && (markLineData.label.show = true)
+    markLine.topLabel && (markLineData.label.formatter = markLine.topLabel)
+    if (!markLine.topColor) {
+      markLine.topColor = chartToken.colorError
+    }
+    if (markLine.topColor === 'auto') {
+      markLine.topColor = undefined
+    }
+    markLine.topColor && (markLineData.label.color = markLine.topColor)
+    markLine.topColor && (markLineData.lineStyle.color = markLine.topColor)
+    if (markLine.topLine === false) {
+      markLineData.lineStyle.color = chartToken.color
+    }
+    seriesUnit.markLine.data.push(markLineData)
+  }
+  if (markLine.bottom && !(markLine.bottomUse && !markLine.bottomUse.includes(seriesName))) {
+    let markLineData = {}
+    if (isString(markLine.bottom)) {
+      markLineData = { type: markLine.bottom }
+    } else {
+      markLineData = { yAxis: markLine.bottom }
+    }
+    markLineData.label = { show: false, position: 'insideEndTop' }
+    markLineData.lineStyle = {}
+    markLine.bottomPosition && (markLineData.label.position = markLine.bottomPosition || 'insideStartTop')
+    markLine.bottomLabel && (markLineData.label.show = true)
+    markLine.bottomLabel && (markLineData.label.formatter = markLine.bottomLabel)
+    if (!markLine.bottomColor) {
+      markLine.bottomColor = chartToken.colorError
+    }
+    if (markLine.bottomColor === 'auto') {
+      markLine.bottomColor = undefined
+    }
+    markLine.bottomColor && (markLineData.label.color = markLine.bottomColor)
+    markLine.bottomColor && (markLineData.lineStyle.color = markLine.bottomColor)
+    if (markLine.bottomLine === false) {
+      markLineData.lineStyle.color = chartToken.color
+    }
+    seriesUnit.markLine.data.push(markLineData)
+  }
+}
+
+function handleMarkPoint(markPoint, seriesUnit, theme, seriesName) {
+  seriesUnit.markPoint = cloneDeep(getMarkPointDefault())
+  if (markPoint.max && !(markPoint.maxUse && !markPoint.maxUse.includes(seriesName))) {
+    const max = {
+      type: 'max',
+      symbolOffset: [0, -11],
+      itemStyle: { color: markPoint.maxColor || chartToken.colorError }
+    }
+    if (markPoint.maxColor === 'auto') delete max.itemStyle
+    seriesUnit.markPoint.data.push(max)
+  }
+  if (markPoint.min && !(markPoint.minUse && !markPoint.minUse.includes(seriesName))) {
+    const min = {
+      type: 'min',
+      symbolOffset: [0, 11],
+      symbolRotate: 180,
+      itemStyle: { color: markPoint.minColor || chartToken.colorError }
+    }
+    if (markPoint.minColor === 'auto') delete min.itemStyle
+    seriesUnit.markPoint.data.push(min)
+  }
+}
+
+function handleStack(stack, seriesUnit) {
+  if (stack === true) {
+    seriesUnit.stack = 'Total'
+    return
+  }
+  if (isObject(stack)) {
+    for (const name in stack) {
+      if (Object.hasOwnProperty.call(stack, name)) {
+        const stackArray = stack[name]
+        const seriesName = seriesUnit.name
+        if (stackArray.includes(seriesName)) {
+          seriesUnit.stack = name
+        }
+        break
+      }
+    }
+  }
+}
+
+function handleFocus(focus, seriesUnit) {
+  if (focus) {
+    seriesUnit.emphasis = {
+      focus: 'series',
+      blurScope: 'global'
+    }
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/LineChart/handleVisualMap.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/handleVisualMap.ts
new file mode 100644
index 000000000..c41f1a3f7
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LineChart/handleVisualMap.ts
@@ -0,0 +1,84 @@
+import min from '../../util/sort/min'
+import max from '../../util/sort/max'
+import { isNumber } from '../../util/type'
+import { getColor } from '../../util/color'
+import chartToken from './chartToken'
+
+export function setVisualMap(legendData, seriesData, markLine, colors, theme) {
+  const visualMap = []
+  if (markLine) {
+    let topValue = markLine.top
+    let bottomValue = markLine.bottom
+    const vmColor = chartToken.colorError
+    const topColor = markLine.topColor || vmColor
+    const bottomColor = markLine.bottomColor || vmColor
+    if (!isNumber(topValue)) {
+      topValue = undefined
+    }
+    if (!isNumber(bottomValue)) {
+      bottomValue = undefined
+    }
+    if (topValue === undefined && bottomValue === undefined) {
+      return visualMap
+    }
+    if (topValue !== undefined && bottomValue !== undefined && bottomValue >= topValue) {
+      throw new Error('阈值线bottom的值必须小于阈值线top的值')
+    }
+    legendData.forEach((legendName, index) => {
+      const data = seriesData[legendName]
+      const minData = min(data)
+      const maxData = max(data)
+      let bottom = bottomValue
+      let top = topValue
+      if (markLine.topUse && !markLine.topUse.includes(legendName)) {
+        top = undefined
+      }
+      if (markLine.bottomUse && !markLine.bottomUse.includes(legendName)) {
+        bottom = undefined
+      }
+      if (top === undefined && bottom === undefined) {
+        return
+      }
+      // 阈值无下限
+      if (bottom === undefined) {
+        bottom = Math.min(top - 0.01, minData - 0.01)
+      }
+      // 阈值无上限
+      if (top === undefined) {
+        top = Math.max(bottom + 0.01, maxData + 0.01)
+      }
+      // 根据数据大小映射颜色
+      const visualMapItem = handleVisualMapItem({ index, topColor, top, bottom, colors, bottomColor, vmColor })
+      visualMap.push(visualMapItem)
+    })
+  }
+  return visualMap
+}
+
+function handleVisualMapItem({ index, topColor, top, bottom, colors, bottomColor, vmColor }) {
+  const visualMapItem = {
+    show: false,
+    type: 'piecewise',
+    dimension: 1,
+    seriesIndex: index,
+    pieces: [
+      {
+        gte: top, // 大于 top 的
+        color: topColor
+      },
+      {
+        gt: bottom,
+        lt: top, // 小于 top, 大于 bottom 的，为正常颜色
+        color: getColor(colors, index)
+      },
+      {
+        lte: bottom, // 小于 bottom
+        color: bottomColor
+      }
+    ],
+    outOfRange: {
+      color: vmColor
+    }
+  }
+  return visualMapItem
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/LineChart/index.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/index.ts
new file mode 100644
index 000000000..61b7782a3
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LineChart/index.ts
@@ -0,0 +1,104 @@
+import init from '../../option/init'
+import mini from '../../feature/mini'
+import { event } from '../../util/event'
+import { setSeries } from './handleSeries'
+import cloneDeep from '../../util/cloneDeep'
+import BaseOption from '../../option/base'
+import { setVisualMap } from './handleVisualMap'
+import { handlePredict } from './handlePredict'
+import { topArea, bottomArea } from './AreaChart'
+import { mergeVisualMap, mergeSeries } from '../../util/merge'
+import { handleData, onlyOnePoint, discrete } from './handleOptipn'
+import RectCoordSys from '../../option/RectSys'
+import { xkey, xdata, ldata, ydata } from '../../option/RectSys'
+
+class LineChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.baseOption = cloneDeep(BaseOption)
+    this.iChartOption = {}
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance)
+  }
+
+  updateOption(chartInstance) {
+    const theme = this.iChartOption.theme
+    const iChartOption = this.iChartOption
+    // 装载除series之外的其他配置
+    RectCoordSys(this.baseOption, this.iChartOption, 'LineChart')
+    // x轴key值
+    const xAxisKey = xkey(iChartOption)
+    // x轴数据
+    const xAxisData = xdata(iChartOption.data, xAxisKey)
+    // 图例数据
+    const legendData = ldata(iChartOption.data, xAxisKey)
+    // 连线的数据
+    const seriesData = ydata(iChartOption.data, legendData)
+    // 给图例和x轴赋值
+    handleData(this.baseOption, legendData, xAxisData)
+    // 组装series
+    this.baseOption.series = setSeries({
+      theme,
+      seriesData,
+      legendData,
+      yAxis: iChartOption.yAxis,
+      focus: iChartOption.focus,
+      stack: iChartOption.stack,
+      isStep: iChartOption.step,
+      isArea: iChartOption.area,
+      colors: this.baseOption.color,
+      isSmooth: iChartOption.smooth,
+      markLine: iChartOption.markLine,
+      markPoint: iChartOption.markPoint,
+      splitLine: iChartOption.splitLine,
+      labelHtml: iChartOption.labelHtml,
+      itemStyle: iChartOption.itemStyle
+    })
+    // 设置VisualMap，通过数值映射颜色
+    this.baseOption.visualMap = setVisualMap(
+      legendData,
+      seriesData,
+      iChartOption.markLine,
+      iChartOption.color,
+      iChartOption.theme
+    )
+    // 针对预测值图表需求，图表需要进行特殊处理
+    handlePredict(this.baseOption, iChartOption.predict, iChartOption.tipHtml, iChartOption.lineStyle)
+    // 配置图表事件
+    if (iChartOption.event) {
+      event(chartInstance, iChartOption.event)
+    }
+    // 是否关闭hover态的效果，默认为false
+    if (iChartOption.silent) {
+      this.baseOption.tooltip = {}
+    }
+    // 动效时长
+    this.baseOption.animationDuration = this.iChartOption.animationDuration || 1000
+    // 当数据只有一条时，显示数据点
+    onlyOnePoint(this.baseOption)
+    // 针对离散数据, 创建同名Series, 显示离散数据的单个点
+    discrete(iChartOption, this.baseOption)
+    // 合并用户自定义series
+    mergeSeries(iChartOption, this.baseOption)
+    // 合并用户自定义visualMap
+    mergeVisualMap(iChartOption, this.baseOption)
+    // 处理特性
+    mini(iChartOption, this.baseOption)
+  }
+
+  // 根据渲染出的结果，二次计算option
+  updateOptionAgain(YAxiMax, YAxiMin) {
+    // 面积图上部红色阈值区域需要在二次计算中实现 -- 在原有Series上添加areaStyle
+    topArea(this.baseOption, this.iChartOption, YAxiMin)
+    // 面积图下部红色阈值区域需要在二次计算中实现 -- 植入假的同名Series
+    bottomArea(this.baseOption, this.iChartOption, YAxiMax)
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+}
+
+export default LineChart
diff --git a/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/chartToken.ts
new file mode 100644
index 000000000..51cc8eb14
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/chartToken.ts
@@ -0,0 +1,21 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    label: { color: colorLabel },
+    backgroundStyle: { color: colorBgPrimary }
+  } = Theme.config.LiquidfillChart
+
+  const { colorGroup } = Theme.config
+
+  return {
+    labelColor: colorLabel,
+    colorGroup,
+    backgroundColor: colorBgPrimary
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/handleSeries.ts
new file mode 100644
index 000000000..bd3f5a466
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/handleSeries.ts
@@ -0,0 +1,152 @@
+import merge from '../../util/merge'
+import cloneDeep from '../../util/cloneDeep'
+import chartToken from './chartToken'
+
+export const seriesInit = {
+  type: 'liquidFill',
+  center: ['50%', '50%'],
+  color: '',
+  backgroundStyle: {
+    color: ''
+  },
+  outline: {
+    itemStyle: {
+      borderColor: '',
+      shadowBlur: 0
+    }
+  },
+  itemStyle: {
+    opacity: 1,
+    shadowBlur: 5,
+    shadowColor: 'rgba(0, 0, 0, 0.4)'
+  },
+  label: {},
+  data: []
+}
+
+/**
+ * 组装echarts所需要的series
+ * @param {传入数据} iChartOption
+ * @returns
+ */
+export function setSeries(iChartOption) {
+  const { data, shape, color, name, label, outline, backgroundStyle } = iChartOption
+  const series = []
+  const selfSeries = iChartOption.series
+  if (selfSeries !== undefined && selfSeries.length !== 0) {
+    selfSeries.forEach((item) => {
+      const seriesUnit = cloneDeep(seriesInit)
+      item.data && (seriesUnit.data = item.data)
+      item.center && (seriesUnit.center = item.center)
+      item.shape && (seriesUnit.shape = item.shape)
+      setColor(seriesUnit, item, color)
+      setBackgroundStyle(seriesUnit, item, backgroundStyle)
+      setOutline(seriesUnit, item, outline)
+      setLabel(seriesUnit, item, label)
+      merge(seriesUnit, item)
+      series.push(seriesUnit)
+    })
+  } else {
+    const seriesUnit = cloneDeep(seriesInit)
+    data && (seriesUnit.data = data)
+    name && (seriesUnit.name = name)
+    shape && (seriesUnit.shape = shape)
+    // 配置color
+    setColor(seriesUnit, iChartOption)
+    // 配置backgroundStyle
+    setBackgroundStyle(seriesUnit, iChartOption)
+    // 配置outlineColor
+    setOutline(seriesUnit, iChartOption)
+    // 配置label
+    setLabel(seriesUnit, iChartOption)
+    series.push(seriesUnit)
+  }
+  return series
+}
+
+// 设置Label的属性
+function setLabel(seriesTarget, seriesSource, label) {
+  const { labelColor } = chartToken
+  // 多个数据：series里面label存在
+  // 单个数据：没有series时一级属性label存在
+  if (seriesSource.label !== undefined) {
+    seriesTarget.label.color = labelColor
+    seriesTarget.label.position = 'inside'
+    seriesTarget.label.show = true
+    merge(seriesTarget.label, seriesSource.label)
+  }
+  // 多个/单个数据：series里面label不存在但一级属性label存在
+  else if (seriesSource.label === undefined && label) {
+    seriesTarget.label.color = labelColor
+    seriesTarget.label.position = 'inside'
+    seriesTarget.label.show = true
+    merge(seriesTarget.label, label)
+  }
+  // 多个/单个数据：series和一级属性都不存在label，设置初始值
+  else {
+    seriesTarget.label.color = labelColor
+    seriesTarget.label.position = 'inside'
+    seriesTarget.label.show = true
+  }
+}
+
+// 设置Outline的属性
+function setOutline(seriesTarget, seriesSource, outline) {
+  const { colorGroup } = chartToken
+  const itemStyle = seriesTarget.outline.itemStyle
+  // 多个数据：series里面outline存在
+  // 单个数据：没有series时一级属性outline存在
+  if (seriesSource.outline !== undefined) {
+    itemStyle.borderColor = colorGroup[0]
+    merge(seriesTarget.outline, seriesSource.outline)
+  }
+  // 多个/单个数据：series里面outline不存在但一级属性outline存在
+  else if (seriesSource.outline === undefined && outline) {
+    itemStyle.borderColor = colorGroup[0]
+    merge(seriesTarget.outline, outline)
+  }
+  // 多个/单个数据：series和一级属性都不存在outline，设置初始值
+  else {
+    itemStyle.borderColor = colorGroup[0]
+  }
+}
+
+// 设置BackgroundStyle的属性
+function setBackgroundStyle(seriesTarget, seriesSource, backgroundStyle) {
+  const { backgroundColor } = chartToken
+  // 多个数据：series里面backgroundStyle存在
+  // 单个数据：没有series时一级属性backgroundStyle存在
+  if (seriesSource.backgroundStyle !== undefined) {
+    seriesTarget.backgroundStyle.color = backgroundColor
+    merge(seriesTarget.backgroundStyle, seriesSource.backgroundStyle)
+  }
+  // 多个/单个数据：series里面backgroundStyle不存在但一级属性backgroundStyle存在
+  else if (seriesSource.backgroundStyle === undefined && backgroundStyle) {
+    seriesTarget.backgroundStyle.color = backgroundColor
+    merge(seriesTarget.backgroundStyle, backgroundStyle)
+  }
+  // 多个/单个数据：series和一级属性都不存在backgroundStyle，设置初始值
+  else {
+    seriesTarget.backgroundStyle.color = backgroundColor
+  }
+}
+
+// 设置Color的属性
+function setColor(seriesTarget, seriesSource, color) {
+  const { colorGroup } = chartToken
+  // 多个数据：series里面color存在
+  // 单个数据：没有series时一级属性存在color
+  if (seriesSource.color !== undefined) {
+    seriesTarget.color = [...colorGroup]
+    merge(seriesTarget.color, seriesSource.color)
+  }
+  // 多个/单个数据：series里面color不存在但一级属性color存在
+  else if (seriesSource.color === undefined && color) {
+    seriesTarget.color = [...colorGroup]
+    merge(seriesTarget.color, color)
+  }
+  // 多个/单个数据：series和一级属性都不存在color，设置初始值
+  else {
+    seriesTarget.color = [...colorGroup]
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/index.ts b/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/index.ts
new file mode 100644
index 000000000..f6237a279
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/index.ts
@@ -0,0 +1,32 @@
+import init from '../../option/init'
+import { event } from '../../util/event'
+import { setSeries } from './handleSeries.js'
+import PolarCoordSys from '../../option/PolarSys'
+
+const CHART_NAME = 'LiquidfillChart'
+export default class LiquidfillChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance)
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption
+    // 装载除series之外的其他配置
+    PolarCoordSys(this.baseOption, iChartOption, CHART_NAME)
+    // 组装series
+    this.baseOption.series = setSeries(iChartOption)
+    // 配置图表事件
+    if (iChartOption.event) {
+      event(chartInstance, iChartOption.event)
+    }
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/PieChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/PieChart/chartToken.ts
new file mode 100644
index 000000000..a7c74fcae
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/PieChart/chartToken.ts
@@ -0,0 +1,27 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    itemStyle: { borderWidth, borderColor, borderWidthNone, borderRadius },
+    label: { distance, color: colorLabel, fontSize },
+    lineStyle: { color: colorLabelLine },
+    emptyCircleStyle: { color: emptyColor }
+  } = Theme.config.PieChart
+
+  return {
+    borderWidth,
+    borderColor,
+    borderWidthNone,
+    distance,
+    labelColor: colorLabel,
+    labelLineColor: colorLabelLine,
+    emptyColor,
+    fontSize,
+    borderRadius
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/PieChart/handleLabel.ts b/packages/vue/src/chart/chart-core/base/components/PieChart/handleLabel.ts
new file mode 100644
index 000000000..87b77272f
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/PieChart/handleLabel.ts
@@ -0,0 +1,83 @@
+import merge from '../../util/merge'
+import chartToken from './chartToken'
+
+function handleLabel(hasLabel, seriesUnit) {
+  if (hasLabel) {
+    seriesUnit.label = merge({ color: chartToken.labelColor, fontSize: chartToken.fontSize }, seriesUnit.label)
+  } else {
+    seriesUnit.label = { show: false }
+  }
+}
+
+function handleLabelLine(hasLabelLine, seriesUnit, label) {
+  const lineColor = label?.lineColor
+  const lineLength = label?.distance ?? chartToken.distance
+  if (hasLabelLine) {
+    seriesUnit.labelLine = merge(
+      {
+        show: true,
+        lineStyle: {
+          color: lineColor || chartToken.labelLineColor
+        },
+        smooth: 0.3,
+        length: lineLength,
+        length2: lineLength
+      },
+      seriesUnit.labelLine
+    )
+  } else {
+    seriesUnit.labelLine = {
+      show: false,
+      length: lineLength,
+      length2: lineLength
+    }
+  }
+}
+
+function hasLabelFormatterFun(labelFormatterType, seriesUnit, sum) {
+  switch (labelFormatterType) {
+    case 'percent':
+      seriesUnit.label.formatter = (params) => {
+        if (params.value === 0) {
+          return '0(0 %)'
+        } else {
+          return `${params.value}(${Math.round(((params.value * 100) / sum) * 100) / 100} %)`
+        }
+      }
+      break
+    case 'value':
+      seriesUnit.label.formatter = (params) => {
+        return `${params.value}`
+      }
+      break
+    default:
+      break
+  }
+}
+
+function handleLabelFormatter(hasLabel, hasLabelFormatter, seriesUnit, labelFormatterType, sum) {
+  if (hasLabel && hasLabelFormatter) {
+    seriesUnit.label.formatter = hasLabelFormatter
+  } else {
+    hasLabelFormatterFun(labelFormatterType, seriesUnit, sum)
+  }
+}
+
+/**
+ * 配置圆盘图的label
+ */
+function setLabel(seriesUnit, label, data) {
+  const hasLabel = !(label && label.show === false)
+  const hasLabelLine = !(label && label.line === false)
+  const hasLabelFormatter = label && label.labelHtml
+  const labelFormatterType = (label && label.type) || ''
+  let sum = data.reduce((x, y) => ({ value: x.value + y.value }), { value: 0 })
+  sum = sum.value
+  handleLabel(hasLabel, seriesUnit, label)
+  handleLabelLine(hasLabelLine, seriesUnit, label)
+  handleLabelFormatter(hasLabel, hasLabelFormatter, seriesUnit, labelFormatterType, sum)
+  // 合并label其他属性
+  merge(seriesUnit.label, label)
+}
+
+export default setLabel
diff --git a/packages/vue/src/chart/chart-core/base/components/PieChart/handleMulti.ts b/packages/vue/src/chart/chart-core/base/components/PieChart/handleMulti.ts
new file mode 100644
index 000000000..a6afa6326
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/PieChart/handleMulti.ts
@@ -0,0 +1,119 @@
+import { getColor, codeToRGB, changeRgbaOpacity } from '../../util/color'
+import cloneDeep from '../../util/cloneDeep'
+
+function handleResObj(item, colors, index) {
+  const resObj = cloneDeep(item)
+  resObj.color = {
+    rgba: codeToRGB(getColor(colors, index), 1),
+    from: 1,
+    to: 0.2
+  }
+  return resObj
+}
+
+function handleTempLegend(tempLegend, legendOffset, index) {
+  if (tempLegend.orient === 'horizontal') {
+    const offset = legendOffset || 30
+    const bottom = parseFloat(tempLegend.bottom) - index * parseFloat(offset)
+    if (tempLegend.bottom.toString().includes('%')) {
+      tempLegend.bottom = `${bottom}%`
+    } else {
+      tempLegend.bottom = bottom
+    }
+  } else {
+    const offset = legendOffset || 120
+    const left = parseFloat(tempLegend.left) + index * parseFloat(offset)
+    if (tempLegend.left.toString().includes('%')) {
+      tempLegend.left = `${left}%`
+    } else {
+      tempLegend.left = left
+    }
+  }
+}
+
+function handleTempSeriesObj(item) {
+  const tempSeriesObj = cloneDeep(item)
+  tempSeriesObj.itemStyle = {
+    color: item.color.rgba
+  }
+  return tempSeriesObj
+}
+
+/**
+ * 递归遍历数据
+ * @param {*} data
+ * @param {*} innerData
+ * @param {*} innerIndex
+ */
+function installInnerData(data, innerData, innerIndex) {
+  data.children &&
+    data.children.forEach((citem, cindex) => {
+      if (!innerData[innerIndex]) {
+        innerData[innerIndex] = []
+      }
+      const colorFrom =
+        data.color.from - ((data.color.from - data.color.to) / (data.children.length + 1)) * (cindex + 1)
+      const colorTo = data.color.from - ((data.color.from - data.color.to) / (data.children.length + 1)) * (cindex + 2)
+      citem.color = {
+        rgba: changeRgbaOpacity(data.color.rgba, colorFrom),
+        from: colorFrom,
+        to: colorTo
+      }
+      innerData[innerIndex].push(citem)
+      // 如果还有子层，则继续递归遍历
+      if (citem.children) {
+        installInnerData(citem, innerData, innerIndex + 1)
+      }
+    })
+}
+
+// 针对多重圆环图表需求，图表需要进行特殊处理
+function handleMulti(type, baseOption, legend, data) {
+  if (type === 'multi-circle') {
+    const colors = baseOption.color
+    // 给源数据添加颜色属性
+    const outer = data.map((item, index) => {
+      const resObj = handleResObj(item, colors, index)
+      return resObj
+    })
+    // 组装子层数据，给每个子数据赋值颜色
+    const inner = []
+    const innerDiff = 6
+    const innerIndex = 0
+    outer.forEach((data) => {
+      installInnerData(data, inner, innerIndex)
+    })
+    // 组装series
+    inner.forEach((innerData, innerIndex) => {
+      const tempSeries = cloneDeep(baseOption.series[0])
+      tempSeries.data = innerData.map((item) => {
+        const tempSeriesObj = handleTempSeriesObj(item)
+        return tempSeriesObj
+      })
+      tempSeries.radius = tempSeries.radius.map((item) => {
+        return `${parseFloat(item) + innerDiff * (innerIndex + 1)}%`
+      })
+      baseOption.series.push(tempSeries)
+    })
+    baseOption.series.forEach((i) => {
+      i.label = { show: false }
+      i.labelLine = { show: false }
+    })
+    // 组装legend
+    const dataArray = [outer].concat(inner)
+    const originLegend = baseOption.legend
+    const legendOffset = legend.offset
+    baseOption.legend = []
+    dataArray.forEach((array, index) => {
+      const tempLegend = cloneDeep(originLegend)
+      const tempLegendData = array.map((item) => {
+        return item.name
+      })
+      tempLegend.data = tempLegendData
+      handleTempLegend(tempLegend, legendOffset, index)
+      baseOption.legend.push(tempLegend)
+    })
+  }
+}
+
+export default handleMulti
diff --git a/packages/vue/src/chart/chart-core/base/components/PieChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/PieChart/handleSeries.ts
new file mode 100644
index 000000000..226c05071
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/PieChart/handleSeries.ts
@@ -0,0 +1,193 @@
+import merge from '../../util/merge'
+import setLabel from './handleLabel'
+import chartToken from './chartToken'
+import cloneDeep from '../../util/cloneDeep'
+import { percentToDecimal } from '../../util/math'
+import { isArray, isNumber, isString } from '../../util/type'
+
+export const seriesInit = () => {
+  return {
+    type: 'pie',
+    roundCap: true,
+    radius: ['0%', '50%'],
+    center: ['50%', '50%'],
+    avoidLabelOverlap: true,
+    itemStyle: {
+      borderWidth: chartToken.borderWidth,
+      borderColor: chartToken.borderColor,
+      borderRadius: chartToken.borderRadius
+    },
+    selectedMode: false,
+    roseType: false,
+    label: {},
+    labelLine: {},
+    data: []
+  }
+}
+
+/**
+ * 根据参数计算出圆盘图的半径
+ */
+function setPieRadius(pieType, radius) {
+  if (radius) {
+    return radius
+  } else {
+    let radius = []
+    switch (pieType) {
+      case 'pie':
+        radius = ['0%', '50%']
+        break
+      case 'circle':
+        radius = ['44%', '50%']
+        break
+      case 'multi-circle':
+        radius = ['44%', '50%']
+        break
+      default:
+        radius = ['0%', '50%']
+        break
+    }
+    return radius
+  }
+}
+
+/**
+ * 数据为零时添加背景
+ */
+function handleEmptyData(data, series, center, radius) {
+  const total = data.reduce((pre, cur) => {
+    pre = pre + cur.value
+    return pre
+  }, 0)
+
+  if (total === 0) {
+    series.forEach((item) => {
+      item.stillShowZeroSum = false
+      item.itemStyle.borderWidth = chartToken.borderWidthNone
+    })
+    series.push({
+      type: 'pie',
+      radius,
+      center,
+      label: {
+        show: false
+      },
+      emptyCircleStyle: {
+        color: chartToken.emptyColor
+      },
+      silent: true,
+      animation: false
+    })
+  }
+}
+
+// 余弦定理计算最小1px时的角度
+function minAngle(radius, chartInstance) {
+  const decimalRadiusArr = []
+  let decimalRadius = null
+  let newRadius = null
+
+  if (isNumber(radius)) {
+    newRadius = radius
+  } else if (isString(radius)) {
+    if (radius.endsWith('%')) {
+      decimalRadius = percentToDecimal(radius)
+      newRadius = (Math.min(chartInstance.getWidth(), chartInstance.getHeight()) * decimalRadius) / 2
+    } else {
+      newRadius = parseFloat(radius)
+    }
+  } else if (isArray(radius)) {
+    for (let i = 0; i < radius.length; i++) {
+      if (isNumber(radius[i])) {
+        decimalRadiusArr.push(radius[i] / Math.min(chartInstance.getWidth(), chartInstance.getHeight()))
+      } else if (isString(radius[i])) {
+        if (radius[i].endsWith('%')) {
+          decimalRadiusArr.push(percentToDecimal(radius[i]))
+        } else {
+          decimalRadiusArr.push(parseFloat(radius[i]))
+        }
+      }
+    }
+    decimalRadius = decimalRadiusArr[0] === 0 ? decimalRadiusArr[1] : decimalRadiusArr[0]
+    newRadius = (Math.min(chartInstance.getWidth(), chartInstance.getHeight()) * decimalRadius) / 2
+  }
+  const cosA = (newRadius ** 2 + newRadius ** 2 - 3 ** 2) / (2 * newRadius * newRadius)
+  const angleAInRadians = Math.acos(cosA)
+  const minAngle = angleAInRadians * (180 / Math.PI)
+  return minAngle
+}
+
+// 合并默认值seriesInit到series
+function mergeDefaultSeries(seriesUnit) {
+  for (const key in seriesInit()) {
+    if (Object.hasOwnProperty.call(seriesInit(), key)) {
+      if (key === 'itemStyle') {
+        const series = cloneDeep(seriesInit())
+        seriesUnit[key] = merge(series.itemStyle, seriesUnit.itemStyle)
+      }
+      if (seriesUnit[key] === undefined) {
+        seriesUnit[key] = seriesInit()[key]
+      }
+    }
+  }
+}
+
+/**
+ * 组装echarts所需要的series
+ * @param {数据} data
+ * @returns
+ */
+
+const config = [
+  'label',
+  'labelLine',
+  'itemStyle',
+  'radius',
+  'center',
+  'silent',
+  'emphasis',
+  'stillShowZeroSum',
+  'selectedMode',
+  'roseType',
+  'minAngle'
+]
+
+function handleSeries(pieType, iChartOption, chartInstance, position) {
+  const { data, stillShowZeroSum } = iChartOption
+  position = position || {}
+  iChartOption.center = position?.center
+  iChartOption.radius = position?.radius
+
+  // 组装series数据
+  let series = []
+  let selfSeries = iChartOption.series
+  if (selfSeries === undefined) {
+    selfSeries = [{}]
+  }
+  selfSeries.forEach((seriesItem) => {
+    const seriesUnit = seriesItem
+    const temp = cloneDeep(iChartOption)
+    // 处理属性的优先级
+    config.forEach((name) => {
+      const existValue = merge(temp[name], seriesUnit[name])
+      if (existValue !== undefined) {
+        seriesUnit[name] = existValue
+      }
+    })
+    seriesUnit.data = seriesUnit.data || iChartOption.data
+    seriesUnit.radius = setPieRadius(pieType, seriesUnit.radius)
+    seriesUnit.minAngle =
+      seriesUnit.minAngle !== undefined ? seriesUnit.minAngle : minAngle(seriesUnit.radius, chartInstance)
+    setLabel(seriesUnit, seriesUnit.label, seriesUnit.data)
+    // 默认样式合并
+    mergeDefaultSeries(seriesUnit)
+  })
+  // 数据和为0时不显示扇区 数据和为0时series属性都是一级
+  if (stillShowZeroSum === false) {
+    handleEmptyData(data, selfSeries, selfSeries[0].center, selfSeries[0].radius)
+  }
+  series = selfSeries
+  return series
+}
+
+export default handleSeries
diff --git a/packages/vue/src/chart/chart-core/base/components/PieChart/index.ts b/packages/vue/src/chart/chart-core/base/components/PieChart/index.ts
new file mode 100644
index 000000000..307ff3e7c
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/PieChart/index.ts
@@ -0,0 +1,45 @@
+import init from '../../option/init'
+import { event } from '../../util/event'
+import handleMulti from './handleMulti'
+import handleSeries from './handleSeries'
+import PolarCoordSys from '../../option/PolarSys'
+
+class PieChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance)
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption
+    const type = iChartOption.type || 'circle'
+    // 装载除series之外的其他配置
+    PolarCoordSys(this.baseOption, this.iChartOption, 'PieChart')
+    // 兼容旧属性chartPosition
+    const position = iChartOption.position || iChartOption.chartPosition
+    // 处理series数据
+    this.baseOption.series = handleSeries(type, iChartOption, chartInstance, position)
+    // 针对多重圆环图表需求，图表需要进行特殊处理
+    handleMulti(type, this.baseOption, iChartOption.legend, iChartOption.data)
+    // 配置图表事件
+    if (iChartOption.event) {
+      event(chartInstance, iChartOption.event)
+    }
+    // 是否关闭hover态的效果，默认为false
+    if (iChartOption.silent) {
+      this.baseOption.tooltip = {}
+    }
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption() {}
+}
+
+export default PieChart
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/BaseOption.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/BaseOption.js
new file mode 100644
index 000000000..58ce7fd42
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/BaseOption.js
@@ -0,0 +1,283 @@
+// 进度图的图表类型名称
+const CHARTTYPENAME = {
+  ProcessBarChart: 'ProcessBarChart',
+  StackProcessBarChart: 'StackProcessBarChart'
+}
+// 标识是否为双向进度图
+const PROCESSBARTYPE = 'double-sides'
+// 基础进度图的默认单位
+const BASICUNIT = '%'
+
+const BASICBARWIDTH = {
+  ProcessBarChart: 8,
+  StackProcessBarChart: 20
+}
+// 进度图用来做标题和背景的基础series
+const BASICSERIES = [
+  {
+    // 用来做前面的文本显示
+    name: 'seriesName',
+    type: 'bar',
+    barWidth: 8,
+    barGap: '-100%',
+    // 这条series不响应鼠标事件
+    silent: true,
+    label: {
+      show: true,
+      color: undefined,
+      position: [0, -20],
+      fontSize: 14,
+      formatter: undefined
+    },
+    data: undefined
+  },
+  {
+    // 底色 +右侧label文本显示
+    name: 'background',
+    type: 'bar',
+    barWidth: 8,
+    barGap: '-100%',
+    itemStyle: {
+      color: undefined,
+      borderRadius: 4
+    },
+    emphasis: {
+      disabled: true
+    },
+    label: {
+      show: true,
+      color: undefined,
+      offset: [0, -24],
+      position: 'insideTopRight',
+      fontSize: 14,
+      formatter: undefined
+    },
+    data: undefined
+  }
+]
+// 用于显示基础进度图的实际数据的series
+const BASICDATASERIES = {
+  name: undefined,
+  type: 'bar',
+  zlevel: 2,
+  barWidth: 8,
+  cursor: 'pointer',
+  itemStyle: {
+    borderRadius: 4,
+    color: undefined
+  },
+  data: undefined,
+  label: {
+    show: false,
+    color: undefined,
+    formatter: undefined
+  }
+}
+// 双向进度图的基础series
+const DOUBLEBASICOPTION = {
+  grid: [
+    // 左边的坐标系
+    {
+      left: '4%',
+      width: '46%',
+      top: 0,
+      bottom: 0,
+      containLabel: false
+    },
+    // 右边的坐标系
+    {
+      right: '4%',
+      width: '46%',
+      top: 0,
+      bottom: 0,
+      containLabel: false
+    }
+  ],
+  xAxis: [
+    // 左侧的x轴
+    {
+      show: true,
+      type: 'value',
+      gridIndex: 0,
+      inverse: true,
+      axisLabel: {
+        show: false
+      },
+      splitLine: {
+        lineStyle: {
+          type: [8, 4]
+        }
+      },
+      max: 'dataMax'
+    },
+    // 右侧的x轴
+    {
+      show: true,
+      type: 'value',
+      gridIndex: 1,
+      splitLine: {
+        lineStyle: {
+          type: [8, 4]
+        }
+      },
+      axisLabel: {
+        show: false
+      },
+      max: 'dataMax'
+    }
+  ],
+  yAxis: [
+    {
+      // 左侧的y轴
+      type: 'category',
+      gridIndex: 0,
+      show: true,
+      inverse: true,
+      axisLabel: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: undefined
+        }
+      },
+      position: 'right',
+      data: undefined
+    },
+    {
+      // 右侧的y轴
+      type: 'category',
+      gridIndex: 1,
+      inverse: true,
+      show: false,
+      data: undefined
+    }
+  ],
+  series: [
+    {
+      // 实际数据 + 左侧数值
+      name: '',
+      xAxisIndex: 0,
+      yAxisIndex: 0,
+      type: 'bar',
+      zlevel: 2,
+      barWidth: 8,
+      itemStyle: {
+        borderRadius: [4, 0, 0, 4],
+        color: undefined
+      },
+      data: undefined,
+      emphasis: {
+        disabled: true
+      },
+      label: {
+        show: false
+      }
+    },
+    {
+      // 左侧底色
+      name: 'backgroundLeft',
+      type: 'bar',
+      xAxisIndex: 0,
+      yAxisIndex: 0,
+      barWidth: 8,
+      barGap: '-100%',
+      itemStyle: {
+        color: undefined,
+        borderRadius: [4, 0, 0, 4]
+      },
+      emphasis: {
+        disabled: true
+      },
+      label: {
+        show: true,
+        offset: [0, 0],
+        position: 'insideBottomLeft',
+        formatter: undefined,
+        rich: {
+          nameLeft: {
+            fontSize: 14,
+            color: undefined,
+            lineHeight: 14,
+            padding: [0, 0, 20, 0]
+          },
+          valueLeft: {
+            fontSize: 14,
+            color: undefined,
+            lineHeight: 14,
+            fontWeight: 'bold'
+          }
+        }
+      },
+      data: undefined
+    },
+    {
+      // 实际数据 + 右侧数值
+      name: '',
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      type: 'bar',
+      zlevel: 2,
+      barWidth: 8,
+      itemStyle: {
+        borderRadius: [0, 4, 4, 0],
+        color: undefined
+      },
+      emphasis: {
+        disabled: true
+      },
+      label: {
+        show: false
+      },
+      data: undefined
+    },
+    {
+      // 右侧底色
+      name: 'backgroundRight',
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      type: 'bar',
+      barWidth: 8,
+      barGap: '-100%',
+      itemStyle: {
+        color: undefined,
+        borderRadius: [0, 4, 4, 0]
+      },
+      emphasis: {
+        disabled: true
+      },
+      label: {
+        show: true,
+        offset: [0, 0],
+        position: 'insideBottomRight',
+        formatter: undefined,
+        rich: {
+          nameRight: {
+            fontSize: 14,
+            color: '',
+            lineHeight: 14,
+            padding: [0, 0, 20, 0],
+            align: 'right'
+          },
+          valueRight: {
+            fontSize: 14,
+            color: '',
+            lineHeight: 14,
+            align: 'right',
+            fontWeight: 'bold'
+          }
+        }
+      },
+      data: undefined
+    }
+  ]
+}
+
+export { PROCESSBARTYPE, CHARTTYPENAME, BASICUNIT, BASICSERIES, DOUBLEBASICOPTION, BASICDATASERIES, BASICBARWIDTH }
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/chartToken.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/chartToken.js
new file mode 100644
index 000000000..23b3aad2f
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/chartToken.js
@@ -0,0 +1,5 @@
+import Theme from '../../feature/token'
+
+const chartToken = Theme.getTokenByName('ProcessChart')
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleData.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleData.js
new file mode 100644
index 000000000..e4cef26c9
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleData.js
@@ -0,0 +1,144 @@
+import { CHARTTYPENAME } from './BaseOption'
+import max from '../../util/sort/max'
+
+// 处理有minWidth极限值的情况下给echarts渲染的数据
+function handleLimitVal(data, iChartOpt, demarcatedValue) {
+  const dataItem = { ...data, _initValue: undefined }
+  const { minWidth } = iChartOpt
+  // 数据的最小宽度是一个百分比，用于控制数据之间差距过大导致部分数据显示不明显，导致无法交互的情况
+  if (minWidth) {
+    const limitValue = demarcatedValue * (parseInt(minWidth) / 100)
+    if (data.value && data.value < limitValue) {
+      dataItem.value = limitValue
+      dataItem._initValue = data.value
+    }
+  }
+  return dataItem
+}
+
+function handleDoubleSideData(dataSet, data, iChartOpt, demarcatedValue) {
+  data.forEach((item) => {
+    dataSet.seriesName.push(item.name)
+    const childBarName = []
+    const childBarData = []
+    if (item.children && item.children.length !== 0) {
+      item.children.forEach((el) => {
+        childBarName.push(el.name)
+        const innerDataItem = handleLimitVal(el, iChartOpt, demarcatedValue)
+        childBarData.push(innerDataItem)
+      })
+      dataSet.barName.push(childBarName)
+      dataSet.barData.push(childBarData)
+    }
+  })
+}
+
+function handleBasicProcessData(iChartOpt, dataSet, data, doubleSide, dataMax) {
+  // 内部显示进度的最大值
+  const demarcatedValue = dataMax || 100
+  dataSet.maxValue = demarcatedValue
+  if (doubleSide) {
+    handleDoubleSideData(dataSet, data, iChartOpt, demarcatedValue)
+    return
+  }
+  data.forEach((dataItem) => {
+    dataSet.barName.push(dataItem.name)
+    const innerDataItem = handleLimitVal(dataItem, iChartOpt, demarcatedValue)
+    dataSet.barData.push(innerDataItem)
+  })
+}
+
+function getSerirsDataMax(dataSet, data, dataMax) {
+  let sumValueMax
+  const sumValue = []
+  data.forEach((el) => {
+    let _sumValue = 0
+    el.children.forEach((child) => {
+      if (child.value) {
+        _sumValue += child.value
+      }
+    })
+    sumValue.push(_sumValue)
+  })
+  sumValueMax = max(sumValue)
+  if (dataMax && dataMax > sumValueMax) {
+    sumValueMax = dataMax
+  }
+  dataSet.maxValue = sumValueMax
+  dataSet.sumValue = sumValue
+}
+
+function setMaxValueAgain(dataSet, dataMax) {
+  const sum = []
+  const len = dataSet.seriesName.length
+  for (let i = 0; i < len; i++) {
+    let sumValue = 0
+    dataSet.barData.forEach((item) => {
+      if (item[i].value) {
+        sumValue += item[i].value
+      }
+    })
+    sum.push(sumValue)
+  }
+  let maxValue = max(sum)
+  if (dataMax && dataMax > maxValue) {
+    maxValue = dataMax
+  }
+  dataSet.maxValue = maxValue
+}
+
+function handleStackProcessData(iChartOpt, dataSet, data, dataMax) {
+  // 获取系列名称
+  data.forEach((element) => {
+    dataSet.seriesName.push(element.name)
+  })
+  // 单独系列名称
+  data[0].children.forEach((el) => {
+    dataSet.barName.push(el.type)
+  })
+  // 单一系列各项数据用来获取数据的标定值
+  getSerirsDataMax(dataSet, data, dataMax)
+  // 对各系列数据进行组装分类
+  dataSet.barName.forEach((type) => {
+    // 每个系列单独的数据
+    const seriesData = []
+    data.forEach((child) => {
+      const childItem = child.children.find((el) => el.type === type)
+      const innerChidItem = handleLimitVal(childItem, iChartOpt, dataSet.maxValue)
+      seriesData.push(innerChidItem)
+    })
+
+    dataSet.barData.push(seriesData)
+  })
+  // 在有minwidth的情景下重新去计算所有系列求和的最大值
+  if (iChartOpt.minWidth) {
+    setMaxValueAgain(dataSet, dataMax)
+  }
+}
+
+function handleData(iChartOpt, doubleSide) {
+  const { data, name } = iChartOpt
+  if (!data) return null
+  if (data && data.length > 0) {
+    // 数据集合
+    const dataSet = {
+      // 图表子项数据
+      barData: [],
+      // 图表的标题数据
+      barName: [],
+      // 图表的最大值
+      maxValue: undefined,
+      // 图表的系列名称
+      seriesName: []
+    }
+    // 当前图表单个系列数据的最大值，用来做数据占比
+    const dataMax = iChartOpt.calibrationValue || iChartOpt.max
+    if (name === CHARTTYPENAME.ProcessBarChart) {
+      handleBasicProcessData(iChartOpt, dataSet, data, doubleSide, dataMax)
+    } else {
+      handleStackProcessData(iChartOpt, dataSet, data, dataMax)
+    }
+    return dataSet
+  }
+}
+export default handleData
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleOption.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleOption.js
new file mode 100644
index 000000000..c45ece556
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleOption.js
@@ -0,0 +1,220 @@
+import { BASICUNIT, CHARTTYPENAME, DOUBLEBASICOPTION } from './BaseOption'
+import merge from '../../util/merge'
+import defendXSS from '../../util/defendXSS'
+import { isString, isArray } from '../../util/type'
+import { handleBarColor } from './handleSeries'
+import cloneDeep from '../../util/cloneDeep'
+import chartToken from './chartToken'
+
+function handleGridWidth(baseOpt, padding, chartInstance) {
+  const right = padding[1]
+  const left = padding[3]
+  const containerWidth = chartInstance.getWidth()
+  const isStrR = isString(right)
+  const isStrL = isString(left)
+  const isPtR = isStrR && right.includes('%')
+  const isPtL = isStrL && left.includes('%')
+  baseOpt.grid[0].left = left
+  baseOpt.grid[1].right = right
+  // 左右都是百分比
+  if (isPtR && isPtL) {
+    const width = (100 - parseInt(left) - parseInt(right)) / 2
+    baseOpt.grid[0].width = `${width}%`
+    baseOpt.grid[1].width = `${width}%`
+    return
+  }
+  const leftPadding = isPtL ? (containerWidth * parseInt(left)) / 100 : parseInt(left)
+  const rightPadding = isPtR ? (containerWidth * parseInt(right)) / 100 : parseInt(right)
+  const horizontalPadding = leftPadding + rightPadding
+  const gridWidth = (containerWidth - horizontalPadding) / 2
+  baseOpt.grid[0].width = gridWidth
+  baseOpt.grid[1].width = gridWidth
+}
+
+function handleDoubleGrid(baseOpt, iChartOpt, chartInstance) {
+  const { padding } = iChartOpt
+  baseOpt.grid[0].top = padding[0]
+  baseOpt.grid[0].bottom = padding[2]
+  baseOpt.grid[1].top = padding[0]
+  baseOpt.grid[1].bottom = padding[2]
+  handleGridWidth(baseOpt, padding, chartInstance)
+}
+
+function handleMergeOption(target, source) {
+  target.forEach((item, index) => {
+    merge(item, isArray(source) ? source[index] : source)
+  })
+}
+
+function handleGrid(baseOpt, iChartOpt, doubleSide, chartInstance) {
+  if (doubleSide) {
+    baseOpt.grid = cloneDeep(DOUBLEBASICOPTION.grid)
+    handleDoubleGrid(baseOpt, iChartOpt, chartInstance)
+  } else {
+    baseOpt.grid[0].containLabel = false
+  }
+  if (iChartOpt.grid) {
+    handleMergeOption(baseOpt.grid, iChartOpt.grid)
+  }
+}
+
+function handleYaxis(baseOpt, iChartOpt, dataSet, doubleSide) {
+  if (doubleSide) {
+    baseOpt.yAxis = cloneDeep(DOUBLEBASICOPTION.yAxis)
+    baseOpt.yAxis[0].show = true
+    baseOpt.yAxis[0].axisLine.lineStyle.color = chartToken.axisLineColor
+    baseOpt.yAxis[0].data = dataSet.barName[0]
+    baseOpt.yAxis[1].data = dataSet.barName[1]
+  } else {
+    baseOpt.yAxis[0].inverse = true
+    baseOpt.yAxis[0].show = false
+    baseOpt.yAxis[0].data = iChartOpt.name === CHARTTYPENAME.ProcessBarChart ? dataSet.barName : dataSet.seriesName
+    baseOpt.yAxis[0].type = 'category'
+  }
+  if (iChartOpt.yAxis) {
+    handleMergeOption(baseOpt.yAxis, iChartOpt.yAxis)
+  }
+}
+
+function handleXaxis(baseOpt, doubleSide, iChartOpt) {
+  if (doubleSide) {
+    baseOpt.xAxis = cloneDeep(DOUBLEBASICOPTION.xAxis)
+  } else {
+    baseOpt.xAxis[0].show = false
+    baseOpt.xAxis[0].type = 'value'
+    // 保证图表能横向撑满容器
+    baseOpt.xAxis[0].max = 'dataMax'
+  }
+  if (iChartOpt.xAxis) {
+    handleMergeOption(baseOpt.xAxis, iChartOpt.xAxis)
+  }
+}
+
+function handleDataZoom(baseOpt, initIchartOption) {
+  if (initIchartOption.dataZoom) {
+    handleMergeOption(baseOpt.dataZoom, initIchartOption.dataZoom)
+  }
+}
+
+function handleLegend(baseOpt, dataSet, doubleSide, initIchartOption) {
+  if (doubleSide) {
+    baseOpt.legend.data = dataSet.seriesName.map((item) => {
+      return {
+        name: item
+      }
+    })
+  } else {
+    baseOpt.legend.show = false
+  }
+  if (initIchartOption.legend) {
+    merge(baseOpt.legend, initIchartOption.legend)
+  }
+}
+
+function handleTipValue(params, dataSet, doubleSide) {
+  let value
+  if (doubleSide) {
+    value =
+      dataSet.barData[Math.floor(params.seriesIndex / 2)][params.dataIndex]._initValue ||
+      dataSet.barData[Math.floor(params.seriesIndex / 2)][params.dataIndex].value
+  } else {
+    value = dataSet.barData[params.dataIndex]._initValue || dataSet.barData[params.dataIndex].value
+  }
+  return value
+}
+
+function handleTipFormatter(baseOpt, iChartOpt, dataSet, doubleSide) {
+  const { unit, tipHtml } = iChartOpt
+  if (tipHtml) {
+    baseOpt.tooltip.formatter = tipHtml
+    return
+  }
+  const innerUnit = unit || unit === '' ? unit : BASICUNIT
+  const isItemTooltip = baseOpt.tooltip.trigger === 'item'
+  const ichartTooltipFormatter = iChartOpt?.tooltip?.formatter
+
+  baseOpt.tooltip.formatter = (echartsParams) => {
+    const params = isItemTooltip ? echartsParams : echartsParams[0]
+    const name = params.name
+    const seriesName = params.seriesName
+    const value = handleTipValue(params, dataSet, doubleSide)
+    const color =
+      seriesName === 'background' || seriesName === 'backgroundLeft' || seriesName === 'backgroundRight'
+        ? handleBarColor(params, iChartOpt, dataSet, doubleSide, true)
+        : params.color
+    const validData = value === null || value === undefined
+    if (ichartTooltipFormatter) {
+      const customParams = { ...params, value, color, data: value, unit: innerUnit }
+      return ichartTooltipFormatter(customParams)
+    }
+    if (name === 'null') return
+    const htmlString = `
+                          <div>
+                              <span style="display:inline-block;width:10px;height:10px;
+                              border-radius:5px;background-color:${defendXSS(color)};">
+                              </span>
+                              <span style="margin-left:5px;">
+                                  <span style="display:inline-block;margin-right:8px;min-width:80px;">${defendXSS(
+                                    name
+                                  )}</span> 
+                                  <span style="font-weight:bold">${validData ? '--' : defendXSS(value)}${defendXSS(
+                                    innerUnit
+                                  )}</span>
+                              </span>
+                          </div>
+                      `
+    return htmlString
+  }
+}
+
+function handleStackTipFormatter(baseOpt, iChartOpt) {
+  baseOpt.tooltip.trigger = 'axis'
+  const { tipHtml } = iChartOpt
+  if (tipHtml) {
+    baseOpt.tooltip.formatter = tipHtml
+    return
+  }
+  baseOpt.tooltip.formatter = (params) => {
+    const name = params[0].name
+    if (name === 'null') return
+    let htmlString = `<div style="margin-bottom:4px;">${defendXSS(name)}</div>`
+    params.forEach((param, index) => {
+      if (index > 1) {
+        const value = param.data._initValue || param.data.value
+        htmlString += `<div>
+      <span style="display:inline-block;width:10px;height:10px;
+      border-radius:5px;background-color:${defendXSS(param.color)};">
+      </span>
+      <span style="margin-left:5px;">
+          <span style="display:inline-block;margin-right:8px;min-width:80px;">${defendXSS(param.seriesName)}</span>
+          <span style="font-weight:bold">${defendXSS(value) || (defendXSS(value) === 0 ? defendXSS(value) : '--')}${
+            defendXSS(iChartOpt.unit) || ''
+          }</span>
+      </span>
+  </div>
+`
+      }
+    })
+    return htmlString
+  }
+}
+
+function handleTooltip(baseOpt, iChartOpt, dataSet, doubleSide) {
+  baseOpt.tooltip.axisPointer.type = 'none'
+  baseOpt.tooltip.trigger = 'item'
+  if (iChartOpt.tooltip) {
+    merge(baseOpt.tooltip, iChartOpt.tooltip)
+    // 当不显示tip的时候鼠标移动上去没有小手效果
+    if (iChartOpt.tooltip.show === false) {
+      baseOpt.series.forEach((item) => {
+        item.cursor = 'auto'
+      })
+    }
+  }
+  if (iChartOpt.name === CHARTTYPENAME.ProcessBarChart) {
+    handleTipFormatter(baseOpt, iChartOpt, dataSet, doubleSide)
+  } else {
+    handleStackTipFormatter(baseOpt, iChartOpt)
+  }
+}
+export { handleGrid, handleYaxis, handleXaxis, handleDataZoom, handleLegend, handleTooltip }
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleSeries.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleSeries.js
new file mode 100644
index 000000000..3b07e1c42
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleSeries.js
@@ -0,0 +1,362 @@
+import { CHARTTYPENAME, DOUBLEBASICOPTION, BASICSERIES, BASICDATASERIES, BASICUNIT, BASICBARWIDTH } from './BaseOption'
+import cloneDeep from '../../util/cloneDeep'
+import { getColor } from '../../util/color'
+import merge from '../../util/merge'
+import { getTextWidth } from '../../util/dom'
+import chartToken from './chartToken'
+import Theme from '../../feature/token'
+
+function setStateBarColor(data, stateColorGroup, successColor, stateList) {
+  const min = stateList[0]
+  const max = stateList[stateList.length - 1]
+  // 最大值和最小值相等代表就一个值
+  if (min.value === max.value) {
+    const resState = min.state
+    return data < min.value ? successColor : stateColorGroup[resState]
+  } else {
+    if (data < min.value) {
+      return successColor
+    }
+    if (data > max.value) {
+      const resState = max.state
+      return stateColorGroup[resState]
+    }
+    const len = stateList.length
+    let color
+    for (let i = 0; i < len; i++) {
+      if (stateList[i].value >= data) {
+        const index = i > 0 ? i - 1 : 0
+        const resState = stateList[index].state
+        color = stateColorGroup[resState]
+        break
+      }
+    }
+    return color
+  }
+}
+
+function handleBarColor(params, iChartOpt, dataSet, doubleSide, isTip = false) {
+  const { state, color } = iChartOpt
+  // 是否传了阈值设置
+  if (state) {
+    const { colorState } = Theme.config
+    const stateColorGroup = {
+      error: colorState.colorError,
+      warning: colorState.colorAlert,
+      subwarning: colorState.colorWarning,
+      success: colorState.colorSuccess
+    }
+    const successColor = stateColorGroup.success
+    // 值与状态对应数组
+    const stateList = []
+    for (const k in state) {
+      if (Object.hasOwnProperty.call(state, k)) {
+        const stateItem = {
+          state: k,
+          value: state[k]
+        }
+        stateList.push(stateItem)
+      }
+    }
+    stateList.sort((a, b) => a.value - b.value)
+    return setStateBarColor(
+      isTip ? dataSet.barData[params.dataIndex].value : params.data.value,
+      stateColorGroup,
+      successColor,
+      stateList
+    )
+  } else {
+    return getColor(color, doubleSide ? Math.floor(params.seriesIndex / 2) : params.dataIndex)
+  }
+}
+
+function handleBasicProcessSeries(baseOpt, iChartOpt, dataSet, doubleSide) {
+  baseOpt.series = doubleSide ? cloneDeep(DOUBLEBASICOPTION.series) : cloneDeep(BASICSERIES)
+  if (doubleSide) {
+    // 数据
+    baseOpt.series[0].data = dataSet.barData[0]
+    baseOpt.series[2].data = dataSet.barData[1]
+    baseOpt.series[0].name = dataSet.seriesName[0]
+    baseOpt.series[2].name = dataSet.seriesName[1]
+    baseOpt.series[0].itemStyle.color = getColor(iChartOpt.color, 0)
+    baseOpt.series[2].itemStyle.color = getColor(iChartOpt.color, 1)
+    // 背景
+    baseOpt.series[1].data = new Array(dataSet.barData[0].length).fill(dataSet.maxValue)
+    baseOpt.series[3].data = new Array(dataSet.barData[1].length).fill(dataSet.maxValue)
+  } else {
+    baseOpt.series[0].data = new Array(dataSet.barData.length).fill(0)
+    baseOpt.series[1].data = new Array(dataSet.barData.length).fill(dataSet.maxValue)
+    const dataSreies = cloneDeep(BASICDATASERIES)
+    dataSreies.name = 'data'
+    dataSreies.data = dataSet.barData
+    dataSreies.itemStyle.color = (params) => {
+      return handleBarColor(params, iChartOpt, dataSet, doubleSide)
+    }
+    baseOpt.series.push(dataSreies)
+  }
+}
+
+function setBarBordRadius(barData, seriesName) {
+  // 每行的总数据
+  const total = []
+  for (let rowIndex = 0; rowIndex < seriesName.length; rowIndex++) {
+    const rowData = []
+    barData.forEach((item, columnIndex) => {
+      if (item[rowIndex].value) {
+        const dataInfo = {
+          columnIndex,
+          rowIndex,
+          value: item[rowIndex].value
+        }
+        rowData.push(dataInfo)
+      }
+    })
+    total.push(rowData)
+  }
+  total.forEach((to) => {
+    const tolen = to.length
+    if (tolen !== 0) {
+      // 每行只有一个有效数据
+      if (tolen === 1) {
+        barData[to[0].columnIndex][to[0].rowIndex] = {
+          ...barData[to[0].columnIndex][to[0].rowIndex],
+          value: barData[to[0].columnIndex][to[0].rowIndex].value,
+          itemStyle: {
+            borderRadius: [4, 4, 4, 4]
+          }
+        }
+      } else {
+        barData[to[0].columnIndex][to[0].rowIndex] = {
+          ...barData[to[0].columnIndex][to[0].rowIndex],
+          value: barData[to[0].columnIndex][to[0].rowIndex].value,
+          itemStyle: {
+            borderRadius: [4, 0, 0, 4]
+          }
+        }
+        barData[to[to.length - 1].columnIndex][to[to.length - 1].rowIndex] = {
+          ...barData[to[to.length - 1].columnIndex][to[to.length - 1].rowIndex],
+          value: barData[to[to.length - 1].columnIndex][to[to.length - 1].rowIndex].value,
+          itemStyle: {
+            borderRadius: [0, 4, 4, 0]
+          }
+        }
+      }
+    }
+  })
+}
+
+function handleStackProcessSeries(baseOpt, iChartOpt, dataSet) {
+  // 处理堆叠情况下图表的两端圆角情况,在数据项中加入圆角的配置
+  setBarBordRadius(dataSet.barData, dataSet.seriesName)
+  baseOpt.series = cloneDeep(BASICSERIES)
+  baseOpt.series[0].data = new Array(dataSet.seriesName.length).fill(0)
+  baseOpt.series[1].data = new Array(dataSet.seriesName.length).fill(dataSet.maxValue)
+  dataSet.barData.forEach((item, index) => {
+    const unitSeries = cloneDeep(BASICDATASERIES)
+    unitSeries.data = item
+    unitSeries.itemStyle.borderRadius = undefined
+    unitSeries.name = dataSet.barName[index]
+    unitSeries.stack = 'total'
+    baseOpt.series.push(unitSeries)
+  })
+}
+
+function handleBasicProcessTheme(baseOpt, doubleSide) {
+  const { itemBgEmpty, axisLabelColor } = chartToken
+  if (doubleSide) {
+    baseOpt.series.forEach((ser, serIndex) => {
+      if (serIndex % 2 !== 0) {
+        ser.itemStyle.color = itemBgEmpty
+        // 右侧label颜色
+        ser.label.color = axisLabelColor
+      }
+    })
+  } else {
+    baseOpt.series[0].label.color = axisLabelColor
+    baseOpt.series[1].label.color = axisLabelColor
+    baseOpt.series[1].itemStyle.color = itemBgEmpty
+  }
+}
+
+function handleStackProcessTheme(baseOpt, iChartOpt) {
+  const { itemBgEmpty, axisLabelColor, labeColor } = chartToken
+  // 背景柱条颜色
+  baseOpt.series[1].itemStyle.color = itemBgEmpty
+  // 右侧label颜色
+  baseOpt.series[1].label.color = axisLabelColor
+  // 左侧label颜色
+  baseOpt.series[0].label.color = axisLabelColor
+  // 柱条和文本的颜色
+  baseOpt.series.forEach((serie, index) => {
+    if (index > 1) {
+      serie.itemStyle.color = (params) => {
+        return getColor(iChartOpt.color, params.seriesIndex - 2)
+      }
+      serie.label.show = true
+      serie.label.color = labeColor
+    }
+  })
+}
+
+function handleDoubleLabel(params, iChartOpt, dataSet, position, index = 0) {
+  const { name, dataIndex } = params
+  const innerVal = dataSet.barData[index][dataIndex]._initValue || dataSet.barData[index][dataIndex].value
+  if (innerVal === null || innerVal === undefined) return ''
+  const innerUnit = iChartOpt.unit || iChartOpt.unit === '' ? iChartOpt.unit : BASICUNIT
+  const val = `${innerVal}${innerUnit}`
+  return `{name${position}|${name}}\n{value${position}|${val}}`
+}
+
+function getMaxValLength(dataSet, iChartOpt, index) {
+  let maxLength = 0
+  const innerUnit = iChartOpt.unit || iChartOpt.unit === '' ? iChartOpt.unit : BASICUNIT
+  dataSet.barData[index].forEach((item) => {
+    const val = `${item._initValue || item.value}${innerUnit}`
+    const len = getTextWidth(val, 14)
+    if (len >= maxLength) maxLength = len
+  })
+  return maxLength
+}
+
+function setTitle(baseOpt, iChartOpt) {
+  if (iChartOpt.title) merge(baseOpt.series[0].label, iChartOpt.title)
+}
+
+function setText(baseOpt, iChartOpt, dataSet) {
+  if (iChartOpt.text) {
+    merge(baseOpt.series[1].label, iChartOpt.text)
+    const { formatter } = iChartOpt.text
+    // 右侧为背景的lable为了让用户自定义的formatter获取的params获得中间数据的value去做了内部覆盖处理
+    if (formatter) {
+      baseOpt.series[1].label.formatter = (params) => {
+        const { dataIndex } = params
+        const value = dataSet.barData[dataIndex]._initValue || dataSet.barData[dataIndex].value
+        const inerParams = {
+          ...params,
+          value,
+          data: value
+        }
+        return formatter(inerParams)
+      }
+    }
+  }
+}
+
+function setBarLabel(baseOpt, iChartOpt, dataSet) {
+  // 左侧label
+  baseOpt.series[0].label.formatter = (params) => {
+    return params.name === 'null' || params.name === 'undefined' ? '' : params.name
+  }
+  // 右侧label
+  baseOpt.series[1].label.formatter = (params) => {
+    const innerVal = dataSet.barData[params.dataIndex]._initValue || dataSet.barData[params.dataIndex].value
+    if (innerVal === null || innerVal === undefined) return ''
+    const innerUnit = iChartOpt.unit || iChartOpt.unit === '' ? iChartOpt.unit : BASICUNIT
+    return `${innerVal}${innerUnit}`
+  }
+}
+
+function handleBasicProcessLabel(baseOpt, iChartOpt, dataSet, doubleSide) {
+  if (doubleSide) {
+    const { labeColor, disabledColor } = chartToken
+    // 左侧label
+    baseOpt.series[1].label.formatter = function (params) {
+      return handleDoubleLabel(params, iChartOpt, dataSet, 'Left')
+    }
+    baseOpt.series[3].label.formatter = function (params) {
+      return handleDoubleLabel(params, iChartOpt, dataSet, 'Right', 1)
+    }
+    const valWidthL = getMaxValLength(dataSet, iChartOpt, 0)
+    const valWidthR = getMaxValLength(dataSet, iChartOpt, 1)
+    baseOpt.series[1].label.rich.nameLeft.color = disabledColor
+    baseOpt.series[1].label.rich.valueLeft.color = labeColor
+    baseOpt.series[1].label.offset = [-valWidthL - 10, 9]
+    baseOpt.series[3].label.rich.nameRight.color = disabledColor
+    baseOpt.series[3].label.rich.valueRight.color = labeColor
+    baseOpt.series[3].label.offset = [valWidthR + 10, 9]
+  } else {
+    setBarLabel(baseOpt, iChartOpt, dataSet)
+    // 标题文本显示省略
+    setTitle(baseOpt, iChartOpt)
+    // 右侧数据文本显示省略
+    setText(baseOpt, iChartOpt, dataSet)
+  }
+}
+
+function handleStackProcessLabel(baseOpt, iChartOpt, dataSet) {
+  // 处理左侧的文本显示
+  baseOpt.series[0].label.formatter = (params) => {
+    return params.name === 'null' || params.name === 'undefined' ? '' : params.name
+  }
+  if (iChartOpt.title) {
+    merge(baseOpt.series[0].label, iChartOpt.title)
+  }
+  // 处理右侧的文本显示
+  baseOpt.series[1].label.formatter = (params) => {
+    // 系列名称为null不显示文本(数据缺省功能)
+    const name = dataSet.seriesName[params.dataIndex]
+    if (name === null || name === undefined) return ''
+    // 兼容之前暴露的自定义右侧文本显示的功能，计划后期去除
+    if (iChartOpt.text && iChartOpt.text.labelText) return iChartOpt.text.labelText[params.dataIndex]
+    if (iChartOpt.unit) return `${dataSet.sumValue[params.dataIndex]}${iChartOpt.unit}`
+    return `${dataSet.sumValue[params.dataIndex]}`
+  }
+  // 右侧数据文本样式
+  if (iChartOpt.text) {
+    merge(baseOpt.series[1].label, iChartOpt.text)
+  }
+  // 处理数据的文本显示,只有值为有效值的时候才显示label
+  baseOpt.series.forEach((serie, index) => {
+    if (index > 1)
+      serie.label.formatter = (params) => {
+        const value = params.data._initValue || params.data.value
+        return value || ''
+      }
+  })
+  // 中间的图元的文本样式
+  if (iChartOpt.label) {
+    baseOpt.series.forEach((serie, serieIndex) => {
+      if (serieIndex > 1) merge(serie.label, iChartOpt.label)
+    })
+  }
+}
+
+function handleLabel(baseOpt, iChartOpt, dataSet, doubleSide) {
+  if (iChartOpt.name === CHARTTYPENAME.ProcessBarChart) {
+    handleBasicProcessLabel(baseOpt, iChartOpt, dataSet, doubleSide)
+  } else {
+    handleStackProcessLabel(baseOpt, iChartOpt, dataSet)
+  }
+}
+
+function handleTheme(baseOpt, iChartOpt, doubleSide) {
+  if (iChartOpt.name === CHARTTYPENAME.ProcessBarChart) {
+    handleBasicProcessTheme(baseOpt, doubleSide)
+  } else {
+    handleStackProcessTheme(baseOpt, iChartOpt)
+  }
+}
+
+function handleBarWidth(baseOpt, iChartOpt) {
+  const { name } = iChartOpt
+  const barWidth = iChartOpt.barWidth || BASICBARWIDTH[name]
+  baseOpt.series.forEach((serie) => {
+    serie.barWidth = barWidth
+  })
+}
+
+function handleSeries(baseOpt, iChartOpt, dataSet, doubleSide) {
+  if (iChartOpt.name === CHARTTYPENAME.ProcessBarChart) {
+    handleBasicProcessSeries(baseOpt, iChartOpt, dataSet, doubleSide)
+  } else {
+    handleStackProcessSeries(baseOpt, iChartOpt, dataSet)
+  }
+  //   处理默认的图表主题
+  handleTheme(baseOpt, iChartOpt, doubleSide)
+
+  handleLabel(baseOpt, iChartOpt, dataSet, doubleSide)
+
+  handleBarWidth(baseOpt, iChartOpt)
+}
+export { handleBarColor }
+export default handleSeries
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/index.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/index.js
new file mode 100644
index 000000000..70f862aa8
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/index.js
@@ -0,0 +1,62 @@
+import init from '../../option/init'
+import RectCoordSys from '../../option/RectSys'
+import { PROCESSBARTYPE } from './BaseOption'
+import handleData from './handleData'
+import { event } from '../../util/event'
+import { handleGrid, handleYaxis, handleXaxis, handleDataZoom, handleLegend, handleTooltip } from './handleOption'
+import handleSeries from './handleSeries'
+import cloneDeep from '../../util/cloneDeep'
+
+class ProcessChart {
+  constructor(iChartOption, chartInstance) {
+    // 保存初始的iChartOption
+    this.initIchartOption = cloneDeep(iChartOption)
+    this.baseOption = {}
+    this.iChartOption = {}
+    this.chartInstance = chartInstance
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption()
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption
+    if (!iChartOption.name) {
+      throw new Error('ProcessChart must have a name')
+    }
+    // 加载默认的直角坐标系
+    RectCoordSys(this.baseOption, iChartOption, iChartOption.name)
+    // 是否是基础双向进度图
+    const doubleSide = iChartOption.type && iChartOption.type === PROCESSBARTYPE
+    const dataSet = handleData(iChartOption, doubleSide)
+    if (!dataSet) return
+
+    handleGrid(this.baseOption, iChartOption, doubleSide, this.chartInstance)
+
+    handleYaxis(this.baseOption, iChartOption, dataSet, doubleSide)
+
+    handleXaxis(this.baseOption, doubleSide, iChartOption)
+    // datazoom和legend会在init配置默认值做特殊处理手动用初始值做混合
+    handleDataZoom(this.baseOption, this.initIchartOption)
+
+    handleLegend(this.baseOption, dataSet, doubleSide, this.initIchartOption)
+
+    handleSeries(this.baseOption, iChartOption, dataSet, doubleSide)
+
+    handleTooltip(this.baseOption, iChartOption, dataSet, doubleSide)
+
+    //  加载事件
+    event(this.chartInstance, iChartOption.event)
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption(option) {
+    this.baseOption = option
+  }
+}
+
+export default ProcessChart
diff --git a/packages/vue/src/chart/chart-core/base/components/RadarChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/RadarChart/chartToken.ts
new file mode 100644
index 000000000..20883f806
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/RadarChart/chartToken.ts
@@ -0,0 +1,5 @@
+import Theme from '../../feature/token'
+
+const chartToken = Theme.getTokenByName('RadarChart')
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/RadarChart/getRadar.ts b/packages/vue/src/chart/chart-core/base/components/RadarChart/getRadar.ts
new file mode 100644
index 000000000..9c0c1f184
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/RadarChart/getRadar.ts
@@ -0,0 +1,62 @@
+import Theme from '../../feature/token'
+
+export default function getRadar() {
+  return {
+    // 雷达坐标系位置
+    center: ['50%', '50%'],
+    // 雷达坐标系半径
+    radius: '50%',
+    // 指示器名称与轴的距离
+    axisNameGap: 15,
+    // 指示器轴的分割段数
+    splitNumber: 4,
+    shape: 'circle',
+    // 坐标轴的标签是否响应和触发鼠标事件
+    triggerEvent: false,
+    // 坐标轴射线
+    axisLine: {
+      lineStyle: {
+        color: Theme.config.radiusAxisLineColor,
+        width: Theme.config.radarAxisLineWidth,
+        type: Theme.config.radarAxisLineType
+      }
+    },
+    // 坐标轴射线的刻度,只显示一条射线的刻度,其他射线的刻度需要在指示器数据indicator中每项单独配置axisLabel: { show: false }
+    axisLabel: {
+      show: false,
+      margin: -20
+    },
+    // 坐标轴圆环分隔区域填充
+    splitArea: { show: false },
+    // 坐标轴圆环分隔线
+    splitLine: {
+      lineStyle: {
+        color: Theme.config.radarSplitLineColor,
+        width: Theme.config.radarSplitLineWidth,
+        type: Theme.config.radarSplitLineType
+      }
+    },
+    // 坐标轴数据
+    indicator: undefined,
+    // 指示器名称样式设置
+    axisName: {
+      show: true,
+      rich: {
+        a: {
+          // 指示器name的样式
+          color: Theme.config.radarAxisLabelColor,
+          align: 'center',
+          fontSize: Theme.config.radarAxisNameFontSize
+        },
+        b: {
+          // 数据value样式
+          color: Theme.config.radarAxisLabelColor,
+          fontSize: Theme.config.radarAxisNameFontSize,
+          align: 'center',
+          padding: [0, 0, 4, 0]
+        }
+      },
+      formatter: undefined
+    }
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/RadarChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/RadarChart/handleOptipn.ts
new file mode 100644
index 000000000..52301fdbc
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/RadarChart/handleOptipn.ts
@@ -0,0 +1,339 @@
+import { isArray, isObject } from '../../util/type'
+import cloneDeep from '../../util/cloneDeep'
+import defendXSS from '../../util/defendXSS'
+import merge from '../../util/merge'
+import tips from '../../util/tips'
+import chartToken from './chartToken'
+import title from '../../option/config/polarTitle'
+import tooltip from '../../option/config/tooltip'
+import legend from '../../option/config/legend'
+import getRadar from './getRadar'
+import Theme from '../../feature/token'
+
+function initRadarSys(baseOpt, iChartOpt) {
+  baseOpt.color = iChartOpt.color
+  baseOpt.tooltip = tooltip(iChartOpt, 'RadarChart')
+  baseOpt.title = title(iChartOpt)
+  baseOpt.legend = legend(iChartOpt)
+  baseOpt.radar = []
+  baseOpt.series = []
+}
+
+function handleCusMax(iChartOpt) {
+  let max = 0
+  const { radarMax, radar } = iChartOpt
+  if (isArray(radarMax)) {
+    radarMax.forEach((item) => {
+      if (item.max > max) max = item.max
+    })
+  }
+  if (radar?.indicator) {
+    radar.indicator.forEach((el) => {
+      if (el.max > max) max = el.max
+    })
+  }
+  return max
+}
+
+function findDataMax(keys, data) {
+  let max
+  for (let j = 0; j < keys.length; j++) {
+    const key = keys[j]
+    if (max === undefined) {
+      max = data[key]
+    }
+    max = Math.max(max, data[key])
+  }
+  return max
+}
+
+/**
+ * 雷达图数据的最大值
+ */
+function getRadarMax(data, iChartOpt, isCustomMaxVal) {
+  let max
+  // 处理自定义max情况下的雷达图的默认最大值为未自定义的系列数据的最大值
+  let cusDataName
+  const { radarMax, radar } = iChartOpt
+  if (isCustomMaxVal) {
+    if (isArray(radarMax)) {
+      cusDataName = radarMax.map((item) => item.name)
+    }
+    if (radar?.indicator) {
+      cusDataName = radar.indicator.map((i) => i.name)
+    }
+  }
+  const names = Object.keys(data)
+  for (let i = 0; i < names.length; i++) {
+    const name = names[i]
+    const keys = Object.keys(data[name])
+    if (isCustomMaxVal) {
+      // 过滤出自定义的系列
+      // eslint-disable-next-line array-callback-return
+      const dataKeys = keys.filter((name) => {
+        if (!cusDataName.includes(name)) return name
+      })
+      max = findDataMax(dataKeys, data[name])
+      // 所有系列都自定义的情况，最大值取自定义里面的最大值
+      if (max === undefined) {
+        max = handleCusMax(iChartOpt)
+      }
+    } else {
+      max = findDataMax(keys, data[name])
+    }
+  }
+  return max
+}
+
+/**
+ * 从数据中拿出雷达的所有维度
+ */
+function getRadarKeys(data) {
+  const radarKeys = []
+  const seriesNames = Object.keys(data)
+  for (let i = 0; i < seriesNames.length; i++) {
+    const seriesName = seriesNames[i]
+    const seriesData = data[seriesName]
+    const dataNames = Object.keys(seriesData)
+    for (let j = 0; j < dataNames.length; j++) {
+      const dataName = dataNames[j]
+      if (!radarKeys.includes(dataName)) {
+        radarKeys.push(dataName)
+      }
+    }
+  }
+  return radarKeys
+}
+
+function getUnit(unit) {
+  if (unit || unit === '') return unit
+  return '%'
+}
+
+function setCenterAndRadius(radar, iChartOpt) {
+  const chartPosition = iChartOpt.chartPosition || iChartOpt.position || {}
+  if (chartPosition.center) radar.center = chartPosition.center
+  if (chartPosition.radius) radar.radius = chartPosition.radius
+}
+
+function setIndicator(radar, radarKeys, isCustomMaxVal, iChartOpt) {
+  const { radarMax, data, radarMark } = iChartOpt
+  const isRadarMaxArr = isArray(radarMax)
+  radar.indicator = radarKeys.map((name, index) => {
+    if (!isRadarMaxArr) {
+      // 非数组的形式默认所有维度共享一个最大值，只显示一个维度的刻度
+      return index === 0 ? { name, max: radarMax } : { name, max: radarMax, axisLabel: { show: false } }
+    } else {
+      const inerMax = getRadarMax(data, iChartOpt, isCustomMaxVal)
+      const isName = radarMax.find((item) => item.name === name)
+      const cusIndicator = isName || {}
+      return { name, max: inerMax, axisLabel: { show: !!radarMark }, ...cusIndicator }
+    }
+  })
+}
+
+function mergeRadar(radar, iChartOpt) {
+  if (iChartOpt.radar) merge(radar, iChartOpt.radar)
+  // 开发针对单个轴做特殊配置
+  if (iChartOpt.radar?.indicator) {
+    const mixinIndicator = radar.indicator.map((i) => {
+      const coveredIndicator = iChartOpt.radar.indicator.find((indicate) => indicate.name === i.name)
+      return coveredIndicator || i
+    })
+    radar.indicator = mixinIndicator
+  }
+}
+
+function setAxisLabel(radar, iChartOpt) {
+  const { radarMark } = iChartOpt
+  // 此处是因为默认情况情况下开启刻度特殊处理
+  radar.axisLabel.shoW = radarMark === undefined ? true : !!radarMark
+}
+
+function setAxisNameFormatter(radar, iChartOpt) {
+  const { data, unit } = iChartOpt
+  const dataLength = Object.keys(data).length
+  const actualUnit = getUnit(unit)
+  radar.axisName.formatter = (indicatorName) => {
+    // 只有一组数据时，显示“名称 + 数值”
+    if (dataLength === 1) {
+      const d = data[Object.keys(data)[0]]
+      const v = d[indicatorName]
+      return `{b|${v}}{b|${actualUnit}}\n{a|${indicatorName}}`
+    } else if (dataLength > 1) {
+      return `{a|${indicatorName}}`
+    }
+  }
+}
+
+function setRadar(baseOpt, iChartOpt, radarKeys, isCustomMaxVal) {
+  const radar = getRadar()
+  // 坐标轴射线的刻度,只显示一条射线的刻度,其他射线的刻度需要在指示器数据indicator中每项单独配置axisLabel: { show: false }
+  setAxisLabel(radar, iChartOpt)
+  setAxisNameFormatter(radar, iChartOpt)
+  setCenterAndRadius(radar, iChartOpt)
+  setIndicator(radar, radarKeys, isCustomMaxVal, iChartOpt)
+  mergeRadar(radar, iChartOpt)
+  baseOpt.radar.push(radar)
+}
+
+function handletipHtml(tooltip, tipHtml, radarKeys) {
+  tooltip.formatter = (params, ticket, callback) => {
+    return tipHtml(params, radarKeys, ticket, callback)
+  }
+}
+
+function handleFormatter(tooltip, iChartOpt, radarKeys) {
+  const { markLine } = iChartOpt
+  // 阈值告警色
+  const alarmColor = Theme.config.colorState.colorError
+  const isThreshold = !!(isObject(markLine) && markLine?.threshold)
+  tooltip.formatter = (params) => {
+    const data = params.data
+    const dataName = data.name
+    let htmlString = `<div style="margin-bottom:4px;">${defendXSS(dataName)}</div>`
+    data.value.forEach((item, index) => {
+      let color
+      if (markLine) {
+        const markVal = isThreshold ? markLine.threshold[radarKeys[index]] : markLine
+        color = item >= markVal ? alarmColor : params.color
+      } else {
+        color = params.color
+      }
+      htmlString += `<div style="margin-bottom:4px;">
+      <span style="display:inline-block;width:8px;
+      height:8px;margin-right:8px;border-radius:5px;
+      background-color:${defendXSS(color)};"></span>
+      <span style="display:inline-block;margin-right:8px;
+      min-width:60px;font-size:12px">${defendXSS(radarKeys[index])}</span>
+      <span style="font-size:14px">${defendXSS(item || '-')}</span>
+      </div>`
+    })
+    return htmlString
+  }
+}
+
+/**
+ * 配置鼠标悬浮提示框
+ */
+function setTooltip(baseOpt, iChartOpt, radarKeys) {
+  const { tipHtml, tooltip } = iChartOpt
+  tipHtml ? handletipHtml(baseOpt.tooltip, tipHtml, radarKeys) : handleFormatter(baseOpt.tooltip, iChartOpt, radarKeys)
+  // 针对tooltip中传formatter做特殊处理
+  if (tooltip?.formatter) {
+    baseOpt.tooltip.formatter = (params, ticket, callback) => {
+      return tooltip.formatter(params, radarKeys, ticket, callback)
+    }
+  }
+}
+
+function getMarkRadarOption() {
+  return {
+    center: undefined,
+    // 阈值线的radius应该是一个百分比，或者是实际的像素值
+    radius: undefined,
+    splitNumber: 1,
+    shape: 'circle',
+    axisName: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    },
+    splitArea: {
+      show: false
+    },
+    splitLine: {
+      lineStyle: {
+        width: Theme.config.radarSplitLineWidth,
+        color: undefined,
+        type: 'dashed'
+      }
+    },
+    indicator: undefined
+  }
+}
+
+function setMarkCenterAndRadius(radar, baseOpt) {
+  radar.center = baseOpt.radar[0].center
+  radar.radius = baseOpt.radar[0].radius
+}
+
+function setCustomMarkLine(markRadar, baseOpt, iChartOpt, radarKeys) {
+  const {
+    markLine: { threshold }
+  } = iChartOpt
+  markRadar.indicator = cloneDeep(baseOpt.radar[0].indicator)
+  const thresholdData = radarKeys.map((item) => {
+    const data = threshold[item] || 0
+    return data
+  })
+  const thresholdSeries = {
+    type: 'radar',
+    symbol: 'none',
+    // 拐点大小
+    symbolSize: chartToken.symbolSizeLG,
+    silent: true,
+    // 使用的雷达坐标系的索引
+    radarIndex: 1,
+    areaStyle: {
+      color: chartToken.areaStyleColor
+    },
+    lineStyle: {
+      color: Theme.config.colorState.colorError,
+      type: 'dashed'
+    },
+    data: []
+  }
+  thresholdSeries.data = [{ name: '', value: thresholdData }]
+  baseOpt.series.push(thresholdSeries)
+}
+
+function setCommonMarkLine(markRadar, baseOpt, iChartOpt, radarKeys) {
+  // 雷达图半径
+  const radius = baseOpt.radar[0].radius
+  // 雷达图有中心文本的情况下radius需要写成数组
+  const radiusIsArray = isArray(radius)
+  // 雷达图最大值
+  const { radarMax, markLine } = iChartOpt
+  if (isObject(radarMax)) {
+    tips.error(
+      'If markLine is of the number type, radarMax must be of the number type. If radarMax is of the object type, set markLine.threshold'
+    )
+    return
+  }
+  const markLineValue = Number.parseFloat(markLine)
+  let marklineRadius
+  if (radiusIsArray) {
+    const disRadius = Number.parseFloat(radius[1]) - Number.parseFloat(radius[0])
+    marklineRadius =
+      disRadius * (markLineValue / radarMax) +
+      Number.parseFloat(radius[0]) +
+      (radius[0].toString().includes('%') ? '%' : '')
+  } else {
+    marklineRadius =
+      (markLineValue / radarMax) * Number.parseFloat(radius) + (radius.toString().includes('%') ? '%' : '')
+  }
+  // 阈值线
+  markRadar.radius = marklineRadius
+  markRadar.splitLine.lineStyle.color = Theme.config.colorState.colorError
+  markRadar.indicator = Array(radarKeys.length).fill({ name: '' })
+}
+
+function setMarkLine(baseOpt, iChartOpt, radarKeys) {
+  const { markLine } = iChartOpt
+  if (markLine) {
+    const markRadar = getMarkRadarOption()
+    setMarkCenterAndRadius(markRadar, baseOpt)
+    const isThreshold = !!(isObject(markLine) && markLine?.threshold)
+    isThreshold
+      ? setCustomMarkLine(markRadar, baseOpt, iChartOpt, radarKeys)
+      : setCommonMarkLine(markRadar, baseOpt, iChartOpt, radarKeys)
+    baseOpt.radar.push(markRadar)
+  }
+}
+
+export { setRadar, getRadarKeys, getRadarMax, setTooltip, setMarkLine, initRadarSys }
diff --git a/packages/vue/src/chart/chart-core/base/components/RadarChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/RadarChart/handleSeries.ts
new file mode 100644
index 000000000..17ee20d8c
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/RadarChart/handleSeries.ts
@@ -0,0 +1,188 @@
+import { isObject } from '../../util/type'
+import chartToken from './chartToken'
+import Theme from '../../feature/token'
+
+function getSeriesUnit() {
+  return {
+    type: 'radar',
+    name: 'data',
+    // 使用的雷达坐标系
+    radarIndex: 0,
+    // 拐点的标记大小
+    symbolSize: chartToken.symbolSize,
+    // 拐点样式
+    itemStyle: {
+      borderWidth: chartToken.symbolBorderWidthSM,
+      borderColor: chartToken.borderColor
+    },
+    // 填充面积
+    areaStyle: {
+      opacity: 0.2
+    },
+    lineStyle: {
+      width: chartToken.lineWidth
+    },
+    // 高亮的样式
+    emphasis: {
+      focus: 'none',
+      areaStyle: {
+        opacity: 0.4
+      }
+    },
+    data: []
+  }
+}
+
+function setSeries(baseOpt, iChartOpt, radarKeys, data) {
+  const { isWaveRadar, theme } = iChartOpt
+  const dataNames = Object.keys(data)
+  const seriesUnit = getSeriesUnit()
+  // 华为云的主题下的特殊处理，之后通过token解决，暂时这样处理
+  if (theme.toLowerCase().includes('cloud-dark') || theme.toLowerCase().includes('cloud-light')) {
+    // 普通
+    seriesUnit.areaStyle.opacity = 0.1
+    seriesUnit.emphasis.areaStyle.opacity = 0.2
+    //  异型
+    if (isWaveRadar) {
+      seriesUnit.symbolSize = chartToken.symbolSizeLG
+      seriesUnit.itemStyle.borderWidth = chartToken.symbolBorderWidth
+      seriesUnit.areaStyle.opacity = 0.2
+      seriesUnit.emphasis.areaStyle.opacity = 0.4
+    }
+  }
+  dataNames.forEach((name) => {
+    const radarData = {
+      name,
+      value: radarKeys.map((key) => {
+        return data[name][key]
+      })
+    }
+    seriesUnit.data.push(radarData)
+  })
+  baseOpt.series.push(seriesUnit)
+}
+
+function getRedPointerRadar() {
+  return {
+    // 雷达位置，保持和初始坐标系一致，
+    center: ['50%', '50%'],
+    // 雷达半径，保持和初始坐标系一致，
+    radius: '50%',
+    // 控制指示器名称是否显示
+    axisName: {
+      show: false
+    },
+    startAngle: undefined, // 轴线的角度根据需求自己定义,起始点是水平方向
+    // 指示器轴的分割段数，和初始坐标轴一致
+    splitNumber: 4,
+    shape: 'circle',
+    // 坐标轴圆环分隔区域填充
+    splitArea: {
+      show: false
+    },
+    // 坐标轴射线
+    axisLine: {
+      show: false
+    },
+    // 坐标轴圆环分隔线
+    splitLine: {
+      show: false
+    },
+    indicator: undefined
+  }
+}
+
+function handleRedPointerRadar(baseOption, radarKeys, dataNameIndex, dataName) {
+  const max = baseOption.radar[0].indicator.find((item) => item.name === dataName).max
+  const redPointerRadar = getRedPointerRadar()
+  redPointerRadar.center = baseOption.radar[0].center
+  redPointerRadar.radius = baseOption.radar[0].radius
+  redPointerRadar.startAngle = 90 + (360 / radarKeys.length) * dataNameIndex
+  redPointerRadar.indicator = [{ name: '', max }]
+  return redPointerRadar
+}
+
+function handleRedPointerSeries(index, dataValue, seriesName) {
+  const { colorError } = Theme.config.colorState
+  return {
+    name: 'threshold',
+    type: 'radar',
+    // 拐点大小
+    symbolSize: chartToken.symbolSizeLG,
+    silent: true,
+    z: 99,
+    // 使用的雷达坐标系的索引
+    radarIndex: 2 + index,
+    // 拐点的样式
+    itemStyle: {
+      color: colorError,
+      borderColor: chartToken.borderColor,
+      borderWidth: chartToken.symbolBorderWidth,
+      shadowBlur: 15,
+      shadowColor: colorError
+    },
+    // 隐藏标示线
+    lineStyle: {
+      width: chartToken.lineWidthNone,
+      labelLine: {
+        show: false
+      }
+    },
+    data: [
+      {
+        value: dataValue,
+        name: seriesName // 数据的名称，为了图例的点击消失生效，和系列的名字保持一致
+      }
+    ]
+  }
+}
+
+// 计算出大于等于阈值的数据
+function getExceededMarkLineValue(data, markLine, isThreshold) {
+  const thresholdPoint = []
+  const names = Object.keys(data)
+  for (let i = 0; i < names.length; i++) {
+    const name = names[i]
+    const keys = Object.keys(data[name])
+    for (let j = 0; j < keys.length; j++) {
+      const key = keys[j]
+      const markLineVal = isThreshold ? markLine.threshold[key] : markLine
+      if (markLineVal && data[name][key] >= markLineVal) {
+        thresholdPoint.push({
+          seriesName: name,
+          dataName: key,
+          dataValue: data[name][key]
+        })
+      }
+    }
+  }
+  return thresholdPoint
+}
+
+/**
+ * 根据参数计算出圆盘图的半径
+ */
+export function setMarkLineSeries(baseOpt, iChartOpt, radarKeys) {
+  // 阈值
+  const { markLine } = iChartOpt
+  if (markLine) {
+    const { data } = iChartOpt
+    const isThreshold = !!(isObject(markLine) && markLine?.threshold)
+    // 超过阈值的数据
+    const exceeded = getExceededMarkLineValue(data, markLine, isThreshold)
+    exceeded.forEach((item, index) => {
+      const seriesName = item.seriesName
+      const dataName = item.dataName
+      const dataNameIndex = radarKeys.indexOf(dataName)
+      const dataValue = item.dataValue
+      // 需要高亮红点的坐标系,一个红点对应一个坐标系，需要去修改相应的数据
+      const redPointerRadar = handleRedPointerRadar(baseOpt, radarKeys, dataNameIndex, dataName)
+      // 红点数据
+      const redPointerSeries = handleRedPointerSeries(index, dataValue, seriesName, isThreshold)
+      baseOpt.radar.push(redPointerRadar)
+      baseOpt.series.push(redPointerSeries)
+    })
+  }
+}
+
+export { setSeries }
diff --git a/packages/vue/src/chart/chart-core/base/components/RadarChart/index.ts b/packages/vue/src/chart/chart-core/base/components/RadarChart/index.ts
new file mode 100644
index 000000000..c4f7b1502
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/RadarChart/index.ts
@@ -0,0 +1,62 @@
+import { event } from '../../util/event'
+import init from '../../option/init'
+import { insertCenterDom, resizeCenterDom } from '../../util/centerDom'
+import { isArray } from '../../util/type'
+import { setSeries, setMarkLineSeries } from './handleSeries'
+import { mergeSeries } from '../../util/merge'
+import { setRadar, setTooltip, getRadarMax, getRadarKeys, setMarkLine, initRadarSys } from './handleOptipn'
+
+class RadarChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    this.chartInstance = chartInstance
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance)
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption
+    const isCustomMaxVal = !!(isArray(iChartOption.radarMax) || iChartOption?.radar?.indicator)
+    // 雷达坐标系最大值
+    // 在配置不同系列的最大值的时候。数据不在同一维度，不显示markLine
+    iChartOption.radarMax = iChartOption.radarMax || getRadarMax(iChartOption.data, iChartOption, isCustomMaxVal)
+    initRadarSys(this.baseOption, iChartOption)
+    // 雷达所有维度
+    const radarKeys = getRadarKeys(iChartOption.data)
+    // 绘制雷达地图
+    setRadar(this.baseOption, iChartOption, radarKeys, isCustomMaxVal)
+    // 赋值数据
+    setSeries(this.baseOption, iChartOption, radarKeys, iChartOption.data)
+    // 阈值线
+    setMarkLine(this.baseOption, iChartOption, radarKeys, isCustomMaxVal)
+    // 图表鼠标悬浮提示框
+    setTooltip(this.baseOption, iChartOption, radarKeys)
+    // 设置阈值红点
+    setMarkLineSeries(this.baseOption, iChartOption, radarKeys)
+    // 目前只允许合并基础的雷达图的series，对于阈值线和红点所在的series不做处理，普通雷达图用series.name='data'标识，目前本接口只给opentinty和aui使用
+    mergeSeries(iChartOption, this.baseOption)
+    event(chartInstance, iChartOption.event)
+  }
+
+  // 根据渲染出的结果，二次计算option
+  updateOptionAgain() {
+    const container = this.chartInstance.getDom()
+    insertCenterDom(container, this.iChartOption)
+  }
+
+  resize() {
+    const container = this.chartInstance.getDom()
+    resizeCenterDom(container, this.iChartOption)
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption() {}
+}
+
+export default RadarChart
diff --git a/packages/vue/src/chart/chart-core/base/components/RegionChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/RegionChart/chartToken.ts
new file mode 100644
index 000000000..e6e1f2c44
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/RegionChart/chartToken.ts
@@ -0,0 +1,18 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    visualMap: {
+      textStyle: { color: colorTextPrimary }
+    }
+  } = Theme.config.RegionChart
+
+  return {
+    visualMapTextColor: colorTextPrimary
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/RegionChart/handleOption.ts b/packages/vue/src/chart/chart-core/base/components/RegionChart/handleOption.ts
new file mode 100644
index 000000000..efbd2fce8
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/RegionChart/handleOption.ts
@@ -0,0 +1,18 @@
+import merge from '../../util/merge'
+import chartToken from './chartToken'
+
+/**
+ * 装载除series以外的一级属性
+ * @param {传入数据} iChartOption
+ * @returns
+ */
+export function setOption(iChartOption) {
+  const { visualMap } = iChartOption
+  // 处理visualMap字体颜色随主题变化
+  const defaultVisualMap = {
+    textStyle: {
+      color: chartToken.visualMapTextColor
+    }
+  }
+  visualMap && merge(visualMap, defaultVisualMap)
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/RegionChart/index.ts b/packages/vue/src/chart/chart-core/base/components/RegionChart/index.ts
new file mode 100644
index 000000000..1b518231d
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/RegionChart/index.ts
@@ -0,0 +1,38 @@
+import init from '../../option/init'
+import merge from '../../util/merge'
+import { event } from '../../util/event'
+import { setOption } from './handleOption'
+import tooltip from '../../option/config/tooltip'
+
+export default class RegionChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance)
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption
+    // 装载除series以外的一级属性
+    setOption(this.iChartOption)
+    // 配置悬浮提示框
+    this.baseOption.tooltip = tooltip(iChartOption)
+    // 兼容echarts属性
+    merge(this.baseOption, iChartOption)
+    // 配置图表事件
+    if (iChartOption.event) {
+      event(chartInstance, iChartOption.event)
+    }
+    // 删除部分不需要的默认值
+    delete this.baseOption.legend
+    delete this.baseOption.dataZoom
+    delete this.baseOption.xAxis
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/SankeyChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/BaseOption.ts
new file mode 100644
index 000000000..9c7045a15
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/SankeyChart/BaseOption.ts
@@ -0,0 +1,75 @@
+const data = []
+const textColor = ''
+const right = 0
+const top = 0
+const bottom = 0
+const left = 0
+const nodeGap = 0
+const nodeWidth = 0
+const orient = ''
+const BaseOption = {
+  tooltip: {
+    trigger: 'item',
+    triggerOn: 'mousemove'
+  },
+  animation: true,
+  series: [
+    {
+      nodeAlign: 'left',
+      orient,
+      // 控制图表的位置
+      right,
+      top,
+      bottom,
+      left,
+      // 控制每列矩形的距离
+      nodeGap,
+      // 控制矩形的宽度
+      nodeWidth,
+      type: 'sankey',
+      data: data.nodes,
+      links: data.links,
+      emphasis: {
+        focus: 'adjacency'
+      },
+      layout: 'none',
+      focusNodeAdjaceny: true,
+      // 将节点按照data中的顺序排列，将值改为0
+      layoutIterations: 32,
+      // 设置第一层的文本在左侧
+      levels: [
+        {
+          depth: 0,
+          label: {
+            position: 'left'
+          }
+        }
+      ],
+      lineStyle: {
+        // 线条颜色过渡
+        color: 'gradient',
+        // 线条透明度
+        opacity: 0.6,
+        // 线条弯曲度
+        curveness: 0.5
+      },
+      label: {
+        color: textColor,
+        fontSize: 12,
+        // 文字距离节点矩形块的距离
+        distance: 5,
+        position: 'right',
+        // 展示文本内容及百分比
+        formatter: (params) => {
+          if (params.name !== 'empty' && params.name !== 'virtical') {
+            return `${params.name}\n${params.data.valueBfb}`
+          } else {
+            // 若为empty或者virtical，则不展示此虚拟节点
+            return ''
+          }
+        }
+      }
+    }
+  ]
+}
+export default BaseOption
diff --git a/packages/vue/src/chart/chart-core/base/components/SankeyChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/chartToken.ts
new file mode 100644
index 000000000..95758ce16
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/SankeyChart/chartToken.ts
@@ -0,0 +1,16 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    label: { color: colorLabel }
+  } = Theme.config.SankeyChart
+
+  return {
+    labelColor: colorLabel
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleColor.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleColor.ts
new file mode 100644
index 000000000..b11f85e70
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleColor.ts
@@ -0,0 +1,19 @@
+import { getColor } from '../../util/color'
+import chartToken from './chartToken'
+
+// 为每个节点矩形块配置颜色组，循环使用
+export function setColor(color, baseOpt) {
+  const data = baseOpt.series[0].data
+  // 配置节点及边框颜色
+  data.forEach((item, index) => {
+    item.itemStyle = {
+      color: Array.isArray(color) ? getColor(color, index) : color
+      // borderColor: Array.isArray(colorGroup) ? getColor(colorGroup, index) : colorGroup,
+    }
+  })
+}
+
+// 配置显示文本颜色
+export function setTextColor(baseOpt) {
+  baseOpt.series[0].label.color = chartToken.labelColor
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleData.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleData.ts
new file mode 100644
index 000000000..483c5960a
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleData.ts
@@ -0,0 +1,27 @@
+// 处理数据：如果存在value为0或未定义的情况
+export function handleEmptyData(nodes, links) {
+  let flag = false
+  const virtualData = []
+  nodes.forEach((itemn) => {
+    itemn.value = itemn.value - 0
+    if (itemn.value === 0) {
+      itemn.value = 5
+      virtualData.push(itemn.name)
+      flag = true
+    }
+  })
+  // 如果存在value为0的情况，则生成一头一尾两条虚拟数据，用来遮盖掉value为0的数据连接线
+  if (flag) {
+    nodes.unshift({ name: 'virtical', value: 0, itemStyle: { color: 'transparent' } })
+    nodes.push({ name: 'empty', value: 0, itemStyle: { color: 'transparent' } })
+    virtualData.unshift('virtical')
+  }
+  virtualData.forEach((item) => {
+    links.push({
+      source: item,
+      target: 'empty',
+      // value设置为负值且足够大，能够盖掉value为0的数据连接线
+      value: -9999999999
+    })
+  })
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleOption.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleOption.ts
new file mode 100644
index 000000000..15115c812
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleOption.ts
@@ -0,0 +1,216 @@
+import tooltip from '../../option/config/tooltip'
+import defendXSS from '../../util/defendXSS'
+import { getTextWidth } from '../../util/dom'
+import merge from '../../util/merge'
+
+// 配置桑基图是否可以拖动
+export function isMove(draggable, baseOpt) {
+  // 设置默认值true
+  if (draggable === undefined) {
+    draggable = true
+  }
+  baseOpt.series[0].draggable = draggable
+}
+
+function handleTooltip(params) {
+  if (params.data.value !== 0 && params.data.valueBfb !== '0%') {
+    let htmlString = ''
+    if (params.name.includes('>')) {
+      params.name = params.name.replace('>', '---')
+    }
+    const value = params.data.value || params.value
+    htmlString +=
+      `<span style="display:inline-block;margin-right:5px;border-radius:50%;height:10px;">${defendXSS(params.name)}</span>` +
+      '<br/>' +
+      '<span style="display:inline-block;margin-right:5px;border-radius:50%;height:10px;">' +
+      'value' +
+      `  :  ${defendXSS(value)}</span>`
+    return htmlString
+  }
+}
+
+function handleSankeyFormatter(formatter, SkTooltip) {
+  if (formatter) {
+    SkTooltip.formatter = formatter
+  } else {
+    SkTooltip.formatter = (params) => {
+      // 如果是虚拟节点则不展示toolTip
+      let html = ''
+      html = handleTooltip(params)
+      return html
+    }
+  }
+}
+
+// 配置桑基图的自定义悬浮提示框
+export function setTooltip(iChartOption, formatter) {
+  const SkTooltip = tooltip(iChartOption)
+  handleSankeyFormatter(formatter, SkTooltip)
+  SkTooltip.trigger = 'item'
+  return SkTooltip
+}
+
+// 配置桑基图的chartPadding
+export function padSize(padding, baseOpt, userPadding) {
+  if (userPadding) {
+    baseOpt.series[0].top = padding[0]
+    baseOpt.series[0].right = padding[1]
+    baseOpt.series[0].bottom = padding[2]
+    baseOpt.series[0].left = padding[3]
+  } else {
+    const distance = baseOpt.series[0].label.distance
+    // 根据文本自适应
+    if (baseOpt.series[0].orient === 'horizontal') {
+      let allSource = []
+      let unLeftArr = []
+      let leftArr = [] // 左侧全部文本
+      let rightArr = [] // 最右侧全部文本
+      baseOpt.series[0].links.forEach((item) => {
+        if (!allSource.includes(item.source)) {
+          allSource.push(item.source)
+        }
+        baseOpt.series[0].data.forEach((val) => {
+          if (item.target.includes(val.name) && !unLeftArr.includes(val.name)) {
+            unLeftArr.push(val.name)
+          }
+        })
+      })
+      baseOpt.series[0].data.forEach((val) => {
+        if (!unLeftArr.includes(val.name) && !leftArr.includes(val.name)) {
+          leftArr.push(val.name)
+        }
+      })
+      if (baseOpt.series[0].levels[0].label.position === 'left') {
+        baseOpt.series[0].left = judgeMaxText(leftArr, baseOpt) + distance * 2
+      }
+      unLeftArr.forEach((val) => {
+        if (!allSource.includes(val) && !rightArr.includes(val)) {
+          rightArr.push(val)
+        }
+      })
+      if (baseOpt.series[0].label.position === 'right') {
+        baseOpt.series[0].right = judgeMaxText(rightArr, baseOpt) + distance * 2
+      }
+      // 上下padding
+      baseOpt.series[0].top = 0
+      baseOpt.series[0].bottom = 0
+    } else {
+      const padding = 2 * (baseOpt.series[0].label.fontSize + distance)
+      baseOpt.series[0].top = padding
+      baseOpt.series[0].right = 0
+      baseOpt.series[0].bottom = padding
+      baseOpt.series[0].left = 0
+    }
+  }
+}
+
+// 计算桑基图的每列的value总和，展示每个节点的百分比
+export function sumBfb(links, nodes) {
+  // sourceData是depth为0即最左侧的节点数组
+  let sourceData = []
+  links.forEach((item) => {
+    if (!sourceData.includes(item.source)) {
+      sourceData.push(item.source)
+    }
+  })
+  links.forEach((item) => {
+    if (sourceData.includes(item.target)) {
+      sourceData = sourceData.filter((items) => {
+        return items !== item.target
+      })
+    }
+  })
+  // valueSum是value总和
+  let valueSum = 0
+  nodes.forEach((itemn) => {
+    sourceData.forEach((items) => {
+      if (items === itemn.name) {
+        valueSum += itemn.value
+      }
+    })
+  })
+  // valueBfb是对应数值的百分比
+  nodes.forEach((itemn) => {
+    if (!itemn.value) {
+      itemn.value = 0
+    }
+    itemn.valueBfb = (itemn.value * 100) / valueSum
+    itemn.valueBfb = itemn.valueBfb.toFixed(0)
+    itemn.valueBfb += '%'
+  })
+}
+
+// 配置节点矩形的宽度及每列间距
+export function setWidthSpace(widthSpace, baseOpt) {
+  if (!widthSpace || widthSpace.length === 0) {
+    widthSpace = [10, 30]
+  }
+  baseOpt.series[0].nodeWidth = widthSpace[0]
+  baseOpt.series[0].nodeGap = widthSpace[1]
+}
+
+// 配置桑基图的方向
+export function setDirection(orient, baseOpt) {
+  if (orient === undefined) {
+    orient = 'horizontal'
+  }
+  if (orient === 'vertical') {
+    baseOpt.series[0].label.position = 'bottom'
+    baseOpt.series[0].levels[0].label.position = 'top'
+  }
+  baseOpt.series[0].orient = orient
+}
+
+// 配置桑基图的布局对齐方式
+export function setAlign(nodeAlign, baseOpt) {
+  if (nodeAlign === undefined) {
+    nodeAlign = 'left'
+  }
+  baseOpt.series[0].nodeAlign = nodeAlign
+}
+
+// 配置桑基图的label
+export function setLabel(iChartOption, baseOpt) {
+  const { label } = iChartOption
+  merge(baseOpt.series[0].label, label)
+}
+
+// 配置桑基图itemStyle属性
+export function handleItemStyle(iChartOption, baseOpt) {
+  const { itemStyle } = iChartOption
+  baseOpt.series[0].data.forEach((item, index) => {
+    if (item.name !== 'empty' && item.name !== 'virtical') {
+      merge(item.itemStyle, itemStyle)
+    }
+  })
+}
+
+export function handleLineStyle(iChartOption, baseOpt) {
+  const { lineStyle } = iChartOption
+  merge(baseOpt.series[0].lineStyle, lineStyle)
+  baseOpt.series[0].links.forEach((item, index) => {
+    if (item.source === 'virtical' || item.target === 'empty') {
+      item.lineStyle = {
+        color: 'transparent'
+      }
+    }
+  })
+}
+
+const judgeMaxText = (textArr, baseOpt) => {
+  const {
+    data,
+    label: { fontSize }
+  } = baseOpt.series[0]
+  textArr.sort((a, b) => {
+    return b.length - a.length
+  })
+  let BfbText
+  data.forEach((item) => {
+    if (item.name === textArr[0]) {
+      BfbText = item.valueBfb
+    }
+  })
+  const leftTextWidth = Math.max(getTextWidth(textArr[0], fontSize), getTextWidth(BfbText, fontSize))
+  return leftTextWidth
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/SankeyChart/index.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/index.ts
new file mode 100644
index 000000000..bd2820097
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/SankeyChart/index.ts
@@ -0,0 +1,77 @@
+import cloneDeep from '../../util/cloneDeep'
+import BaseOption from './BaseOption'
+import {
+  isMove,
+  setTooltip,
+  padSize,
+  sumBfb,
+  setWidthSpace,
+  setDirection,
+  setAlign,
+  setLabel,
+  handleItemStyle,
+  handleLineStyle
+} from './handleOption'
+import { setColor, setTextColor } from './handleColor'
+import { handleEmptyData } from './handleData'
+import init from '../../option/init'
+
+class SankeyChart {
+  constructor(iChartOption) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    this.baseOption = cloneDeep(BaseOption)
+    // 记录下用户传入的初始的padding值
+    this.userPadding = iChartOption.padding || iChartOption.chartPadding
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption()
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption
+    const padding = iChartOption.padding || iChartOption.chartPadding
+    // 配置数据
+    const { nodes, links } = iChartOption.data
+    this.baseOption.series[0].data = nodes
+    this.baseOption.series[0].links = links
+    // 是否设置移动
+    isMove(iChartOption.draggable, this.baseOption)
+    // 配置颜色组
+    setColor(iChartOption.color, this.baseOption)
+    setTextColor(this.baseOption)
+    // 配置提示悬浮框样式
+    this.baseOption.tooltip = setTooltip(iChartOption, iChartOption.tipHtml)
+    // 配置桑基图label属性
+    setLabel(iChartOption, this.baseOption)
+    // 处理数据，获取节点所占的百分之比值
+    sumBfb(links, nodes)
+    // 配置桑基图的方向
+    setDirection(iChartOption.orient, this.baseOption)
+    // 配置chartPadding
+    padSize(padding, this.baseOption, this.userPadding)
+    // 配置节点矩形的宽度及每列间距
+    setWidthSpace(iChartOption.widthSpace, this.baseOption)
+    // 处理数据：如果存在value为0或未定义的情况
+    handleEmptyData(nodes, links)
+    // 配置桑基图的布局对齐方式
+    setAlign(iChartOption.nodeAlign, this.baseOption)
+    // 配置桑基图itemStyle属性
+    handleItemStyle(iChartOption, this.baseOption)
+    // 配置桑基图lineStyle属性
+    handleLineStyle(iChartOption, this.baseOption)
+  }
+
+  // 根据渲染出的结果，二次计算option
+  // secondaryUpdateOption(YAxiMax, YAxiMin) {
+  // }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption() {}
+}
+
+export default SankeyChart
diff --git a/packages/vue/src/chart/chart-core/base/components/SunburstChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/SunburstChart/chartToken.ts
new file mode 100644
index 000000000..b16b7edf0
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/SunburstChart/chartToken.ts
@@ -0,0 +1,18 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    itemStyle: { borderColor: colorBorder },
+    label: { color: colorLabel }
+  } = Theme.config.SunburstChart
+
+  return {
+    itemBorderColor: colorBorder,
+    labelColor: colorLabel
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/SunburstChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/SunburstChart/handleSeries.ts
new file mode 100644
index 000000000..7334f24d0
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/SunburstChart/handleSeries.ts
@@ -0,0 +1,37 @@
+import cloneDeep from '../../util/cloneDeep'
+import chartToken from './chartToken'
+
+export const seriesInit = {
+  center: ['50%', '50%'],
+  radius: ['12%', '70%'],
+  type: 'sunburst',
+  sort: undefined,
+  emphasis: {
+    focus: 'descendant'
+  },
+  itemStyle: {
+    borderRadius: 4,
+    borderWidth: 2,
+    borderColor: ''
+  },
+  data: [],
+  label: {
+    rotate: 0,
+    color: ''
+  },
+  levels: []
+}
+
+/**
+ * 组装echarts所需要的series
+ * @param {传入数据} iChartOption
+ * @returns
+ */
+export function setSeries(iChartOption) {
+  const { data } = iChartOption
+  const series = cloneDeep(seriesInit)
+  series.data = data
+  series.itemStyle.borderColor = chartToken.itemBorderColor
+  series.label.color = chartToken.labelColor
+  return series
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/SunburstChart/index.ts b/packages/vue/src/chart/chart-core/base/components/SunburstChart/index.ts
new file mode 100644
index 000000000..108234fa2
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/SunburstChart/index.ts
@@ -0,0 +1,33 @@
+import init from '../../option/init'
+import { event } from '../../util/event'
+import { setSeries } from './handleSeries'
+import merge from '../../util/merge'
+import PolarCoordSys from '../../option/PolarSys'
+
+const CHART_NAME = 'SunburstChart'
+export default class SunburstChart {
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    this.iChartOption = init(iChartOption)
+    this.updateOption(chartInstance)
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption
+    // 装载除series之外的其他配置
+    PolarCoordSys(this.baseOption, iChartOption, CHART_NAME)
+    this.baseOption.color = ['', ...iChartOption.color]
+    this.baseOption.series = setSeries(iChartOption)
+    // 配置图表事件
+    if (iChartOption.event) {
+      event(chartInstance, iChartOption.event)
+    }
+    // 合并用户自定义series
+    merge(this.baseOption.series, iChartOption.series)
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/TreeChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/TreeChart/BaseOption.ts
new file mode 100644
index 000000000..0355706a3
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/TreeChart/BaseOption.ts
@@ -0,0 +1,11 @@
+const BaseOption = {
+  tooltip: {},
+  series: [
+    {
+      type: '',
+      data: []
+    }
+  ]
+}
+
+export default BaseOption
diff --git a/packages/vue/src/chart/chart-core/base/components/TreeChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/TreeChart/chartToken.ts
new file mode 100644
index 000000000..9e5fdf023
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/TreeChart/chartToken.ts
@@ -0,0 +1,21 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    label: { color: colorLabel },
+    lineStyle: { color: colorAxisLine }
+  } = Theme.config.TreeChart
+
+  const { colorState } = Theme.config
+
+  return {
+    colorInfo: colorState.colorInfo,
+    lineColor: colorAxisLine,
+    labelColor: colorLabel
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/TreeChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/TreeChart/handleOptipn.ts
new file mode 100644
index 000000000..a9578a502
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/TreeChart/handleOptipn.ts
@@ -0,0 +1,65 @@
+import tooltip from '../../option/config/tooltip'
+
+/**
+ * 配置鼠标悬浮提示框
+ */
+export function setTooltip(iChartOpt) {
+  const basicTip = tooltip(iChartOpt)
+  basicTip.trigger = 'item'
+  return basicTip
+}
+
+/**
+ * 设置ChartPadding
+ */
+export function setChartPadding(type, iChartOption) {
+  // 默认图表padding
+  let defaultPadding
+  // 实际图表position
+  const position = { left: undefined, right: undefined, top: undefined, bottom: undefined }
+  switch (type) {
+    case 'LineTreeChart':
+      if (!iChartOption.direction) {
+        defaultPadding = [20, 150, 20, 150]
+      } else if (iChartOption.direction === 'top') {
+        defaultPadding = [80, 20, 150, 20]
+      } else if (iChartOption.direction === 'bottom') {
+        defaultPadding = [150, 20, 80, 20]
+      } else if (iChartOption.direction === 'right') {
+        defaultPadding = [20, 150, 20, 150]
+      } else {
+        defaultPadding = [20, 150, 20, 150]
+      }
+      break
+    case 'RingTreeChart':
+      defaultPadding = [100, 150, 100, 150]
+      break
+  }
+  if (!iChartOption.padding) {
+    position.top = defaultPadding[0]
+    position.right = defaultPadding[1]
+    position.bottom = defaultPadding[2]
+    position.left = defaultPadding[3]
+  } else if (iChartOption.padding.length === 1) {
+    position.top = iChartOption.padding[0]
+    position.right = iChartOption.padding[0]
+    position.bottom = iChartOption.padding[0]
+    position.left = iChartOption.padding[0]
+  } else if (iChartOption.padding.length === 2) {
+    position.top = iChartOption.padding[0]
+    position.right = iChartOption.padding[1]
+    position.bottom = iChartOption.padding[0]
+    position.left = iChartOption.padding[1]
+  } else if (iChartOption.padding.length === 3) {
+    position.top = iChartOption.padding[0]
+    position.right = iChartOption.padding[1]
+    position.bottom = iChartOption.padding[2]
+    position.left = iChartOption.padding[1]
+  } else {
+    position.top = iChartOption.padding[0]
+    position.right = iChartOption.padding[1]
+    position.bottom = iChartOption.padding[2]
+    position.left = iChartOption.padding[3]
+  }
+  return position
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/TreeChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/TreeChart/handleSeries.ts
new file mode 100644
index 000000000..1be330e80
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/TreeChart/handleSeries.ts
@@ -0,0 +1,140 @@
+import chartToken from './chartToken'
+import { setChartPadding } from './handleOptipn'
+
+/**
+ * 组装series所需要的series
+ */
+const label = {
+  // 图元的距离
+  distance: 10,
+  fontSize: 12
+}
+const lineStyle = {
+  width: 1,
+  // 连线的曲度
+  curveness: 0.5
+}
+function handleTypeSeries(type) {
+  let seriesUnit = {}
+  switch (type) {
+    case 'LineTreeChart':
+      seriesUnit = {
+        type: 'tree',
+        data: [],
+        symbol: 'circle',
+        layout: 'orthogonal',
+        // 文本样式
+        label,
+        // 设置连线的样式
+        lineStyle,
+        // 图元设置
+        itemStyle: {},
+        leaves: {
+          label: {}
+        },
+        // 初始动画的时长，
+        animationDuration: 550,
+        // 数据更新动画的时长。
+        animationDurationUpdate: 750
+      }
+      break
+    case 'RingTreeChart':
+      seriesUnit = {
+        type: 'tree',
+        data: [],
+        symbol: 'circle',
+        layout: 'radial',
+        // 文本样式
+        label: {
+          // 图元的距离
+          distance: 10,
+          fontSize: 12
+        },
+        // 设置连线的样式
+        lineStyle: {
+          width: 1,
+          // 连线的曲度
+          curveness: 0.5
+        },
+        // 图元的设置
+        itemStyle: {},
+        // 初始动画的时长，
+        animationDuration: 550,
+        // 数据更新动画的时长。
+        animationDurationUpdate: 750
+      }
+      break
+  }
+  return seriesUnit
+}
+
+/**
+ * 组装echarts所需要的series
+ */
+export function setSeries(type, iChartOption) {
+  const { data } = iChartOption
+  if (!data) return
+  if (data && data.length !== 0) {
+    const series = []
+    data.forEach((dataItem) => {
+      const seriesItem = handleTypeSeries(type)
+      // 设置图表padding
+      const position = setChartPadding(type, iChartOption)
+      Object.assign(seriesItem, position)
+      seriesItem.name = dataItem.name
+      // 设置数据
+      seriesItem.data = dataItem.data
+      // 设置图元大小
+      seriesItem.symbolSize = iChartOption.symbolSize ? iChartOption.symbolSize : 10
+      // 设置初始打开层级
+      seriesItem.initialTreeDepth = iChartOption.initialTreeDepth ? iChartOption.initialTreeDepth : 1
+      // 设置主题文本颜色
+      seriesItem.label.color = chartToken.labelColor
+      // 设置主题线条颜色
+      seriesItem.lineStyle.color = chartToken.lineColor
+      // 设置主题图元颜色
+      seriesItem.itemStyle.color = chartToken.colorInfo
+      // 设置具体属性
+      switch (type) {
+        case 'LineTreeChart':
+          // 设置线型
+          seriesItem.edgeShape = iChartOption.lineType ? iChartOption.lineType : 'curve'
+          // 设置起点方向
+          if (!iChartOption.direction) {
+            seriesItem.label.position = 'left'
+            seriesItem.leaves.label.position = 'right'
+            seriesItem.orient = 'LR'
+          } else if (iChartOption.direction === 'top') {
+            seriesItem.label.position = 'top'
+            seriesItem.label.rotate = -90
+            seriesItem.label.align = 'right'
+            seriesItem.label.verticalAlign = 'middle'
+            seriesItem.leaves.label.position = 'bottom'
+            seriesItem.leaves.label.align = 'left'
+            seriesItem.orient = 'TB'
+          } else if (iChartOption.direction === 'right') {
+            seriesItem.label.position = 'right'
+            seriesItem.leaves.label.position = 'left'
+            seriesItem.orient = 'RL'
+          } else if (iChartOption.direction === 'bottom') {
+            seriesItem.label.position = 'bottom'
+            seriesItem.label.rotate = 90
+            seriesItem.label.align = 'right'
+            seriesItem.label.verticalAlign = 'middle'
+            seriesItem.leaves.label.position = 'top'
+            seriesItem.leaves.label.align = 'left'
+            seriesItem.orient = 'BT'
+          } else {
+            seriesItem.label.position = 'left'
+            seriesItem.leaves.label.position = 'right'
+            seriesItem.orient = 'LR'
+          }
+          break
+        case 'RingTreeChart':
+          break
+      }
+      series.push(seriesItem)
+    })
+    return series
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/TreeChart/index.ts b/packages/vue/src/chart/chart-core/base/components/TreeChart/index.ts
new file mode 100644
index 000000000..a0a43d754
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/TreeChart/index.ts
@@ -0,0 +1,37 @@
+import BaseOption from './BaseOption'
+import cloneDeep from '../../util/cloneDeep'
+import { setTooltip } from './handleOptipn'
+import { setSeries } from './handleSeries'
+import { mergeSeries } from '../../util/merge'
+
+class TreeChart {
+  constructor(iChartOption) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    this.baseOption = cloneDeep(BaseOption)
+    this.iChartOption = iChartOption
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption()
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption
+    const type = iChartOption.type
+    if (!type) {
+      throw new Error('TreeChart must have a name')
+    }
+    // 图表的series
+    this.baseOption.series = setSeries(type, iChartOption)
+    //  图表鼠标悬浮提示框
+    this.baseOption.tooltip = setTooltip(iChartOption)
+    mergeSeries(iChartOption, this.baseOption)
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption() {}
+}
+
+export default TreeChart
diff --git a/packages/vue/src/chart/chart-core/base/components/WordCloudChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/BaseOption.ts
new file mode 100644
index 000000000..8679f54a5
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/BaseOption.ts
@@ -0,0 +1,9 @@
+import BaseOption from '../../option/base'
+
+BaseOption.xAxis = {
+  show: false
+}
+BaseOption.yAxis = {
+  show: false
+}
+export default BaseOption
diff --git a/packages/vue/src/chart/chart-core/base/components/WordCloudChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/chartToken.ts
new file mode 100644
index 000000000..b860122a4
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/chartToken.ts
@@ -0,0 +1,18 @@
+import Theme from '../../feature/token'
+import proxy from '../../util/proxy'
+
+function getChartToken() {
+  const {
+    emphasis: {
+      textStyle: { textShadowColor: colorShadow }
+    }
+  } = Theme.config.WordCloudChart
+
+  return {
+    emphasisTextShadowColor: colorShadow
+  }
+}
+
+const chartToken = proxy(getChartToken)
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/WordCloudChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/handleOptipn.ts
new file mode 100644
index 000000000..259e9bcd8
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/handleOptipn.ts
@@ -0,0 +1,10 @@
+import tooltip from '../../option/config/tooltip'
+
+/**
+ * 配置鼠标悬浮提示框
+ */
+export function setTooltip(iChartOpt) {
+  const basicTip = tooltip(iChartOpt)
+  basicTip.trigger = 'item'
+  return basicTip
+}
diff --git a/packages/vue/src/chart/chart-core/base/components/WordCloudChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/handleSeries.ts
new file mode 100644
index 000000000..57eff8977
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/handleSeries.ts
@@ -0,0 +1,93 @@
+import { getRandom } from '../../util/math'
+import { getColor } from '../../util/color'
+import cloneDeep from '../../util/cloneDeep'
+import chartToken from './chartToken'
+
+export const seriesInit = {
+  type: 'wordCloud',
+  // 网格大小，各项之间间距
+  gridSize: 16,
+  // 形状支持 circle 圆，cardioid  心， diamond 菱形， triangle-forward 、triangle 三角，star五角星
+  shape: 'circle',
+  // 字体大小范围
+  sizeRange: [16, 64],
+  // 文字旋转角度范围
+  rotationRange: [0, 0],
+  // 旋转步值
+  rotationStep: 0,
+  // 画布位置
+  top: 'center',
+  left: 'center',
+  right: null,
+  bottom: null,
+  // 画布宽
+  width: '75%',
+  // 画布高
+  height: '80%',
+  // 是否渲染超出画布的文字
+  drawOutOfBound: false,
+  // 文字显示时动画
+  layoutAnimation: true,
+  // 文字颜色
+  textStyle: {
+    color() {
+      return `rgb(${[Math.round(getRandom * 256), Math.round(getRandom * 256), Math.round(getRandom * 256)].join(',')})`
+    }
+  },
+  // hover时样式
+  emphasis: {
+    // focus: 'self',
+    textStyle: {
+      textShadowBlur: 20,
+      textShadowOffsetY: 2,
+      textShadowOffsetX: 2,
+      textShadowColor: '#191919'
+    }
+  },
+  data: []
+}
+
+/**
+ * 组装echarts所需要的series
+ * @param {主题} theme
+ * @param {数据} data
+ * @returns
+ */
+function handleSeries(params) {
+  const { data, width, height, gridSize, sizeRange, rotationRange, rotationStep, shape, maskImage, textColor, colors } =
+    params
+  seriesInit.emphasis.textStyle.textShadowColor = chartToken.emphasisTextShadowColor
+  // 组装数据
+  const series = []
+  const seriesUnit = cloneDeep(seriesInit)
+  // 自定义图形
+  if (maskImage) {
+    seriesUnit.maskImage = maskImage
+  }
+  seriesUnit.width = width || '75%'
+  seriesUnit.height = height || '80%'
+  // 网格大小，各项之间间距
+  seriesUnit.gridSize = gridSize || 16
+  // 字体大小范围
+  seriesUnit.sizeRange = sizeRange || [16, 64]
+  // 文字旋转角度范围
+  seriesUnit.rotationRange = rotationRange || [0, 0]
+  // 文字旋转步值
+  seriesUnit.rotationStep = rotationStep || 0
+  // 词云形状
+  seriesUnit.shape = shape || 'circle'
+  // 自定义文本颜色
+  if (textColor) {
+    seriesUnit.textStyle.color = textColor
+  } else {
+    seriesUnit.textStyle.color = (data) => {
+      const index = data.dataIndex
+      return getColor(colors, index)
+    }
+  }
+  seriesUnit.data = data
+  series.push(seriesUnit)
+  return series
+}
+
+export default handleSeries
diff --git a/packages/vue/src/chart/chart-core/base/components/WordCloudChart/index.ts b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/index.ts
new file mode 100644
index 000000000..4188ec7b8
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/index.ts
@@ -0,0 +1,56 @@
+import BaseOption from './BaseOption'
+import cloneDeep from '../../util/cloneDeep'
+import { setTooltip } from './handleOptipn'
+import handleSeries from './handleSeries'
+import init from '../../option/init'
+
+class WordCloudChart {
+  constructor(iChartOption) {
+    this.baseOption = {}
+    this.iChartOption = {}
+    this.baseOption = cloneDeep(BaseOption)
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption()
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption
+    // 图表基础颜色
+    this.baseOption.color = iChartOption.color
+    // 图表鼠标悬浮提示框
+    this.baseOption.tooltip = setTooltip(iChartOption)
+    // 数据
+    this.baseOption.series = handleSeries({
+      data: iChartOption.data,
+      width: iChartOption.width,
+      height: iChartOption.height,
+      gridSize: iChartOption.gridSize,
+      sizeRang: iChartOption.sizeRange,
+      rotationRange: iChartOption.rotationRange,
+      rotationStep: iChartOption.rotationStep,
+      shape: iChartOption.shape,
+      maskImage: iChartOption.maskImage,
+      textColor: iChartOption.textColor,
+      colors: this.baseOption.color
+    })
+    // 图表位置
+    this.baseOption.grid.top = iChartOption.padding[0]
+    this.baseOption.grid.right = iChartOption.padding[1]
+    this.baseOption.grid.bottom = iChartOption.padding[2]
+    this.baseOption.grid.left = iChartOption.padding[3]
+  }
+
+  // 根据渲染出的结果，二次计算option
+  // secondaryUpdateOption(YAxiMax, YAxiMin) {
+  // }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption() {}
+}
+
+export default WordCloudChart
diff --git a/packages/vue/src/chart/chart-core/base/core.ts b/packages/vue/src/chart/chart-core/base/core.ts
new file mode 100644
index 000000000..a2409298b
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/core.ts
@@ -0,0 +1,310 @@
+import tips from './util/tips'
+import merge from './util/merge'
+import * as echarts from 'echarts'
+import Theme from './feature/token'
+import throttle from './util/throttle'
+import axistip from './feature/axistip'
+import { mergeExtend } from './util/merge'
+import BaseChart from './components/BaseChart'
+import readScreen from './feature/readScreen'
+import MediaScreen from './feature/mediaScreen'
+
+const SELF_CHART = [
+  'FlowChart',
+  'WaveChart',
+  'RiverChart',
+  'GanttChart',
+  'BaiduMapChart',
+  'HoneycombChart',
+  'OrganizationChart',
+  'AutonaviMapChart',
+  'SnowFlakeChart',
+  'TimelineChart',
+  'MilestoneChart'
+]
+
+// 图表核心对象，按需引入图表 class 给 CoreChart 渲染，打包容量较小
+export default class CoreChart extends BaseChart {
+  constructor() {
+    super()
+    // 图表echarts实例
+    this.echartsIns = null
+    // 图表icharts实例
+    this.ichartsIns = null
+    // 图表echarts配置项
+    this.eChartOption = null
+    // 图表icharts配置项
+    this.iChartOption = null
+    // 图表所在容器
+    this.dom = null
+    // 图表类型
+    this.chartClass = null
+    // 图表依赖的三方插件
+    this.plugins = {}
+    // 图表还没有执行render()方法
+    this.hasRender = false
+    // 图表渲染完毕的回调
+    this.renderCallBack = null
+    // 图表resize节流时间
+    this.resizeThrottle = 0
+    // 图表容器的宽高变化监听器
+    this.resizeObserver = null
+    // 响应式布局的监听器
+    this.mediaScreenObserver = undefined
+  }
+
+  // 注册主题
+  static registerTheme(name, config) {
+    if (!config) {
+      tips.error('The second parameter config is required')
+      return
+    }
+    Theme.set(name, config)
+  }
+
+  // 注册配置
+  static registerConfig(name, config) {
+    if (!config) {
+      tips.error('The second parameter config is required')
+      return
+    }
+    Theme.setConfig(name, config)
+  }
+
+  // 设置主题
+  static theme(name) {
+    Theme.setDefaultTheme(name)
+  }
+
+  static resetThemeCongfig() {
+    Theme.resetThemeCongfig()
+  }
+
+  // 开启响应式布局（类媒体查询效果）
+  mediaScreen(dom, screenOption) {
+    this.mediaScreenObserver = new MediaScreen(dom, screenOption, (option) => {
+      this.setSimpleOption(this.chartClass, option, this.plugins, false)
+      this.render()
+    })
+  }
+
+  // 初始化echarts，并同时监听容器和窗口的大小变化
+  init(chartDom, theme = {}, initOpts) {
+    const defaultInit = {
+      domResize: true,
+      windowResize: true,
+      resizeThrottle: this.resizeThrottle
+    }
+    initOpts = merge(defaultInit, initOpts)
+    this.dom = chartDom
+    this.echartsIns = echarts.init(chartDom, theme, initOpts)
+    // resize节流函数
+    this.throttleResize =
+      initOpts.resizeThrottle === 0
+        ? this.setResize.bind(this)
+        : throttle(initOpts.resizeThrottle, this.setResize.bind(this))
+    // 容器大小变化监听
+    initOpts.domResize && this.setResizeObserver()
+    // 页面大小变化监听
+    initOpts.windowResize && window.addEventListener('resize', this.throttleResize)
+  }
+
+  setResizeObserver() {
+    this.resizeObserver = new ResizeObserver((entries) => {
+      window.requestAnimationFrame(() => {
+        this.throttleResize()
+      })
+    })
+    this.resizeObserver.observe(this.dom)
+  }
+
+  // 图表宽高自适应
+  setResize() {
+    this.mediaScreenObserver && this.mediaScreenObserver.observe()
+    this.echartsIns && this.echartsIns.resize && this.echartsIns.resize({ width: 'auto' })
+    this.ichartsIns && this.ichartsIns.resize && this.ichartsIns.resize()
+  }
+
+  // 传入简化后的icharts-option
+  setSimpleOption(ChartClass, iChartOption, plugins = {}, isInit = true) {
+    if (isInit) {
+      Theme.setDefaultTheme(iChartOption.theme)
+      this.mediaScreenObserver && this.mediaScreenObserver.setInitOption(iChartOption)
+    }
+    if (iChartOption.readScreen) {
+      readScreen(this.dom, iChartOption.readScreen)
+    }
+    if (this.isSelfChart(ChartClass)) {
+      this.redirectSelfChart(ChartClass, iChartOption)
+      return
+    }
+    this.plugins = plugins
+    this.chartClass = ChartClass
+    this.iChartOption = iChartOption
+    this.ichartsIns = new ChartClass(iChartOption, this.echartsIns, this.plugins)
+    this.eChartOption = this.ichartsIns.getOption()
+    this.iChartOption.axistip && axistip(this.dom, this.echartsIns, this.eChartOption)
+    mergeExtend(this.iChartOption, this.eChartOption)
+  }
+
+  // 若自研图表，走自研图表路径，并更改this指向
+  redirectSelfChart(SelfChart, option, plugins) {
+    const stateDom = this.dom.getElementsByClassName('huicharts-state-container')[0]
+    this.uninstall()
+    this.dom.innerHTML = ''
+    const instance = new SelfChart()
+    instance.init(this.dom)
+    instance.setSimpleOption(SelfChart, option, plugins)
+    instance.renderCallBack = this.renderCallBack
+    if (stateDom) {
+      this.dom.appendChild(stateDom)
+    }
+    Object.setPrototypeOf(this, instance)
+    for (const key in this) {
+      if (Object.hasOwnProperty.call(this, key)) {
+        delete this[key]
+      }
+    }
+  }
+
+  // 判断是否为若自研图表
+  isSelfChart(chartClass) {
+    return SELF_CHART.includes(chartClass.name)
+  }
+
+  // 渲染图表
+  render(option) {
+    // 已经开始渲染
+    this.hasRender = true
+    // 第一次渲染
+    this.setOption(this.eChartOption, option)
+    // 第二次渲染
+    this.setOptionAgain(this.eChartOption)
+    // 图表渲染完成时回调
+    this.renderCallBack && this.renderCallBack(this.echartsIns)
+  }
+
+  // 第一次渲染: 调用echarts原生的setOption
+  setOption(eChartOption, option) {
+    option = merge({ notMerge: true }, option)
+    eChartOption && this.echartsIns.setOption(eChartOption, option)
+  }
+
+  // 第二次渲染: 有些图表需要根据第一次渲染出来的结果进行二次计算
+  setOptionAgain() {
+    if (this.ichartsIns && this.ichartsIns.updateOptionAgain) {
+      const YAxiMax = this.getYAxisMaxValue(0)
+      const YAxiMin = this.getYAxisMinValue(0)
+      // 根据网格重新计算option
+      this.ichartsIns.updateOptionAgain(YAxiMax, YAxiMin)
+      // 再次渲染
+      this.setOption(this.eChartOption)
+    }
+  }
+
+  // 图表刷新，包括刷新配置和数据
+  refresh(iChartOption) {
+    this.iChartOption = iChartOption
+    this.setSimpleOption(this.chartClass, iChartOption, this.plugins)
+    this.render()
+  }
+
+  // 图表刷新，仅刷新数据
+  refreshData(data) {
+    this.iChartOption.data = data
+    this.refresh(this.iChartOption)
+  }
+
+  // 图表渲染完成时回调
+  onRenderReady(callback) {
+    this.renderCallBack = callback
+  }
+
+  // 给echarts单独绑定事件
+  on(...rest) {
+    this.echartsIns && this.echartsIns.on(...rest)
+  }
+
+  // 给echarts单独解绑事件
+  off(...rest) {
+    this.echartsIns && this.echartsIns.off(...rest)
+  }
+
+  // 给echarts实例绑定事件
+  bindEvents(events) {
+    if (events && events.length !== 0) {
+      events.forEach((item) => {
+        if (item.query) {
+          this.off(item.eventName, item.handler)
+          this.on(item.eventName, item.query, item.handler)
+        } else {
+          this.off(item.eventName, item.handler)
+          this.on(item.eventName, item.handler)
+        }
+      })
+    }
+  }
+
+  // 批量给echarts实例解绑事件
+  unbindEvents(events) {
+    if (events && events.length !== 0) {
+      events.forEach((item) => {
+        if (item.handler) {
+          this.off(item.eventName, item.handler)
+        } else {
+          this.off(item.eventName)
+        }
+      })
+    }
+  }
+
+  // 卸载图表时,
+  uninstall() {
+    // 卸载window resize监听功能
+    window.removeEventListener('resize', this.throttleResize)
+    // 卸载container容器变化监听
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.dom)
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+    // 销毁ECharts实例
+    if (this.echartsIns && !this.echartsIns.isDisposed()) {
+      this.echartsIns.dispose()
+    }
+    this.echartsIns = null
+  }
+
+  // 获取到ECharts实例
+  getEchartsInstance() {
+    return this.echartsIns
+  }
+
+  // 直接传入ECharts的原生配置项
+  setEchartsOption(option) {
+    option && (this.eChartOption = option)
+  }
+
+  // 获取到ECharts配置项
+  getEchartsOption() {
+    return this.eChartOption
+  }
+
+  /**
+   * 图表渲染完毕后，获得y刻度的最大值
+   * @param {index为yAxis数组下标} index
+   * _extent是一个数组，_extent[0]为该轴上最小值，_extent[1]为该轴上最大值
+   */
+  getYAxisMaxValue(index) {
+    return this.echartsIns.getModel().getComponent('yAxis', index)?.axis.scale._extent[1]
+  }
+
+  /**
+   * 图表渲染完毕后，获得y轴刻度的最小值
+   * @param {index为yAxis数组下标} index
+   * _extent是一个数组，_extent[0]为该轴上最小值，_extent[1]为该轴上最大值
+   */
+  getYAxisMinValue(index) {
+    return this.echartsIns.getModel().getComponent('yAxis', index)?.axis.scale._extent[0]
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/feature/axistip/index.ts b/packages/vue/src/chart/chart-core/base/feature/axistip/index.ts
new file mode 100644
index 000000000..d6a2e25c9
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/axistip/index.ts
@@ -0,0 +1,79 @@
+import Theme from '../token'
+import { isArray } from '../../util/type'
+
+// 给文本中的label添加气泡
+function axistip(echartsDom, echartsIns, eChartOption) {
+  if (isArray(eChartOption)) {
+    eChartOption.xAxis?.forEach((item) => {
+      item.triggerEvent = true
+    })
+  }
+
+  // 创建气泡容器
+  const tipContainer = document.createElement('div')
+  tipContainer.className = 'labeltip'
+
+  echartsIns.on('mousemove', (param) => {
+    if (param.componentType === 'xAxis') {
+      tipContainer.textContent = param.value
+
+      const tipContainerReact = tipContainer.getBoundingClientRect()
+      const echartsDomRect = echartsDom.getBoundingClientRect()
+      const echartsDomStyle = getComputedStyle(echartsDom)
+      const echartsDomBorder =
+        parseFloat(echartsDomStyle.borderRightWidth) + parseFloat(echartsDomStyle.borderLeftWidth)
+
+      const tipContainerW = tipContainerReact.width
+      const tipContainerH = tipContainerReact.height
+      const { offsetX, offsetY } = param.event
+
+      let tipLeft = 0
+      let tipTop = 0
+
+      // 判断tips 容器宽度是否小于图表容器
+      if (tipContainerW < echartsDomRect.width - echartsDomBorder) {
+        tipTop = offsetY - 16
+
+        // 处理临界值 >0,向右  <0 向左
+        const reviseL = echartsDomRect.width - echartsDomBorder - offsetX - tipContainerW - 16
+        if (reviseL > 0) {
+          tipLeft = offsetX + 16
+        } else {
+          tipLeft = offsetX - tipContainerW - 16
+        }
+      } else {
+        tipTop = offsetY - tipContainerH - 16
+      }
+
+      tipContainer.style.cssText = `
+        position: absolute;
+        display: inline-block;
+        word-break: break-all;
+        padding: 8px;
+        top:${tipTop}px;
+        left:${tipLeft}px;
+        color: ${Theme.config.tooltipTextColor};
+        font-size: 14px;
+        background: ${Theme.config.tooltipBg};
+        box-shadow:0 ${Theme.config.tooltipShadowOffsetY}px 
+        ${Theme.config.tooltipShadowBlur}px 0 ${Theme.config.tooltipShadowColor};
+      `
+    }
+  })
+
+  echartsIns.on('mouseout', (param) => {
+    if (param.componentType === 'xAxis') {
+      tipContainer.textContent = ''
+      tipContainer.style.cssText = `
+      opacity:0;
+      position: absolute;
+      display: inline-block;
+      word-break: break-all;
+      padding: 8px;
+      font-size: 14px;`
+    }
+  })
+  echartsDom.appendChild(tipContainer)
+}
+
+export default axistip
diff --git a/packages/vue/src/chart/chart-core/base/feature/drag/index.less b/packages/vue/src/chart/chart-core/base/feature/drag/index.less
new file mode 100644
index 000000000..423cd3cb8
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/drag/index.less
@@ -0,0 +1,41 @@
+.drag-container {
+  width: 10000px;
+  height: 10000px;
+  position: absolute;
+  cursor: pointer;
+}
+
+.drag-tools {
+  display: none; // 此次巴展先不展示手动缩放按钮
+  width: 32px;
+  bottom: 48px;
+  right: 32px;
+  font-size: 14px;
+  text-align: center;
+  padding-top: 6px;
+  border-radius: 4px;
+  padding-bottom: 6px;
+  position: absolute;
+  border: 1px solid rgba(238, 238, 238, 0.8);
+  background-color: rgba(238, 238, 238, 0.8);
+
+  .drag-tool-item {
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    line-height: 30px;
+
+    &:hover {
+      color: #2070f3;
+    }
+  }
+
+  .drag-tools-enlarge {
+  }
+
+  .drag-tools-center {
+  }
+
+  .drag-tools-shrunk {
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/feature/drag/index.ts b/packages/vue/src/chart/chart-core/base/feature/drag/index.ts
new file mode 100644
index 000000000..1adc6e048
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/drag/index.ts
@@ -0,0 +1,226 @@
+import { pxToNumber } from '../../util/convert'
+import merge from '../../util/merge'
+
+const DOM_WIDTH = 10000
+const DOM_HEIGHT = 10000
+
+// 画布拖拽管理器，具有通用性
+// 支持鼠标拖拽和鼠标滚轮缩放
+class DragManager {
+  constructor(container, option) {
+    option = merge({ scale: 1 }, option)
+    // 画布容器
+    this.container = container
+    // 当前缩放值
+    this.scale = option.scale || 1
+    // 创建被拖拽画布
+    this.insertDragDom()
+    // 初始化画布位置到屏幕正中心
+    this.initPosition()
+    // 创建操作按钮
+    this.createTools()
+    this.scaleUnit = 0.1
+    this.scaleLimit = {
+      min: 0.5,
+      max: 2
+    }
+    this.draging = false
+    this.dom.addEventListener('mousedown', this.bindMouseDown.bind(this))
+    this.dom.addEventListener('mousemove', this.bindMouseMove.bind(this))
+    this.dom.addEventListener('mouseup', this.bindMouseUp.bind(this))
+    this.dom.addEventListener('mousewheel', this.bindMouseWheel.bind(this))
+    this.container.addEventListener('mouseleave', this.bindMouseLeave.bind(this))
+    // 设施画布初始化缩放
+    let center = {
+      x: this.containerRect.left + this.containerRect.width / 2,
+      y: this.containerRect.top + this.containerRect.height / 2
+    }
+    this.scaleDom(center.x, center.y, this.scale)
+  }
+
+  // 插入拖拽画布
+  insertDragDom() {
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('class', 'drag-container')
+    this.container.appendChild(this.dom)
+  }
+
+  // 初始化this.dom的位置为屏幕正中间
+  initPosition() {
+    this.containerRect = this.container.getBoundingClientRect()
+    this.dom.style.top = ((DOM_HEIGHT - this.containerRect.height) / 2) * -1 + 'px'
+    this.dom.style.left = ((DOM_WIDTH - this.containerRect.width) / 2) * -1 + 'px'
+  }
+
+  // 鼠标按下事件
+  bindMouseDown(e) {
+    this.draging = false
+    this.startPos = {
+      domx: pxToNumber(this.dom.style.left),
+      domy: pxToNumber(this.dom.style.top),
+      mousex: e.clientX,
+      mousey: e.clientY
+    }
+  }
+
+  // 鼠标拖拽事件
+  bindMouseMove(e) {
+    if (this.startPos) {
+      this.draging = true
+      let moveX = e.clientX - this.startPos.mousex
+      let moveY = e.clientY - this.startPos.mousey
+      if (moveX === 0 && moveY === 0) return
+      this.draging = true
+      let targetX = this.startPos.domx + moveX
+      let targetY = this.startPos.domy + moveY
+      let target = this.limitPosition(targetX, targetY)
+      this.dom.style.top = target.y + 'px'
+      this.dom.style.left = target.x + 'px'
+    }
+  }
+
+  // 鼠标抬起事件
+  bindMouseUp(e) {
+    if (this.draging && this.startPos) {
+      e.stopPropagation()
+      e.preventDefault()
+    }
+    this.startPos = undefined
+  }
+
+  // 鼠标离开容器事件
+  bindMouseLeave(e) {
+    if (this.draging) {
+      let mouseupEvent = new Event('mouseup')
+      this.dom.dispatchEvent(mouseupEvent)
+      e.stopPropagation()
+      e.preventDefault()
+    }
+  }
+
+  // 鼠标滚轮放大缩小
+  bindMouseWheel(e) {
+    let unit
+    if (e.deltaY < 0) {
+      if (this.scale === this.scaleLimit.max) return
+      unit = this.scaleUnit
+    } else if (e.deltaY > 0) {
+      if (this.scale === this.scaleLimit.min) return
+      unit = -1 * this.scaleUnit
+    }
+    this.scale += unit
+    this.scale = Number(this.scale.toFixed(1))
+    this.scale = Math.max(this.scale, this.scaleLimit.min)
+    this.scale = Math.min(this.scale, this.scaleLimit.max)
+    this.scaleDom(e.clientX, e.clientY, unit)
+  }
+
+  // 画布移动dx、dy距离
+  moveDom(dx, dy) {
+    this.dom.style.top = pxToNumber(this.dom.style.top) + dy + 'px'
+    this.dom.style.left = pxToNumber(this.dom.style.left) + dx + 'px'
+  }
+
+  // 画布以x、y(client类型)为中心进行缩放, size是指每次更改了多少缩放值
+  scaleDom(x, y, size) {
+    let domRect = this.dom.getBoundingClientRect()
+    // 缩放前位置
+    let mouseInDom = {
+      x: ((x - domRect.left) / domRect.width) * DOM_WIDTH,
+      y: ((y - domRect.top) / domRect.height) * DOM_HEIGHT
+    }
+    // 缩放后位置
+    let dx = (DOM_WIDTH / 2 - mouseInDom.x) * size
+    let dy = (DOM_HEIGHT / 2 - mouseInDom.y) * size
+    this.dom.style.transform = `scale(${this.scale})`
+    this.moveDom(dx, dy)
+  }
+
+  // 移动画布，使target显示在容器正中心的位置
+  moveTargetToCenter(target, callback) {
+    if (!target) {
+      return
+    }
+    let targetRect = target.getBoundingClientRect()
+    let containerRect = this.container.getBoundingClientRect()
+    let dx = containerRect.left + containerRect.width / 2 - targetRect.left - targetRect.width / 2
+    let dy = containerRect.top + containerRect.height / 2 - targetRect.top - targetRect.height / 2
+    this.moveDom(dx, dy)
+    callback && callback()
+  }
+
+  // 重置画布位置为屏幕中心
+  resetPosition() {
+    this.initPosition()
+  }
+
+  // 以屏幕为中心，重置画布缩放值为1
+  resetScale() {
+    let size = 1 - this.scale
+    this.scale = 1
+    let center = {
+      x: this.containerRect.left + this.containerRect.width / 2,
+      y: this.containerRect.top + this.containerRect.height / 2
+    }
+    this.scaleDom(center.x, center.y, size)
+  }
+
+  // 重置画布为初始状态
+  reset() {
+    this.resetPosition()
+    this.resetScale()
+  }
+
+  // 修正画布位置，使画布x,y最大值不超过0，最小值不超过（容器宽度 - 画布宽度)
+  limitPosition(targetX, targetY) {
+    // 拖拽位置最大为0
+    targetX = Math.min(0, targetX)
+    targetY = Math.min(0, targetY)
+    // 拖拽位置最小为（容器宽度 - 画布宽度)
+    targetX = Math.max(targetX, (DOM_WIDTH - this.containerRect.width) * -1)
+    targetY = Math.max(targetY, (DOM_HEIGHT - this.containerRect.height) * -1)
+    return {
+      x: targetX,
+      y: targetY
+    }
+  }
+
+  // 创建操作按钮
+  createTools() {
+    let stateDom = `<div class="drag-tools">
+            <div class="drag-tool-item drag-tool-enlarge">加</div>
+            <div class="drag-tool-item drag-tool-center">原</div>
+            <div class="drag-tool-item drag-tool-shrunk">减</div>
+        </div>`
+    this.container.insertAdjacentHTML('beforeend', stateDom)
+    this.container.getElementsByClassName('drag-tool-enlarge')[0].addEventListener('click', () => {
+      this.bindMouseWheel({
+        deltaY: 100,
+        clientX: this.containerRect.left + this.containerRect.width / 2,
+        clientY: this.containerRect.top + this.containerRect.height / 2
+      })
+    })
+    this.container.getElementsByClassName('drag-tool-center')[0].addEventListener('click', () => {
+      this.resetScale()
+    })
+    this.container.getElementsByClassName('drag-tool-shrunk')[0].addEventListener('click', () => {
+      this.bindMouseWheel({
+        deltaY: -100,
+        clientX: this.containerRect.left + this.containerRect.width / 2,
+        clientY: this.containerRect.top + this.containerRect.height / 2
+      })
+    })
+  }
+
+  // 获取拖拽画布
+  getDragDom() {
+    return this.dom
+  }
+
+  unInstall() {
+    this.container.innerHTML = null
+    this.dom = null
+  }
+}
+
+export default DragManager
diff --git a/packages/vue/src/chart/chart-core/base/feature/fluctuation/index.ts b/packages/vue/src/chart/chart-core/base/feature/fluctuation/index.ts
new file mode 100644
index 000000000..3ddaa26ef
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/fluctuation/index.ts
@@ -0,0 +1,54 @@
+import { isArray } from '../../util/type'
+
+// 获取新的数据格式
+const transformData = (origindata) => {
+  const newData = {}
+  const count = Object.keys(origindata[0]).length
+  for (let i = 1; i < count; i++) {
+    let arr = []
+    origindata.forEach((key) => {
+      let firstKey = Object.keys(key)[i]
+      let firstValue = key[firstKey]
+      arr.push(firstValue)
+      newData[firstKey] = arr
+    })
+  }
+  return newData
+}
+
+// 修改轴数据 data：图表数据 allowRange：允许轴的范围
+const fluctuation = (data, allowRange) => {
+  let min = Infinity
+  let max = -Infinity
+  const range = allowRange || [-Infinity, Infinity]
+  const dataKeys = Object.keys(data)
+
+  dataKeys.forEach((key) => {
+    data[key].forEach((item) => {
+      if (isArray(item)) {
+        const arr = item.filter((t) => !isNaN(Number(t)) && Number(t) > range[0] && Number(t) < range[1])
+        const curMin = Math.min(...arr)
+        const curMax = Math.max(...arr)
+        min = Math.min(min, curMin)
+        max = Math.max(max, curMax)
+      } else {
+        const num = Number(item)
+        if (num < range[0] || num > range[1]) {
+          return
+        }
+        min = Math.min(min, num)
+        max = Math.max(max, num)
+      }
+    })
+  })
+
+  let axisMin = Math.floor(min - ((max - min) / 5) * 4)
+  if (min > 0 && axisMin < 0) {
+    axisMin = 0
+  }
+  const axisMax = Math.ceil(max + (max - min) / 5)
+  return [axisMin, axisMax]
+}
+
+export default fluctuation
+export { transformData }
diff --git a/packages/vue/src/chart/chart-core/base/feature/mediaScreen/index.ts b/packages/vue/src/chart/chart-core/base/feature/mediaScreen/index.ts
new file mode 100644
index 000000000..3fb0c5949
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/mediaScreen/index.ts
@@ -0,0 +1,78 @@
+import merge from '../../util/merge'
+import cloneDeep from '../../util/cloneDeep'
+import { isArrayEqual } from '../../util/equal'
+
+class mediaScreen {
+  constructor(dom, option, callback) {
+    // 媒体查询监听的dom
+    this.dom = dom
+    // 媒体查询的响应式配置
+    this.option = option || []
+    // 媒体查询命中时的回调函数
+    this.callback = callback
+    // 当前宽度下响应式配置命中的区间
+    this.curRange = []
+    // 图表初始配置
+    this.initOption = {}
+  }
+
+  // 监听dom宽度变化
+  observe() {
+    if (!this.dom) return
+    let domWidth = this.dom.getBoundingClientRect().width
+    let range = this.getRange(domWidth, this.option)
+    if (!isArrayEqual(this.curRange, range)) {
+      let tempOption = cloneDeep(this.initOption)
+      this.curRange = range
+      this.curRange.forEach((rangeIndex) => {
+        merge(tempOption, this.option[rangeIndex].option)
+      })
+      this.callback(tempOption)
+    }
+  }
+
+  // 强制触发一次监听，(解决页面挂载就调用refresh配置的问题)
+  refresh() {
+    this.curRange = []
+    this.observe()
+  }
+
+  // 设置图表初始配置
+  setInitOption(option) {
+    this.initOption = cloneDeep(option)
+  }
+
+  // 计算命中区间
+  getRange(domWidth, option) {
+    let range = []
+    option.forEach((item, index) => {
+      // maxWidth/minWidth都存在
+      if (item.maxWidth !== undefined && item.minWidth !== undefined) {
+        if (domWidth <= item.maxWidth && domWidth >= item.minWidth) {
+          range.push(index)
+        }
+      }
+      // maxWidth/minWidth都不存在，直接push到this.initRange
+      else if (item.maxWidth === undefined && item.minWidth === undefined) {
+        range.push(index)
+      }
+      // minWidth不存在
+      else if (item.maxWidth !== undefined && item.minWidth === undefined) {
+        if (domWidth <= item.maxWidth) {
+          range.push(index)
+        }
+      }
+      // maxWidth不存在
+      else if (item.maxWidth === undefined && item.minWidth !== undefined) {
+        if (domWidth >= item.minWidth) {
+          range.push(index)
+        }
+      }
+    })
+    // 数组去重
+    range = [...new Set(range)]
+    return range
+  }
+}
+
+export default mediaScreen
diff --git a/packages/vue/src/chart/chart-core/base/feature/mini/index.ts b/packages/vue/src/chart/chart-core/base/feature/mini/index.ts
new file mode 100644
index 000000000..d6f0f56d0
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/mini/index.ts
@@ -0,0 +1,46 @@
+import { isArray } from '../../util/type'
+
+// 微型场景下，隐藏许多不必要的图元
+function mini(iChartOption, baseOption) {
+  if (iChartOption.mini) {
+    baseOption.grid.forEach((item) => {
+      Object.assign(item, {
+        top: 2,
+        left: 0,
+        right: 0,
+        bottom: 1,
+        containLabel: false
+      })
+    })
+    baseOption.legend = Object.assign(baseOption.legend, {
+      show: false
+    })
+    baseOption.title = Object.assign(baseOption.title, {
+      show: false
+    })
+    baseOption.tooltip = Object.assign(baseOption.tooltip, {
+      show: false
+    })
+    if (!isArray(baseOption.xAxis)) {
+      baseOption.xAxis = [baseOption.xAxis]
+    }
+    if (!isArray(baseOption.yAxis)) {
+      baseOption.yAxis = [baseOption.yAxis]
+    }
+    baseOption.xAxis.forEach((item) => {
+      Object.assign(item, {
+        show: false,
+        boundaryGap: false
+      })
+    })
+    baseOption.yAxis.forEach((item) => {
+      Object.assign(item, {
+        show: false,
+        max: 'dataMax',
+        min: 'dataMin'
+      })
+    })
+  }
+}
+
+export default mini
diff --git a/packages/vue/src/chart/chart-core/base/feature/readScreen/index.ts b/packages/vue/src/chart/chart-core/base/feature/readScreen/index.ts
new file mode 100644
index 000000000..6571c0c51
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/readScreen/index.ts
@@ -0,0 +1,8 @@
+function readScreen(dom, readScreenText) {
+  if (readScreenText) {
+    dom.setAttribute('tabindex', '0')
+    dom.setAttribute('aria-label', readScreenText)
+  }
+}
+
+export default readScreen
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/dark.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/dark.ts
new file mode 100644
index 000000000..fdb41253f
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/dark.ts
@@ -0,0 +1,46 @@
+import board from '../hdesign/board'
+import { getThemeColor, getColorGroup } from '../util'
+
+const gray = {
+  ...board.gray,
+  ...board.transparent
+}
+
+// 图表的状态颜色
+const colorState = {
+  // 错误色
+  colorError: board.red.colorRed40,
+  // 告警色
+  colorAlert: board.orange.colorOrange50,
+  // 提醒色
+  colorWarning: board.yellow.colorYellow40,
+  // 成功色
+  colorSuccess: board.mint.colorMint60,
+  // 信息色
+  colorInfo: board.blue.colorBlue50,
+  // 失效色
+  colorNone: board.gray.colorGray60
+}
+
+// 图表配色对象
+const colorChart = {
+  colorChart1: board.blue.colorBlue50,
+  colorChart2: board.cyan.colorCyan40,
+  colorChart3: board.indigo.colorIndigo50,
+  colorChart4: board.brand.colorBrand30,
+  colorChart5: board.pink.colorPink30,
+  colorChart6: board.green.colorGreen40,
+  colorChart7: board.yellow.colorYellow60,
+  colorChart8: board.mint.colorMint40,
+  colorChart9: board.purple.colorPurple40,
+  colorChart10: board.rose.colorRose40,
+  colorChart11: board.orange.colorOrange30,
+  colorChart12: board.red.colorRed40
+}
+
+// 图表内置的颜色组
+const colorGroup = getColorGroup(colorChart)
+
+const dark = getThemeColor(gray, colorState, colorGroup)
+
+export default dark
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/index.ts
new file mode 100644
index 000000000..16b60aed1
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/index.ts
@@ -0,0 +1,9 @@
+import light from './light'
+import dark from './dark'
+
+const bpit = {
+  light,
+  dark
+}
+
+export default bpit
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/light.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/light.ts
new file mode 100644
index 000000000..6a6931692
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/light.ts
@@ -0,0 +1,46 @@
+import board from '../hdesign/board'
+import { getThemeColor, getColorGroup } from '../util'
+
+const gray = {
+  ...board.gray,
+  ...board.transparent
+}
+
+// 图表的状态颜色
+const colorState = {
+  // 错误色
+  colorError: board.red.colorRed50,
+  // 告警色
+  colorAlert: board.orange.colorOrange50,
+  // 提醒色
+  colorWarning: board.yellow.colorYellow50,
+  // 成功色
+  colorSuccess: board.mint.colorMint50,
+  // 信息色
+  colorInfo: board.blue.colorBlue50,
+  // 失效色
+  colorNone: board.gray.colorGray30
+}
+
+// 图表配色对象
+const colorChart = {
+  colorChart1: board.blue.colorBlue50,
+  colorChart2: board.cyan.colorCyan40,
+  colorChart3: board.indigo.colorIndigo50,
+  colorChart4: board.brand.colorBrand20,
+  colorChart5: board.pink.colorPink30,
+  colorChart6: board.green.colorGreen40,
+  colorChart7: board.yellow.colorYellow60,
+  colorChart8: board.mint.colorMint40,
+  colorChart9: board.purple.colorPurple30,
+  colorChart10: board.rose.colorRose40,
+  colorChart11: board.orange.colorOrange30,
+  colorChart12: board.red.colorRed40
+}
+
+// 图表内置的颜色组
+const colorGroup = getColorGroup(colorChart)
+
+const light = getThemeColor(gray, colorState, colorGroup)
+
+export default light
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/board.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/board.ts
new file mode 100644
index 000000000..d2eb12d40
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/board.ts
@@ -0,0 +1,263 @@
+const rose = {
+  colorRose10: '#FFEBF3',
+  colorRose20: '#FFD6E8',
+  colorRose30: '#FAA0CB',
+  colorRose40: '#F56EAD',
+  colorRose50: '#F24998',
+  colorRose60: '#E61C81',
+  colorRose70: '#B50E65',
+  colorRose80: '#940A54',
+  colorRose90: '#70033F',
+  colorRose100: '#4D002B',
+  colorRose110: '#993D6E',
+  colorRose120: '#CC7AA6',
+  colorRose130: '#E6B8D2'
+}
+
+const red = {
+  colorRed10: '#FFF1F0',
+  colorRed20: '#FCE2E0',
+  colorRed30: '#FAA7A3',
+  colorRed40: '#FA8682',
+  colorRed50: '#F76360',
+  colorRed60: '#F23030',
+  colorRed70: '#CC272A',
+  colorRed80: '#A3171C',
+  colorRed90: '#78080E',
+  colorRed100: '#4D0005',
+  colorRed110: '#A64242',
+  colorRed120: '#D4827F',
+  colorRed130: '#F2C5C2'
+}
+
+const orange = {
+  colorOrange10: '#FFF4E8',
+  colorOrange20: '#FFEBD1',
+  colorOrange30: '#FCD5A4',
+  colorOrange40: '#FCBC72',
+  colorOrange50: '#FF9A2E',
+  colorOrange60: '#FF8800',
+  colorOrange70: '#D96900',
+  colorOrange80: '#A64D00',
+  colorOrange90: '#733400',
+  colorOrange100: '#4D2201',
+  colorOrange110: '#9E6D3F',
+  colorOrange120: '#D6A981',
+  colorOrange130: '#F2D8C2'
+}
+
+const yellow = {
+  colorYellow10: '#FFFAE6',
+  colorYellow20: '#FCF0C2',
+  colorYellow30: '#FAE49D',
+  colorYellow40: '#F7D56F',
+  colorYellow50: '#FAC532',
+  colorYellow60: '#FFB700',
+  colorYellow70: '#E0A210',
+  colorYellow80: '#A67711',
+  colorYellow90: '#7A5202',
+  colorYellow100: '#4D3200',
+  colorYellow110: '#9E7E3F',
+  colorYellow120: '#D4B57F',
+  colorYellow130: '#E6D3B8'
+}
+
+const lemon = {
+  colorLemon10: '#FFFFE6',
+  colorLemon20: '#FCFCC2',
+  colorLemon30: '#FAF78E',
+  colorLemon40: '#FCF26A',
+  colorLemon50: '#FAEE46',
+  colorLemon60: '#F2E70C',
+  colorLemon70: '#D9C816',
+  colorLemon80: '#A38F08',
+  colorLemon90: '#756202',
+  colorLemon100: '#4D3C00',
+  colorLemon110: '#9E8F46',
+  colorLemon120: '#D6C581',
+  colorLemon130: '#EDDFB2'
+}
+
+const lime = {
+  colorLime10: '#FDFFE6',
+  colorLime20: '#EFF5BF',
+  colorLime30: '#E2ED8E',
+  colorLime40: '#D5E667',
+  colorLime50: '#C6DE3E',
+  colorLime60: '#B2D119',
+  colorLime70: '#95B312',
+  colorLime80: '#728C0A',
+  colorLime90: '#576E05',
+  colorLime100: '#3B4D00',
+  colorLime110: '#808C46',
+  colorLime120: '#C1CC7A',
+  colorLime130: '#3B4D00'
+}
+
+const kelly = {
+  colorKelly10: '#EDF7DF',
+  colorKelly20: '#DAF2BB',
+  colorKelly30: '#B9E683',
+  colorKelly40: '#9EDB58',
+  colorKelly50: '#7DCC29',
+  colorKelly60: '#5CB300',
+  colorKelly70: '#4B9902',
+  colorKelly80: '#3C8001',
+  colorKelly90: '#2E6600',
+  colorKelly100: '#1F4700',
+  colorKelly110: '#628C38',
+  colorKelly120: '#A2C777',
+  colorKelly130: '#D2E6B8'
+}
+
+const green = {
+  colorGreen10: '#E4F7E9',
+  colorGreen20: '#D5F2DC',
+  colorGreen30: '#92E0A5',
+  colorGreen40: '#60D680',
+  colorGreen50: '#25C251',
+  colorGreen60: '#00B336',
+  colorGreen70: '#029931',
+  colorGreen80: '#01802B',
+  colorGreen90: '#006624',
+  colorGreen100: '#004A1B',
+  colorGreen110: '#3D995C',
+  colorGreen120: '#77C78F',
+  colorGreen130: '#B8E6C7'
+}
+
+const mint = {
+  colorMint10: '#E6FCFA',
+  colorMint20: '#D0F5F1',
+  colorMint30: '#97E8E1',
+  colorMint40: '#64DED6',
+  colorMint50: '#38D6CE',
+  colorMint60: '#10C7C1',
+  colorMint70: '#0BB8B2',
+  colorMint80: '#048C8C',
+  colorMint90: '#046466',
+  colorMint100: '#004547',
+  colorMint110: '#3D9996',
+  colorMint120: '#77C7C2',
+  colorMint130: '#B8E6E1'
+}
+
+const sky = {
+  colorSky10: '#E8FAFF',
+  colorSky20: '#D6F6FF',
+  colorSky30: '#A5E6FA',
+  colorSky40: '#79D8F7',
+  colorSky50: '#58CBF5',
+  colorSky60: '#33BCF2',
+  colorSky70: '#1F9ACF',
+  colorSky80: '#1075A3',
+  colorSky90: '#065278',
+  colorSky100: '#00304A',
+  colorSky110: '#3D7F99',
+  colorSky120: '#7AB8CC',
+  colorSky130: '#B6E5F2'
+}
+
+const blue = {
+  colorBlue10: '#F0F7FF',
+  colorBlue20: '#DEECFF',
+  colorBlue30: '#B3D6FF',
+  colorBlue40: '#7EB7FC',
+  colorBlue50: '#4191FA',
+  colorBlue60: '#1476FF',
+  colorBlue70: '#0F5ED4',
+  colorBlue80: '#0845A6',
+  colorBlue90: '#022E7A',
+  colorBlue100: '#001A4A',
+  colorBlue110: '#3D6899',
+  colorBlue120: '#7FA6D4',
+  colorBlue130: '#B6D4F2'
+}
+
+const indigo = {
+  colorIndigo10: '#F0EBFF',
+  colorIndigo20: '#E2D9FC',
+  colorIndigo30: '#B9A6F7',
+  colorIndigo40: '#9479F2',
+  colorIndigo50: '#6E51E0',
+  colorIndigo60: '#512FD6',
+  colorIndigo70: '#391EB0',
+  colorIndigo80: '#27108F',
+  colorIndigo90: '#19056E',
+  colorIndigo100: '#0E004D',
+  colorIndigo110: '#584D99',
+  colorIndigo120: '#847ACC',
+  colorIndigo130: '#BBB8E6'
+}
+
+const purple = {
+  colorPurple10: '#F9EBFF',
+  colorPurple20: '#F4E0FC',
+  colorPurple30: '#DEA3F7',
+  colorPurple40: '#CC78F0',
+  colorPurple50: '#BA53E6',
+  colorPurple60: '#A42FD6',
+  colorPurple70: '#841EB0',
+  colorPurple80: '#6B1091',
+  colorPurple90: '#520673',
+  colorPurple100: '#36004D',
+  colorPurple110: '#7D3D99',
+  colorPurple120: '#B47ACC',
+  colorPurple130: '#D8B8E6'
+}
+
+const pink = {
+  colorPink10: '#FCE8FB',
+  colorPink20: '#FCD4FA',
+  colorPink30: '#F7A1F3',
+  colorPink40: '#EB75E7',
+  colorPink50: '#E841E5',
+  colorPink60: '#D91AD9',
+  colorPink70: '#B50FB8',
+  colorPink80: '#8F0A94',
+  colorPink90: '#6B0370',
+  colorPink100: '#47004D',
+  colorPink110: '#993D99',
+  colorPink120: '#C97ACC',
+  colorPink130: '#E2B8E6'
+}
+
+const gray = {
+  colorGray0: '#FFFFFF',
+  colorGray5: '#FAFAFA',
+  colorGray10: '#F5F5F5',
+  colorGray20: '#F0F0F0',
+  colorGray30: '#E6E6E6',
+  colorGray40: '#DBDBDB',
+  colorGray50: '#C2C2C2',
+  colorGray60: '#808080',
+  colorGray70: '#595959',
+  colorGray80: '#333333',
+  colorGray90: '#191919',
+  colorGray100: '#000000'
+}
+
+const transparent = {
+  colorTransparent: 'transparent'
+}
+
+const board = {
+  red,
+  sky,
+  lime,
+  rose,
+  mint,
+  blue,
+  pink,
+  gray,
+  kelly,
+  lemon,
+  green,
+  orange,
+  yellow,
+  indigo,
+  purple,
+  transparent
+}
+
+export default board
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/dark.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/dark.ts
new file mode 100644
index 000000000..ae821b994
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/dark.ts
@@ -0,0 +1,43 @@
+// 目前没有黑色主题，图表配色延用白色主题
+import board from './board'
+import { getThemeColor, getColorGroup } from '../util'
+
+const gray = {
+  ...board.gray,
+  ...board.transparent
+}
+
+// 图表的状态颜色
+const colorState = {
+  // 紧急色
+  colorError: board.red.colorRed60,
+  // 重要告警色
+  colorAlert: board.orange.colorOrange60,
+  // 次要告警色
+  colorWarning: board.yellow.colorYellow60,
+  // 成功色
+  colorSuccess: board.kelly.colorKelly60,
+  // 提示色
+  colorInfo: board.blue.colorBlue60,
+  // 失效
+  colorNone: board.gray.colorGray50
+}
+
+// 图表配色对象
+const colorChart = {
+  colorChart1: board.blue.colorBlue60,
+  colorChart2: board.mint.colorMint70,
+  colorChart3: board.indigo.colorIndigo50,
+  colorChart4: board.kelly.colorKelly60,
+  colorChart5: board.yellow.colorYellow60,
+  colorChart6: board.sky.colorSky60,
+  colorChart7: board.purple.colorPurple50,
+  colorChart8: board.rose.colorRose50 // (原色 '#EB4696')
+}
+
+// 图表内置的颜色组
+const colorGroup = getColorGroup(colorChart)
+
+const dark = getThemeColor(gray, colorState, colorGroup)
+
+export default dark
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/index.ts
new file mode 100644
index 000000000..04dbb566e
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/index.ts
@@ -0,0 +1,9 @@
+import light from './light'
+import dark from './dark'
+
+const cloud = {
+  light,
+  dark
+}
+
+export default cloud
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/light.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/light.ts
new file mode 100644
index 000000000..9f033ef38
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/light.ts
@@ -0,0 +1,42 @@
+import board from './board'
+import { getThemeColor, getColorGroup } from '../util'
+
+const gray = {
+  ...board.gray,
+  ...board.transparent
+}
+
+// 图表的状态颜色
+const colorState = {
+  // 紧急色
+  colorError: board.red.colorRed60,
+  // 重要告警色
+  colorAlert: board.orange.colorOrange60,
+  // 次要告警色
+  colorWarning: board.yellow.colorYellow60,
+  // 成功色
+  colorSuccess: board.kelly.colorKelly60,
+  // 提示色
+  colorInfo: board.blue.colorBlue60,
+  // 失效
+  colorNone: board.gray.colorGray50
+}
+
+// 图表配色对象
+const colorChart = {
+  colorChart1: board.blue.colorBlue60,
+  colorChart2: board.mint.colorMint70,
+  colorChart3: board.indigo.colorIndigo50,
+  colorChart4: board.kelly.colorKelly60,
+  colorChart5: board.yellow.colorYellow60,
+  colorChart6: board.sky.colorSky60,
+  colorChart7: board.purple.colorPurple50,
+  colorChart8: board.rose.colorRose50 // (原色 '#EB4696')
+}
+
+// 图表内置的颜色组
+const colorGroup = getColorGroup(colorChart)
+
+const light = getThemeColor(gray, colorState, colorGroup)
+
+export default light
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/board.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/board.ts
new file mode 100644
index 000000000..07c946ff5
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/board.ts
@@ -0,0 +1,193 @@
+const rose = {
+  colorRose5: '#FEE5F2',
+  colorRose10: '#FCC3E0',
+  colorRose20: '#F99AC7',
+  colorRose30: '#F470AB',
+  colorRose40: '#ED448A',
+  colorRose50: '#E61866',
+  colorRose60: '#C40054',
+  colorRose70: '#811439',
+  colorRose80: '#540D24',
+  colorRose90: '#330614'
+}
+
+const red = {
+  colorRed5: '#FEE7E8',
+  colorRed10: '#FABDC1',
+  colorRed20: '#F59297',
+  colorRed30: '#EE696F',
+  colorRed40: '#E7434A',
+  colorRed50: '#E02128',
+  colorRed60: '#C7000B',
+  colorRed70: '#850F12',
+  colorRed80: '#59080A',
+  colorRed90: '#350305'
+}
+
+const orange = {
+  colorOrange5: '#FEF5E8',
+  colorOrange10: '#FDE2BD',
+  colorOrange20: '#FCCE92',
+  colorOrange30: '#F9B766',
+  colorOrange40: '#F69E39',
+  colorOrange50: '#F4840C',
+  colorOrange60: '#C76207',
+  colorOrange70: '#954304',
+  colorOrange80: '#642802',
+  colorOrange90: '#3D1601'
+}
+
+const yellow = {
+  colorYellow5: '#FEFCE0',
+  colorYellow10: '#FEF8B8',
+  colorYellow20: '#FEF08A',
+  colorYellow30: '#FDE55C',
+  colorYellow40: '#FCD72E',
+  colorYellow50: '#FCC800',
+  colorYellow60: '#D19F00',
+  colorYellow70: '#9E7400',
+  colorYellow80: '#614500',
+  colorYellow90: '#2E1F00'
+}
+
+const green = {
+  colorGreen5: '#F2FBE9',
+  colorGreen10: '#DFF4CC',
+  colorGreen20: '#C6E9A8',
+  colorGreen30: '#A8DB81',
+  colorGreen40: '#87C859',
+  colorGreen50: '#62B42E',
+  colorGreen60: '#488E20',
+  colorGreen70: '#316614',
+  colorGreen80: '#1B3E0A',
+  colorGreen90: '#0C2004'
+}
+
+const mint = {
+  colorMint5: '#E7FBF2',
+  colorMint10: '#BCF2DB',
+  colorMint20: '#8FE5C2',
+  colorMint30: '#63D5A8',
+  colorMint40: '#36C18D',
+  colorMint50: '#09AA71',
+  colorMint60: '#058358',
+  colorMint70: '#036142',
+  colorMint80: '#02422E',
+  colorMint90: '#00291D'
+}
+
+const cyan = {
+  colorCyan5: '#E8FCFD',
+  colorCyan10: '#C9F6F9',
+  colorCyan20: '#A4ECF1',
+  colorCyan30: '#7DDFE7',
+  colorCyan40: '#55CCD9',
+  colorCyan50: '#2CB8C9',
+  colorCyan60: '#1C94A4',
+  colorCyan70: '#127180',
+  colorCyan80: '#094C57',
+  colorCyan90: '#04282F'
+}
+
+const blue = {
+  colorBlue5: '#EEF3FE',
+  colorBlue10: '#D0D8FD',
+  colorBlue20: '#B0BFFD',
+  colorBlue30: '#8CA3FA',
+  colorBlue40: '#668CF7',
+  colorBlue50: '#2070F3',
+  colorBlue60: '#1F55B5',
+  colorBlue70: '#1B3F86',
+  colorBlue80: '#112857',
+  colorBlue90: '#081635'
+}
+
+const indigo = {
+  colorIndigo5: '#EEEEFE',
+  colorIndigo10: '#D5D3FD',
+  colorIndigo20: '#BFB9FA',
+  colorIndigo30: '#A89FF9',
+  colorIndigo40: '#8E81F4',
+  colorIndigo50: '#715AFB',
+  colorIndigo60: '#5531EB',
+  colorIndigo70: '#3F21B5',
+  colorIndigo80: '#281675',
+  colorIndigo90: '#160B48'
+}
+
+const purple = {
+  colorPurple5: '#F7EDFE',
+  colorPurple10: '#E8CFFE',
+  colorPurple20: '#D9B1FD',
+  colorPurple30: '#CB8EFB',
+  colorPurple40: '#BF68FA',
+  colorPurple50: '#B62BF7',
+  colorPurple60: '#8A21BC',
+  colorPurple70: '#651B8B',
+  colorPurple80: '#41125A',
+  colorPurple90: '#260937'
+}
+
+const pink = {
+  colorPink5: '#FDE6FC',
+  colorPink10: '#F9C5F6',
+  colorPink20: '#F39DEC',
+  colorPink30: '#EB74DF',
+  colorPink40: '#E049CE',
+  colorPink50: '#D41DBC',
+  colorPink60: '#9F1C8D',
+  colorPink70: '#751868',
+  colorPink80: '#4C0F43',
+  colorPink90: '#2E0728'
+}
+
+const brand = {
+  colorBrand5: '#E6F2FD',
+  colorBrand10: '#B8D9F9',
+  colorBrand20: '#8ABEF3',
+  colorBrand30: '#5CA2E9',
+  colorBrand40: '#2E86DE',
+  colorBrand50: '#0067D1',
+  colorBrand60: '#004EA8',
+  colorBrand70: '#003D83',
+  colorBrand80: '#002E6A',
+  colorBrand90: '#00214B'
+}
+
+const gray = {
+  colorGray0: '#FFFFFF',
+  colorGray5: '#F3F3F3',
+  colorGray10: '#DFDFDF',
+  colorGray20: '#C9C9C9',
+  colorGray30: '#AEAEAE',
+  colorGray40: '#939393',
+  colorGray50: '#777777',
+  colorGray60: '#595959',
+  colorGray70: '#393939',
+  colorGray80: '#2A2A2A',
+  colorGray90: '#191919',
+  colorGray100: '#000000'
+}
+
+const transparent = {
+  colorTransparent: 'transparent'
+}
+
+const board = {
+  red,
+  rose,
+  mint,
+  cyan,
+  blue,
+  pink,
+  gray,
+  green,
+  brand,
+  orange,
+  yellow,
+  indigo,
+  purple,
+  transparent
+}
+
+export default board
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/dark.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/dark.ts
new file mode 100644
index 000000000..05186d62e
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/dark.ts
@@ -0,0 +1,44 @@
+import board from './board'
+import { getThemeColor, getColorGroup } from '../util'
+
+const gray = {
+  ...board.gray,
+  ...board.transparent
+}
+
+const colorState = {
+  // 错误色
+  colorError: board.red.colorRed40,
+  // 告警色
+  colorAlert: board.orange.colorOrange50,
+  // 提醒色
+  colorWarning: board.yellow.colorYellow40,
+  // 成功色
+  colorSuccess: board.mint.colorMint60,
+  // 信息色
+  colorInfo: board.blue.colorBlue50,
+  // 失效色
+  colorNone: board.gray.colorGray60
+}
+
+// 图表的配色对象
+const colorChart = {
+  colorChart1: board.blue.colorBlue50,
+  colorChart2: board.green.colorGreen50,
+  colorChart3: board.indigo.colorIndigo50,
+  colorChart4: board.mint.colorMint50,
+  colorChart5: board.brand.colorBrand50,
+  colorChart6: board.pink.colorPink50,
+  colorChart7: board.cyan.colorCyan50,
+  colorChart8: board.orange.colorOrange50,
+  colorChart9: board.rose.colorRose50,
+  colorChart10: board.yellow.colorYellow50,
+  colorChart11: board.purple.colorPurple50
+}
+
+// 图表内置的颜色组
+const colorGroup = getColorGroup(colorChart)
+
+const dark = getThemeColor(gray, colorState, colorGroup)
+
+export default dark
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/index.ts
new file mode 100644
index 000000000..07fa6d102
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/index.ts
@@ -0,0 +1,9 @@
+import light from './light'
+import dark from './dark'
+
+const hdesign = {
+  light,
+  dark
+}
+
+export default hdesign
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/light.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/light.ts
new file mode 100644
index 000000000..dbf89c3f2
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/light.ts
@@ -0,0 +1,44 @@
+import board from './board'
+import { getThemeColor, getColorGroup } from '../util'
+
+const gray = {
+  ...board.gray,
+  ...board.transparent
+}
+
+const colorState = {
+  // 错误色
+  colorError: board.red.colorRed50,
+  // 告警色
+  colorAlert: board.orange.colorOrange50,
+  // 提醒色
+  colorWarning: board.yellow.colorYellow50,
+  // 成功色
+  colorSuccess: board.mint.colorMint50,
+  // 信息色
+  colorInfo: board.blue.colorBlue50,
+  // 失效色
+  colorNone: board.gray.colorGray30
+}
+
+// 图表的配色对象
+const colorChart = {
+  colorChart1: board.blue.colorBlue50,
+  colorChart2: board.green.colorGreen40,
+  colorChart3: board.indigo.colorIndigo50,
+  colorChart4: board.mint.colorMint40,
+  colorChart5: board.brand.colorBrand50,
+  colorChart6: board.pink.colorPink40,
+  colorChart7: board.cyan.colorCyan50,
+  colorChart8: board.orange.colorOrange40,
+  colorChart9: board.rose.colorRose50,
+  colorChart10: board.yellow.colorYellow40,
+  colorChart11: board.purple.colorPurple50
+}
+
+// 图表内置的颜色组
+const colorGroup = getColorGroup(colorChart)
+
+const light = getThemeColor(gray, colorState, colorGroup)
+
+export default light
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/ict/board.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/board.ts
new file mode 100644
index 000000000..9aa42b740
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/board.ts
@@ -0,0 +1,179 @@
+const rose = {
+  colorRose5: '#F9F2F3',
+  colorRose10: '#F3DADE',
+  colorRose20: '#EFBCC5',
+  colorRose30: '#EF93A7',
+  colorRose40: '#F46087',
+  colorRose50: '#E61866',
+  colorRose60: '#AD184D',
+  colorRose70: '#811439',
+  colorRose80: '#540D24',
+  colorRose90: '#330614'
+}
+
+const red = {
+  colorRed5: '#F9F2F2',
+  colorRed10: '#F3DADA',
+  colorRed20: '#F0BDBD',
+  colorRed30: '#F09596',
+  colorRed40: '#F46465',
+  colorRed50: '#EB171F',
+  colorRed60: '#B2161B',
+  colorRed70: '#841316',
+  colorRed80: '#570C0D',
+  colorRed90: '#350506'
+}
+
+const orange = {
+  colorOrange5: '#FDF1EF',
+  colorOrange10: '#FCD8CE',
+  colorOrange20: '#FABAAA',
+  colorOrange30: '#FC916E',
+  colorOrange40: '#F36900',
+  colorOrange50: '#C45613',
+  colorOrange60: '#944114',
+  colorOrange70: '#6E3011',
+  colorOrange80: '#471E0B',
+  colorOrange90: '#2B1005'
+}
+
+const yellow = {
+  colorYellow5: '#FDF2E5',
+  colorYellow10: '#FCDBAA',
+  colorYellow20: '#FDC000',
+  colorYellow30: '#DAA61B',
+  colorYellow40: '#B98C1D',
+  colorYellow50: '#96711B',
+  colorYellow60: '#715516',
+  colorYellow70: '#543F0F',
+  colorYellow80: '#362807',
+  colorYellow90: '#201603'
+}
+
+const green = {
+  colorGreen5: '#EEF6EB',
+  colorGreen10: '#BCEDAC',
+  colorGreen20: '#97DA7E',
+  colorGreen30: '#71C14C',
+  colorGreen40: '#4FA700',
+  colorGreen50: '#478625',
+  colorGreen60: '#376422',
+  colorGreen70: '#2A4A1C',
+  colorGreen80: '#1A2F12',
+  colorGreen90: '#0F1B0A'
+}
+
+const mint = {
+  colorMint5: '#ECF6F1',
+  colorMint10: '#AFEDCE',
+  colorMint20: '#82DBB1',
+  colorMint30: '#50C291',
+  colorMint40: '#00A874',
+  colorMint50: '#278661',
+  colorMint60: '#236549',
+  colorMint70: '#1D4A37',
+  colorMint80: '#1B2B21',
+  colorMint90: '#0B1B13'
+}
+
+const cyan = {
+  colorCyan5: '#EFF4F6',
+  colorCyan10: '#C6E5EC',
+  colorCyan20: '#87D5E5',
+  colorCyan30: '#54BCCE',
+  colorCyan40: '#00A2B5',
+  colorCyan50: '#2A8290',
+  colorCyan60: '#26616B',
+  colorCyan70: '#1F484F',
+  colorCyan80: '#152E32',
+  colorCyan90: '#0C1A1C'
+}
+
+const blue = {
+  colorBlue5: '#F4F3F9',
+  colorBlue10: '#DBDFF2',
+  colorBlue20: '#BFC8EE',
+  colorBlue30: '#99ABED',
+  colorBlue40: '#6D8FF0',
+  colorBlue50: '#2070F3',
+  colorBlue60: '#1F55B5',
+  colorBlue70: '#1B3F86',
+  colorBlue80: '#112857',
+  colorBlue90: '#081635'
+}
+
+const indigo = {
+  colorIndigo5: '#F3F3F9',
+  colorIndigo10: '#DFDEF2',
+  colorIndigo20: '#C9C5EE',
+  colorIndigo30: '#ADA6ED',
+  colorIndigo40: '#9185F0',
+  colorIndigo50: '#745EF7',
+  colorIndigo60: '#5531EB',
+  colorIndigo70: '#3F21B5',
+  colorIndigo80: '#281675',
+  colorIndigo90: '#160B48'
+}
+
+const purple = {
+  colorPurple5: '#F6F2F9',
+  colorPurple10: '#E7DBF2',
+  colorPurple20: '#D8C0EE',
+  colorPurple30: '#C99CED',
+  colorPurple40: '#BD72F0',
+  colorPurple50: '#B62BF7',
+  colorPurple60: '#8A21BC',
+  colorPurple70: '#651B8B',
+  colorPurple80: '#41125A',
+  colorPurple90: '#260937'
+}
+
+const pink = {
+  colorPink5: '#F9F1F7',
+  colorPink10: '#F2D8EC',
+  colorPink20: '#EFB9E3',
+  colorPink30: '#EE8DDB',
+  colorPink40: '#F14FD8',
+  colorPink50: '#D41DBC',
+  colorPink60: '#9F1C8D',
+  colorPink70: '#751868',
+  colorPink80: '#4C0F43',
+  colorPink90: '#2E0728'
+}
+
+const gray = {
+  colorGray0: '#FFFFFF',
+  colorGray5: '#F5F5F5',
+  colorGray10: '#EEEEEE',
+  colorGray20: '#BBBBBB',
+  colorGray30: '#939393',
+  colorGray40: '#818181',
+  colorGray50: '#676767',
+  colorGray60: '#4E4E4E',
+  colorGray70: '#393939',
+  colorGray80: '#272727',
+  colorGray90: '#191919',
+  colorGray100: '#000000'
+}
+
+const transparent = {
+  colorTransparent: 'transparent'
+}
+
+const board = {
+  red,
+  rose,
+  mint,
+  cyan,
+  blue,
+  pink,
+  gray,
+  green,
+  orange,
+  yellow,
+  indigo,
+  purple,
+  transparent
+}
+
+export default board
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/ict/dark.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/dark.ts
new file mode 100644
index 000000000..d56ecce7b
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/dark.ts
@@ -0,0 +1,41 @@
+import board from './board'
+import { getThemeColor, getColorGroup } from '../util'
+
+const gray = {
+  ...board.gray,
+  ...board.transparent
+}
+
+// 图表的状态颜色(规范不是从色板取的,来源未知)
+const colorState = {
+  // 紧急色
+  colorError: '#F43146',
+  // 重要告警色
+  colorAlert: '#EC6F1A',
+  // 次要告警色
+  colorWarning: '#EEBA18',
+  // 成功色
+  colorSuccess: '#0D9458',
+  // 提示色
+  colorInfo: '#5990FD',
+  // 失效
+  colorNone: '#818181'
+}
+
+// 图表的配色对象
+const colorChart = {
+  colorChart1: board.blue.colorBlue60,
+  colorChart2: board.mint.colorMint50,
+  colorChart3: board.purple.colorPurple60,
+  colorChart4: board.cyan.colorCyan60,
+  colorChart5: board.yellow.colorYellow40,
+  colorChart6: board.indigo.colorIndigo50,
+  colorChart7: board.cyan.colorCyan50
+}
+
+// 图表内置的颜色组
+const colorGroup = getColorGroup(colorChart)
+
+const dark = getThemeColor(gray, colorState, colorGroup)
+
+export default dark
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/ict/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/index.ts
new file mode 100644
index 000000000..f51553a35
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/index.ts
@@ -0,0 +1,9 @@
+import light from './light'
+import dark from './dark'
+
+const ict = {
+  light,
+  dark
+}
+
+export default ict
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/ict/light.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/light.ts
new file mode 100644
index 000000000..f9caf47e0
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/light.ts
@@ -0,0 +1,41 @@
+import board from './board'
+import { getThemeColor, getColorGroup } from '../util'
+
+const gray = {
+  ...board.gray,
+  ...board.transparent
+}
+
+// 图表的状态颜色
+const colorState = {
+  // 紧急色
+  colorError: '#F43146',
+  // 重要告警色
+  colorAlert: '#EC6F1A',
+  // 次要告警色
+  colorWarning: '#EEBA18',
+  // 成功色
+  colorSuccess: '#2DA769',
+  // 提示色
+  colorInfo: '#5990FD',
+  // 失效
+  colorNone: board.gray.colorGray30
+}
+
+// 图表的配色对象
+const colorChart = {
+  colorChart1: board.blue.colorBlue40,
+  colorChart2: board.mint.colorMint40,
+  colorChart3: board.purple.colorPurple40,
+  colorChart4: board.cyan.colorCyan30,
+  colorChart5: board.yellow.colorYellow20,
+  colorChart6: board.indigo.colorIndigo40,
+  colorChart7: board.cyan.colorCyan40
+}
+
+// 图表内置的颜色组
+const colorGroup = getColorGroup(colorChart)
+
+const light = getThemeColor(gray, colorState, colorGroup)
+
+export default light
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/index.ts
new file mode 100644
index 000000000..e35819657
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/index.ts
@@ -0,0 +1,18 @@
+import { THEMES } from '../constants'
+import ict from './ict'
+import bpit from './bpit'
+import cloud from './cloud'
+import hdesign from './hdesign'
+
+const color = {
+  [THEMES.LIGHT]: ict.light,
+  [THEMES.DARK]: ict.dark,
+  [THEMES.BPIT_LIGHT]: bpit.light,
+  [THEMES.BPIT_DARK]: bpit.dark,
+  [THEMES.CLOUD_LIGHT]: cloud.light,
+  [THEMES.CLOUD_DARK]: cloud.dark,
+  [THEMES.HDESIGN_LIGHT]: hdesign.light,
+  [THEMES.HDESIGN_DARK]: hdesign.dark
+}
+
+export default color
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/color/util.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/util.ts
new file mode 100644
index 000000000..b05bbf9cc
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/color/util.ts
@@ -0,0 +1,28 @@
+/**
+ * 获取用于token的颜色对象
+ * @param {object} gray 灰阶包含透明色
+ * @param {object} colorState 状态色
+ * @param {Array} colorGroup 颜色组
+ */
+function getThemeColor(gray, colorState, colorGroup) {
+  return {
+    grayScale: {
+      ...gray
+    },
+    colorSet: {
+      colorState,
+      colorGroup
+    }
+  }
+}
+
+/**
+ * 将图表的配色对象拉平为数组
+ * @param {object} colorChart 图表的配色对象
+ */
+
+function getColorGroup(colorChart) {
+  return Object.values(colorChart)
+}
+
+export { getThemeColor, getColorGroup }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/constants.ts b/packages/vue/src/chart/chart-core/base/feature/token/constants.ts
new file mode 100644
index 000000000..d90397863
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/constants.ts
@@ -0,0 +1,51 @@
+// 当前支持主题
+const THEMES = {
+  DARK: 'dark',
+  LIGHT: 'light',
+  BPIT_LIGHT: 'bpit-light',
+  BPIT_DARK: 'bpit-dark',
+  CLOUD_DARK: 'cloud-dark',
+  CLOUD_LIGHT: 'cloud-light',
+  HDESIGN_LIGHT: 'hdesign-light',
+  HDESIGN_DARK: 'hdesign-dark'
+}
+
+// 该值表示当前主题键名，内部使用，防止外部更改
+const CURRENT_THEME = Symbol('current_theme')
+
+// 使用token的图表名称,用于对token的merge
+const TOKENCHARTNAMES = [
+  'AssembleBubbleChart',
+  'BarChart',
+  'BoxplotChart',
+  'BubbleChart',
+  'CandlestickChart',
+  'CircleProcessChart',
+  'FunnelChart',
+  'GaugeChart',
+  'HeatMapChart',
+  'HillChart',
+  'JadeJueChart',
+  'LineChart',
+  'AreaChart',
+  'LiquidfillChart',
+  'PieChart',
+  'PolarBarChart',
+  'ProcessChart',
+  'RadarChart',
+  'RegionChart',
+  'SankeyChart',
+  'SunburstChart',
+  'TreeChart',
+  'WaveChart',
+  'WordCloudChart'
+]
+
+// 默认主题
+const DEFAULT_THEME_NAME = THEMES.CLOUD_LIGHT
+
+const THEME_ERROR_TIP_MESSAGE = `Theme must be one of ${Object.values(THEMES).join(
+  ','
+)} or the theme name registered for calling HuiCharts.registerTheme()`
+
+export { THEMES, CURRENT_THEME, DEFAULT_THEME_NAME, THEME_ERROR_TIP_MESSAGE, TOKENCHARTNAMES }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/AreaChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/AreaChart.ts
new file mode 100644
index 000000000..d9aa56092
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/AreaChart.ts
@@ -0,0 +1,10 @@
+const AreaChart = (aliasToken) => {
+  const { colorBgTransparent } = aliasToken
+  return {
+    areaStyle: {
+      color: colorBgTransparent
+    }
+  }
+}
+
+export default AreaChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/AssembleBubbleChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/AssembleBubbleChart.ts
new file mode 100644
index 000000000..02cb1e075
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/AssembleBubbleChart.ts
@@ -0,0 +1,16 @@
+const AssembleBubbleChart = (aliasToken) => {
+  const { colorLabel, colorLabelDisabled, colorBorderDisabled, colorInactive } = aliasToken
+  //    此图为自定义echarts不知道怎么排布数据结构，todo
+  return {
+    label: {
+      color: colorLabel,
+      disabledColor: colorLabelDisabled
+    },
+    disabledBorderColor: colorBorderDisabled,
+    itemStyle: {
+      disabledColor: colorInactive
+    }
+  }
+}
+
+export default AssembleBubbleChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BarChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BarChart.ts
new file mode 100644
index 000000000..91a18bd68
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BarChart.ts
@@ -0,0 +1,20 @@
+const BarChart = (aliasToken) => {
+  const { borderWidth, barWidth, colorLabel, labelFontSize, colorBorderTransparent, borderRadius, colorBgTransparent } =
+    aliasToken
+
+  return {
+    itemStyle: {
+      borderWidth,
+      borderColor: colorBorderTransparent,
+      borderRadius,
+      color: colorBgTransparent
+    },
+    label: {
+      color: colorLabel,
+      fontSize: labelFontSize
+    },
+    barWidth
+  }
+}
+
+export default BarChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BoxplotChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BoxplotChart.ts
new file mode 100644
index 000000000..47e289d69
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BoxplotChart.ts
@@ -0,0 +1,11 @@
+const BoxplotChart = (aliasToken) => {
+  const { colorBgPrimary } = aliasToken
+
+  return {
+    itemStyle: {
+      color: colorBgPrimary
+    }
+  }
+}
+
+export default BoxplotChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BubbleChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BubbleChart.ts
new file mode 100644
index 000000000..1fd0e6ba8
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BubbleChart.ts
@@ -0,0 +1,12 @@
+const BubbleChart = (aliasToken) => {
+  const { colorLabel } = aliasToken
+  return {
+    emphasis: {
+      label: {
+        color: colorLabel
+      }
+    }
+  }
+}
+
+export default BubbleChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/CandlestickChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/CandlestickChart.ts
new file mode 100644
index 000000000..c0fbfcca1
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/CandlestickChart.ts
@@ -0,0 +1,13 @@
+const CandlestickChart = (aliasToken) => {
+  const { colorTextSecondary } = aliasToken
+
+  return {
+    axisPointer: {
+      label: {
+        color: colorTextSecondary
+      }
+    }
+  }
+}
+
+export default CandlestickChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/CircleProcessChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/CircleProcessChart.ts
new file mode 100644
index 000000000..028d054c4
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/CircleProcessChart.ts
@@ -0,0 +1,11 @@
+const CircleProcessChart = (aliasToken) => {
+  const { colorBgEmpty } = aliasToken
+
+  return {
+    backgroundStyle: {
+      color: colorBgEmpty
+    }
+  }
+}
+
+export default CircleProcessChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/FunnelChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/FunnelChart.ts
new file mode 100644
index 000000000..5d92cdce8
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/FunnelChart.ts
@@ -0,0 +1,13 @@
+const FunnelChart = (aliasToken) => {
+  const { colorLabel, colorBorder } = aliasToken
+  return {
+    itemStyle: {
+      borderColor: colorBorder
+    },
+    label: {
+      color: colorLabel
+    }
+  }
+}
+
+export default FunnelChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/GaugeChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/GaugeChart.ts
new file mode 100644
index 000000000..3cf3db8a5
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/GaugeChart.ts
@@ -0,0 +1,26 @@
+const GaugeChart = (aliasToken) => {
+  const { colorAxisLine, colorBgEmpty, colorTextSecondary, colorTextPrimary } = aliasToken
+  return {
+    // 用于轨道，特殊使用空数据颜色
+    splitLine: {
+      lineStyle: {
+        color: colorBgEmpty
+      }
+    },
+    axisLine: {
+      lineStyle: {
+        color: colorAxisLine
+      }
+    },
+    axisLabel: {
+      color: colorTextSecondary
+    },
+    detail: {
+      rich: {
+        color: colorTextPrimary
+      }
+    }
+  }
+}
+
+export default GaugeChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/HeatMapChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/HeatMapChart.ts
new file mode 100644
index 000000000..e6d188c50
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/HeatMapChart.ts
@@ -0,0 +1,26 @@
+const HeatMapChart = (aliasToken) => {
+  const { colorAxisLine, colorTextPrimary, colorLabel, colorBorder } = aliasToken
+
+  return {
+    axisLine: {
+      lineStyle: {
+        color: colorAxisLine
+      }
+    },
+    visualMap: {
+      text: {
+        color: colorTextPrimary
+      }
+    },
+    label: {
+      color: colorLabel
+    },
+    custom: {
+      style: {
+        stroke: colorBorder
+      }
+    }
+  }
+}
+
+export default HeatMapChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/HillChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/HillChart.ts
new file mode 100644
index 000000000..b562e340f
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/HillChart.ts
@@ -0,0 +1,13 @@
+const HillChart = (aliasToken) => {
+  const { colorLabel, colorBorder } = aliasToken
+  return {
+    label: {
+      color: colorLabel
+    },
+    emphasis: {
+      itemStyle: { borderColor: colorBorder }
+    }
+  }
+}
+
+export default HillChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/JadeJueChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/JadeJueChart.ts
new file mode 100644
index 000000000..4c286c5d4
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/JadeJueChart.ts
@@ -0,0 +1,13 @@
+const JadeJueChart = (aliasToken) => {
+  const { barWidth, colorBorder, colorBgEmpty } = aliasToken
+
+  return {
+    barWidth,
+    itemStyle: {
+      borderColor: colorBorder,
+      // 做背景特殊
+      color: colorBgEmpty
+    }
+  }
+}
+export default JadeJueChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/LineChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/LineChart.ts
new file mode 100644
index 000000000..bd871fcf9
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/LineChart.ts
@@ -0,0 +1,26 @@
+const LineChart = (aliasToken) => {
+  const { colorBorder, borderWidthLG, borderWidthNone, symbolSizeLG, symbolSizeSM, lineWidth, colorLineTransparent } =
+    aliasToken
+
+  return {
+    symbolSize: {
+      symbolSizeSM,
+      symbolSizeLG
+    },
+    lineStyle: {
+      lineWidth
+    },
+    itemStyle: {
+      borderZero: borderWidthNone,
+      border: borderWidthLG,
+      borderColor: colorBorder
+    },
+    markLine: {
+      lineStyle: {
+        color: colorLineTransparent
+      }
+    }
+  }
+}
+
+export default LineChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/LiquidfillChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/LiquidfillChart.ts
new file mode 100644
index 000000000..f5d74e7d2
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/LiquidfillChart.ts
@@ -0,0 +1,14 @@
+const LiquidfillChart = (aliasToken) => {
+  const { colorLabel, colorBgPrimary } = aliasToken
+
+  return {
+    label: {
+      color: colorLabel
+    },
+    backgroundStyle: {
+      color: colorBgPrimary
+    }
+  }
+}
+
+export default LiquidfillChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/PieChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/PieChart.ts
new file mode 100644
index 000000000..1e6dbcbcd
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/PieChart.ts
@@ -0,0 +1,35 @@
+const PieChart = (aliasToken) => {
+  const {
+    colorBorder,
+    borderWidthLG,
+    borderWidthNone,
+    colorLabel,
+    labelFontSize,
+    labelLineLength,
+    colorLabelLine,
+    borderRadiusNone,
+    colorBgEmpty
+  } = aliasToken
+
+  return {
+    itemStyle: {
+      borderWidth: borderWidthLG,
+      borderColor: colorBorder,
+      borderWidthNone,
+      borderRadius: borderRadiusNone
+    },
+    label: {
+      distance: labelLineLength,
+      color: colorLabel,
+      fontSize: labelFontSize
+    },
+    lineStyle: {
+      color: colorLabelLine
+    },
+    emptyCircleStyle: {
+      color: colorBgEmpty
+    }
+  }
+}
+
+export default PieChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/PolarBarChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/PolarBarChart.ts
new file mode 100644
index 000000000..947cfa2b7
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/PolarBarChart.ts
@@ -0,0 +1,12 @@
+const PolarBarChart = (aliasToken) => {
+  const { colorTextSecondary } = aliasToken
+
+  return {
+    // 坐标轴label
+    label: {
+      color: colorTextSecondary
+    }
+  }
+}
+
+export default PolarBarChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/ProcessChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/ProcessChart.ts
new file mode 100644
index 000000000..5500cf9fc
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/ProcessChart.ts
@@ -0,0 +1,23 @@
+const ProcessChart = (aliasToken) => {
+  const { colorAxisLine, colorLabel, colorTextDisabled, colorBgEmpty, colorTextSecondary } = aliasToken
+
+  return {
+    axisLine: {
+      lineStyle: {
+        color: colorAxisLine
+      },
+      label: {
+        color: colorTextSecondary
+      }
+    },
+    label: {
+      color: colorLabel,
+      disabledColor: colorTextDisabled
+    },
+    itemStyle: {
+      color: colorBgEmpty
+    }
+  }
+}
+
+export default ProcessChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/RadarChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/RadarChart.ts
new file mode 100644
index 000000000..2fd60db10
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/RadarChart.ts
@@ -0,0 +1,25 @@
+export default function RadarChart(aliasToken) {
+  const {
+    colorBorder,
+    borderWidthLG,
+    symbolSizeLG,
+    symbolSize,
+    lineWidth,
+    lineWidthNone,
+    colorBgTransparent,
+    symbolBorderWidth,
+    symbolBorderWidthSM
+  } = aliasToken
+
+  return {
+    symbolBorderWidth,
+    symbolBorderWidthSM,
+    symbolSizeLG,
+    areaStyleColor: colorBgTransparent,
+    symbolSize,
+    border: borderWidthLG,
+    lineWidth,
+    lineWidthNone,
+    borderColor: colorBorder
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/RegionChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/RegionChart.ts
new file mode 100644
index 000000000..f43917bfe
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/RegionChart.ts
@@ -0,0 +1,13 @@
+const RegionChart = (aliasToken) => {
+  const { colorTextPrimary } = aliasToken
+
+  return {
+    visualMap: {
+      textStyle: {
+        color: colorTextPrimary
+      }
+    }
+  }
+}
+
+export default RegionChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/SankeyChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/SankeyChart.ts
new file mode 100644
index 000000000..612e2826d
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/SankeyChart.ts
@@ -0,0 +1,11 @@
+const SankeyChart = (aliasToken) => {
+  const { colorLabel } = aliasToken
+
+  return {
+    label: {
+      color: colorLabel
+    }
+  }
+}
+
+export default SankeyChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/ScatterChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/ScatterChart.ts
new file mode 100644
index 000000000..6ba5a7349
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/ScatterChart.ts
@@ -0,0 +1,11 @@
+const ScatterChart = (aliasToken) => {
+  const { colorBgPrimary } = aliasToken
+
+  return {
+    itemStyle: {
+      color: colorBgPrimary
+    }
+  }
+}
+
+export default ScatterChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/SunburstChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/SunburstChart.ts
new file mode 100644
index 000000000..46db31ae3
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/SunburstChart.ts
@@ -0,0 +1,14 @@
+const SunburstChart = (aliasToken) => {
+  const { colorBorder, colorLabel } = aliasToken
+
+  return {
+    itemStyle: {
+      borderColor: colorBorder
+    },
+    label: {
+      color: colorLabel
+    }
+  }
+}
+
+export default SunburstChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/TreeChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/TreeChart.ts
new file mode 100644
index 000000000..07775aeda
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/TreeChart.ts
@@ -0,0 +1,13 @@
+const TreeChart = (aliasToken) => {
+  const { colorLabel, colorAxisLine } = aliasToken
+
+  return {
+    label: {
+      color: colorLabel
+    },
+    lineStyle: {
+      color: colorAxisLine
+    }
+  }
+}
+export default TreeChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/WaveChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/WaveChart.ts
new file mode 100644
index 000000000..d118a64fe
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/WaveChart.ts
@@ -0,0 +1,11 @@
+const WaveChart = (aliasToken) => {
+  const { colorAxisLine, colorTextSecondary, colorAxisSplitLine } = aliasToken
+
+  return {
+    axisLineColor: colorAxisLine,
+    axisLabelColor: colorTextSecondary,
+    axisNameColor: colorTextSecondary,
+    splitLineColor: colorAxisSplitLine
+  }
+}
+export default WaveChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/WordCloudChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/WordCloudChart.ts
new file mode 100644
index 000000000..11036a131
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/WordCloudChart.ts
@@ -0,0 +1,13 @@
+const WordCloudChart = (aliasToken) => {
+  const { colorShadow } = aliasToken
+
+  return {
+    emphasis: {
+      textStyle: {
+        textShadowColor: colorShadow
+      }
+    }
+  }
+}
+
+export default WordCloudChart
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/index.ts
new file mode 100644
index 000000000..eb3f1d4e4
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/index.ts
@@ -0,0 +1,62 @@
+import BarChart from './BarChart'
+import BubbleChart from './BubbleChart'
+import FunnelChart from './FunnelChart'
+import HillChart from './HillChart'
+import JadeJueChart from './JadeJueChart'
+import TreeChart from './TreeChart'
+import SunburstChart from './SunburstChart'
+import SankeyChart from './SankeyChart'
+import RadarChart from './RadarChart'
+import ProcessChart from './ProcessChart'
+import PolarBarChart from './PolarBarChart'
+import PieChart from './PieChart'
+import AreaChart from './AreaChart'
+import LineChart from './LineChart'
+import AssembleBubbleChart from './AssembleBubbleChart'
+import BoxplotChart from './BoxplotChart'
+import CandlestickChart from './CandlestickChart'
+import CircleProcessChart from './CircleProcessChart'
+import GaugeChart from './GaugeChart'
+import HeatMapChart from './HeatMapChart'
+import ScatterChart from './ScatterChart'
+import LiquidfillChart from './LiquidfillChart'
+import RegionChart from './RegionChart'
+import WaveChart from './WaveChart'
+import WordCloudChart from './WordCloudChart'
+
+// 本文件getChartsToken的图表键名的增删请同步更改constants中的TOKENCHARTNAMES
+/**
+ * 根据aliasToken获取chartsToken
+ * @param {object} aliasToken
+ */
+function getChartsToken(aliasToken) {
+  return {
+    AssembleBubbleChart: AssembleBubbleChart(aliasToken),
+    BarChart: BarChart(aliasToken),
+    BoxplotChart: BoxplotChart(aliasToken),
+    BubbleChart: BubbleChart(aliasToken),
+    CandlestickChart: CandlestickChart(aliasToken),
+    CircleProcessChart: CircleProcessChart(aliasToken),
+    FunnelChart: FunnelChart(aliasToken),
+    GaugeChart: GaugeChart(aliasToken),
+    HeatMapChart: HeatMapChart(aliasToken),
+    ScatterChart: ScatterChart(aliasToken),
+    HillChart: HillChart(aliasToken),
+    JadeJueChart: JadeJueChart(aliasToken),
+    LineChart: LineChart(aliasToken),
+    AreaChart: AreaChart(aliasToken),
+    LiquidfillChart: LiquidfillChart(aliasToken),
+    PieChart: PieChart(aliasToken),
+    PolarBarChart: PolarBarChart(aliasToken),
+    ProcessChart: ProcessChart(aliasToken),
+    RadarChart: RadarChart(aliasToken),
+    RegionChart: RegionChart(aliasToken),
+    SankeyChart: SankeyChart(aliasToken),
+    SunburstChart: SunburstChart(aliasToken),
+    TreeChart: TreeChart(aliasToken),
+    WaveChart: WaveChart(aliasToken),
+    WordCloudChart: WordCloudChart(aliasToken)
+  }
+}
+
+export default getChartsToken
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/getAliasToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/getAliasToken.ts
new file mode 100644
index 000000000..d80f89d0d
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/getAliasToken.ts
@@ -0,0 +1,32 @@
+import { THEMES } from '../constants'
+import { getIctAliasToken } from '../theme/ict/getAliasToken'
+import { getCloudAliasToken } from '../theme/cloud/getAliasToken'
+
+// import { getBpitAliasToken } from '../theme/bpit/getAliasToken';
+import { getHdesignAliasToken } from '../theme/hdesign/getAliasToken'
+
+// aliasToken的回调映射,bit先和hdesign拉齐原先那套暂不删除
+const aliasTokenMap = {
+  [THEMES.LIGHT]: getIctAliasToken,
+  [THEMES.DARK]: (globalToken) => getIctAliasToken(globalToken, false),
+  [THEMES.BPIT_LIGHT]: getHdesignAliasToken,
+  [THEMES.BPIT_DARK]: (globalToken) => getHdesignAliasToken(globalToken, false),
+  [THEMES.CLOUD_LIGHT]: getCloudAliasToken,
+  [THEMES.CLOUD_DARK]: (globalToken) => getCloudAliasToken(globalToken, false),
+  [THEMES.HDESIGN_LIGHT]: getHdesignAliasToken,
+  [THEMES.HDESIGN_DARK]: (globalToken) => getHdesignAliasToken(globalToken, false)
+}
+
+/**
+ *  根据globalToken获取aliasToken
+ * @param {string} themeName  主题名称
+ * @param {object} globalToken  globalToken
+ */
+function getAliasToken(themeName, globalToken) {
+  return {
+    ...aliasTokenMap[themeName](globalToken)
+  }
+}
+
+export default getAliasToken
+export { aliasTokenMap }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/getGlobalToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/getGlobalToken.ts
new file mode 100644
index 000000000..0b5362a4f
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/getGlobalToken.ts
@@ -0,0 +1,13 @@
+import color from '../color'
+import globalToken from './globalToken'
+
+/**
+ * 获取相应的主题的globalToken
+ * @param {string} themeName  主题名称
+ */
+export default function getGlobalToken(themeName) {
+  return {
+    ...globalToken,
+    ...color[themeName].grayScale
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/getModelToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/getModelToken.ts
new file mode 100644
index 000000000..e85d319c6
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/getModelToken.ts
@@ -0,0 +1,303 @@
+/** 以下token的命名参考echarts文档的名称 */
+/**
+ *  根据mapToken获取modelToken
+ * @param {object} aliasToken
+ */
+function getModelToken(aliasToken) {
+  const {
+    colorBgPrimary,
+    colorTextPrimary,
+    colorDash,
+    colorBgSecondary,
+    colorTextTransparent,
+    colorIconPrimary,
+    colorTextSecondary,
+    colorAxisLine,
+    colorInactive,
+    colorIconDisabled,
+    colorAxisTickLine,
+    colorAxisSplitLine,
+    colorAxisPointerLine,
+    colorAxisPointerShadow,
+    colorShadow,
+    shadowOffsetY,
+    shadowBlur,
+    titleSpace,
+    titleFontSize,
+    subtitleFontSize,
+    subtextFontSize,
+    axisLabelSpace,
+    axisLineType,
+    axisLineWidth,
+    axisTickLineType,
+    axisSplitLineType,
+    axisTickLineWidth,
+    axisSplitLineWidth,
+    axisPointerLineType,
+    axisPointerLineWidth,
+    polarAxisSplitLineType,
+    textFontSize,
+    axisNameSpace,
+    legendSpace,
+    legendItemSize,
+    legendCircleItemSize,
+    containerGap,
+    markLineWidth,
+    markLineEmphasisWidth,
+    colorBorder,
+    borderWidthNone,
+    containerBoderRadius,
+    paddingNone,
+    paddingLG
+  } = aliasToken
+
+  return {
+    /** -----标题------ */
+    // 主副标题之前的间距
+    titleItemGap: titleSpace,
+    // 标题文本颜色
+    titleTextColor: colorTextPrimary,
+    // 标题副文本颜色
+    titleSubTextColor: colorTextSecondary,
+    // 标题文本字号
+    titleTextFontSize: titleFontSize,
+    // 标题副文本字号
+    titleSubtextFontSize: subtitleFontSize,
+
+    /** -----图例------ */
+    // 图例文本颜色
+    legendTextColor: colorTextSecondary,
+    // 图例富文本颜色
+    legendTextRichColor: colorTextSecondary,
+    // 图例文本字号
+    legendTextFontSize: subtextFontSize,
+    // 图例富文本颜色
+    legendTextRichFontSize: subtextFontSize,
+    // 图例文本的padding
+    legendTextPadding: [containerGap / 2, 0, 0, 0],
+    // 图例富文本的padding
+    legendTextRichPadding: [containerGap / 2, 0, 0, 0],
+    // 图例每项之间的间隔
+    legendItemGap: legendSpace,
+    // 圆形图例时每项的宽度
+    legendCircleItemWidth: legendItemSize * 12,
+    // 圆形图例时每项的高度
+    legendCircleItemHeight: legendCircleItemSize,
+    // 方形图例时每项的宽度
+    legendReactItemWidth: legendItemSize * 6,
+    // 方形图例时每项的高度
+    legendReactItemHeight: legendItemSize,
+    // 图例翻页文本颜色
+    legendPageTextColor: colorTextPrimary,
+    // 图例翻页图标激活颜色
+    legendPageIconColor: colorIconPrimary,
+    // 图例翻页图标失效颜色
+    legendPageIconInactiveColor: colorIconDisabled,
+    // 图例失效颜色
+    legendInactiveColor: colorInactive,
+    // 图例失效边框颜色
+    legendInactiveBorderColor: colorBorder,
+    // 图例边框宽度
+    legendBorderWidth: borderWidthNone,
+    // 图例失效边框宽度
+    legendInactiveBorderWidth: borderWidthNone,
+    // 图例图形边框宽度
+    legendItemBorderWidth: borderWidthNone,
+    // 图例的padding
+    legendPadding: paddingNone,
+
+    /** -----x轴------ */
+    // x轴名称间距
+    xAxisNameGap: axisNameSpace,
+    // x轴名称颜色
+    xAxisNameColor: colorTextSecondary,
+    // x轴名称字号
+    xAxisNameFontSize: textFontSize,
+    // x轴标签文本颜色
+    xAxisLabelColor: colorTextSecondary,
+    // x轴标签文本字号
+    xAxisLabelFontSize: subtextFontSize,
+    // x轴轴线颜色
+    xAxisLineColor: colorAxisLine,
+    // x轴轴线粗细
+    xAxisLineWidth: axisLineWidth,
+    // x轴轴线类别
+    xAxisLineType: axisLineType,
+    // x轴刻度线颜色
+    xAxisTickLineColor: colorAxisTickLine,
+    // x轴刻度线粗细
+    xAxisTickLineWidth: axisTickLineWidth,
+    // x轴刻度线类别
+    xAxisTickLineType: axisTickLineType,
+    // x轴分隔线颜色
+    xAxisSplitLineColor: colorAxisSplitLine,
+    // x轴分隔线粗细
+    xAxisSplitLineWidth: axisSplitLineWidth,
+    // x轴分隔线类别
+    xAxisSplitLineType: axisSplitLineType,
+
+    /** -----y轴------ */
+    // y轴名称间距
+    yAxisNameGap: axisNameSpace,
+    // y轴名称颜色
+    yAxisNameColor: colorTextSecondary,
+    // y轴名称字号
+    yAxisNameFontSize: textFontSize,
+    // y轴标签文本颜色
+    yAxisLabelColor: colorTextSecondary,
+    // y轴标签文本字号
+    yAxisLabelFontSize: subtextFontSize,
+    // y轴轴线颜色
+    yAxisLineColor: colorAxisLine,
+    // y轴轴线粗细
+    yAxisLineWidth: axisLineWidth,
+    // y轴轴线类别
+    yAxisLineType: axisLineType,
+    // y轴刻度线颜色
+    yAxisTickLineColor: colorAxisTickLine,
+    // y轴刻度线粗细
+    yAxisTickLineWidth: axisTickLineWidth,
+    // y轴刻度线类别
+    yAxisTickLineType: axisTickLineType,
+    // y轴分隔线颜色
+    yAxisSplitLineColor: colorAxisSplitLine,
+    // y轴分隔线粗细
+    yAxisSplitLineWidth: axisSplitLineWidth,
+    // y轴分隔线类别
+    yAxisSplitLineType: axisSplitLineType,
+
+    /** -----radar轴------ */
+    // radar轴名称颜色
+    radarAxisNameColor: colorTextSecondary,
+    // radar轴名字号
+    radarAxisNameFontSize: subtextFontSize,
+    // radar轴标签文本颜色
+    radarAxisLabelColor: colorTextSecondary,
+    // radar轴线颜色
+    radarAxisLineColor: colorAxisLine,
+    // radar轴线粗细
+    radarAxisLineWidth: axisLineWidth,
+    // radar轴线类别
+    radarAxisLineType: axisLineType,
+    // radar轴刻度线颜色
+    radarAxisTickLineColor: colorAxisTickLine,
+    // radar轴刻度线粗细
+    radarAxisTickLineWidth: axisTickLineWidth,
+    // radar轴刻度线类别
+    radarAxisTickLineType: axisTickLineType,
+    // radar轴分隔线颜色
+    radarSplitLineColor: colorAxisSplitLine,
+    // radar轴分隔线粗细
+    radarSplitLineWidth: axisSplitLineWidth,
+    // radar轴分隔线类别
+    radarSplitLineType: polarAxisSplitLineType,
+
+    /** -----极坐标系角度轴------ */
+    // 角度轴标签文本颜色
+    angleAxisLabelColor: colorTextSecondary,
+    // 角度轴标签文本字号
+    angleAxisLabelFontSize: subtextFontSize,
+    // 角度轴轴线颜色
+    angleAxisLineColor: colorAxisLine,
+    // 角度轴轴线粗细
+    angleAxisLineWidth: axisLineWidth,
+    // 角度轴轴线类别
+    angleAxisLineType: axisLineType,
+    // 角度轴刻度线颜色
+    angleAxisTickLineColor: colorAxisTickLine,
+    // 角度轴刻度线粗细
+    angleAxisTickLineWidth: axisTickLineWidth,
+    // 角度轴刻度线类别
+    angleAxisTickLineType: axisTickLineType,
+    // 角度轴分隔线颜色
+    angleAxisSplitLineColor: colorAxisSplitLine,
+    // 角度轴分隔线粗细
+    angleAxisSplitLineWidth: axisSplitLineWidth,
+    // 角度轴分隔线类别
+    angleAxisSplitLineType: polarAxisSplitLineType,
+
+    /** -----极坐标系径向轴------ */
+    // 径向轴标签间距
+    radiusAxisLabelGap: axisLabelSpace,
+    // 径向轴标签颜色
+    radiusAxisLabelColor: colorTextSecondary,
+    // 径向轴标签字号
+    radiusAxisLabelFontSize: subtextFontSize,
+    // 径向轴轴线颜色
+    radiusAxisLineColor: colorAxisLine,
+    // 径向轴轴线粗细
+    radiusAxisLineWidth: axisLineWidth,
+    // 径向轴轴线类别
+    radiusAxisLineType: axisLineType,
+    // 径向轴刻度线颜色
+    radiusAxisTickLineColor: colorAxisTickLine,
+    // 径向轴刻度线粗细
+    radiusAxisTickLineWidth: axisTickLineWidth,
+    // 径向轴刻度线类别
+    radiusAxisTickLineType: axisTickLineType,
+    // 径向轴分隔线颜色
+    radiusAxisSplitLineColor: colorAxisSplitLine,
+    // 径向轴分隔线粗细
+    radiusAxisSplitLineWidth: axisSplitLineWidth,
+    // 径向轴分隔线类别
+    radiusAxisSplitLineType: axisSplitLineType,
+
+    /** -----tooltip------ */
+    // tip背景
+    tooltipBg: colorBgSecondary,
+    // tip文本颜色
+    tooltipTextColor: colorTextPrimary,
+    // tip文本字号
+    tooltipTextFontSize: textFontSize,
+    // tip圆角
+    tooltipBorderRaduis: containerBoderRadius,
+    // tip坐标轴指示器线颜色
+    tooltipAxisPointerLineColor: colorAxisPointerLine,
+    // tip坐标轴指示器线粗细
+    tooltipAxisPointerLineWidth: axisPointerLineWidth,
+    // tip坐标轴指示器线类别
+    tooltipAxisPointerLineType: axisPointerLineType,
+    // tip坐标轴指示器阴影
+    tooltipAxisPointerShadowColor: colorAxisPointerShadow,
+    // tip阴影
+    tooltipShadowColor: colorShadow,
+    // tip阴影垂直方向偏移
+    tooltipShadowOffsetY: shadowOffsetY,
+    // tip阴影模糊
+    tooltipShadowBlur: shadowBlur,
+    // tip边框
+    tooltipBorderWidth: borderWidthNone,
+    // tip的padding
+    tooltipPadding: paddingLG,
+
+    /** -----visualMap------ */
+    // PiecesColor
+    visualMapPiecesColor: colorTextTransparent,
+    // dashColor
+    visualMapDashColor: colorDash,
+
+    /** -----markPoint------ */
+    // markPoint标签文本
+    markPointLabelColor: colorTextTransparent,
+
+    /** ----- markLine------ */
+    // 标记线粗细
+    markLineWidth,
+    // 标记线高亮粗细
+    markLineEmphasisWidth,
+
+    /** ----- markLine------ */
+    // 手柄中心填充色
+    dataZoomHandleColor: colorBgSecondary,
+    // 手柄外框色
+    dataZoomHandleBorderColor: colorBgPrimary,
+    // 手柄阴影色
+    dataZoomHandleShadowColor: colorAxisPointerShadow,
+    // 手柄hover时中心填充色(todo待处理)
+    dataZoomEmphasisHandleColor: colorTextPrimary,
+    // 手柄hover时外框色
+    dataZoomEmphasisHandleBorderColor: colorBgPrimary
+  }
+}
+
+export default getModelToken
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/border.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/border.ts
new file mode 100644
index 000000000..492887732
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/border.ts
@@ -0,0 +1,11 @@
+const border = {
+  // 针对图表特别设立出来的token
+  borderNone: 0,
+  border05x: 0.5,
+  borderBase: 1,
+  border2x: 2,
+  border4x: 4,
+  border8x: 8
+}
+
+export default border
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/borderRadius.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/borderRadius.ts
new file mode 100644
index 000000000..7f8654d2e
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/borderRadius.ts
@@ -0,0 +1,59 @@
+// //  基础圆角数值
+// const basicBorderRadius = 6;
+
+// //  圆角梯度处理函数
+// function getRadius(radiusBase) {
+//   let radiusLG = radiusBase;
+//   let radiusSM = radiusBase;
+//   let radiusXS = radiusBase;
+
+//   // radiusLG
+//   if (radiusBase < 6 && radiusBase >= 5) {
+//     radiusLG = radiusBase + 1;
+//   } else if (radiusBase < 16 && radiusBase >= 6) {
+//     radiusLG = radiusBase + 2;
+//   } else if (radiusBase >= 16) {
+//     radiusLG = 16;
+//   }
+
+//   // radiusSM
+//   if (radiusBase < 7 && radiusBase >= 5) {
+//     radiusSM = 4;
+//   } else if (radiusBase < 8 && radiusBase >= 7) {
+//     radiusSM = 5;
+//   } else if (radiusBase < 14 && radiusBase >= 8) {
+//     radiusSM = 6;
+//   } else if (radiusBase < 16 && radiusBase >= 14) {
+//     radiusSM = 7;
+//   } else if (radiusBase >= 16) {
+//     radiusSM = 8;
+//   }
+
+//   // radiusXS
+//   if (radiusBase < 6 && radiusBase >= 2) {
+//     radiusXS = 1;
+//   } else if (radiusBase >= 6) {
+//     radiusXS = 2;
+//   }
+
+//   return {
+//     borderRadiusZero: 0,
+//     borderRadius: radiusBase, // 6
+//     borderRadiusXS: radiusXS, // 2
+//     borderRadiusSM: radiusSM, // 4
+//     borderRadiusLG: radiusLG, // 8
+//   };
+// }
+
+const borderRadius = {
+  borderRadiusNone: 0,
+  borderRadiusXs: 2,
+  borderRadiusBase: 4,
+  borderRadiusMd: 6,
+  borderRadiusLg: 8,
+  borderRadiusXl: 12,
+  borderRadiusFull: 9999
+}
+
+export default borderRadius
+// export { getRadius };
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/font.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/font.ts
new file mode 100644
index 000000000..0e4664235
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/font.ts
@@ -0,0 +1,53 @@
+// const basicFont = 14;
+
+// // 字体大小的具体梯度处理
+// function getFontSizes(base) {
+//   const fontSizes = new Array(10).fill(null).map((_, index) => {
+//     const i = index - 1;
+//     const baseSize = base * 2.71828 ** (i / 5);
+//     const intSize = index > 1 ? Math.floor(baseSize) : Math.ceil(baseSize);
+//     // Convert to even
+//     return Math.floor(intSize / 2) * 2;
+//   });
+//   fontSizes[1] = base;
+//   return fontSizes.map(size => {
+//     const height = size + 8;
+//     return {
+//       size,
+//       lineHeight: height / size,
+//     };
+//   });
+// }
+
+// // 字体的梯度函数
+// function getFont(fontSize) {
+//   const fontSizePairs = getFontSizes(fontSize);
+//   const fontSizes = fontSizePairs.map(pair => pair.size);
+//   const lineHeights = fontSizePairs.map(pair => pair.lineHeight);
+//   return {
+//     fontSizeSM: fontSizes[0], // 12
+//     fontSize: fontSizes[1], // 14
+//     fontSizeLG: fontSizes[2], // 16
+//     fontSizeXL: fontSizes[3], // 20
+//     lineHeight: lineHeights[1], // 1.57
+//     lineHeightLG: lineHeights[2], // 1.5
+//     lineHeightSM: lineHeights[0], // 1.67
+//   };
+// }
+
+const font = {
+  fontSizeBase: 12,
+  fontSizeMd: 14,
+  fontSizeLg: 16,
+  fontSizeXl: 18,
+  fontSize2xl: 20,
+  fontSize3xl: 24,
+  fontSize4xl: 28,
+  fontSize5xl: 30,
+  fontSize6xl: 32,
+  fontSize7xl: 36,
+  fontSize8xl: 40
+}
+
+export default font
+// export { getFont };
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/index.ts
new file mode 100644
index 000000000..1d7de8453
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/index.ts
@@ -0,0 +1,17 @@
+import font from './font'
+import lineType from './lineType'
+import space from './space'
+import border from './border'
+import size from './size'
+import borderRadius from './borderRadius'
+
+const globalToken = {
+  ...font,
+  ...lineType,
+  ...space,
+  ...border,
+  ...size,
+  ...borderRadius
+}
+
+export default globalToken
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/lineType.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/lineType.ts
new file mode 100644
index 000000000..5a66c93d5
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/lineType.ts
@@ -0,0 +1,8 @@
+// 线条基础数值
+const lineType = {
+  lineTypeSolid: 'solid',
+  lineTypeDashed: 'dashed',
+  lineTypeDashedLG: [4, 4]
+}
+
+export default lineType
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/size.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/size.ts
new file mode 100644
index 000000000..acbea11f8
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/size.ts
@@ -0,0 +1,11 @@
+const size = {
+  size05x: 2,
+  sizeBase: 4,
+  size2x: 8,
+  size3x: 12,
+  size4x: 16,
+  size5x: 20,
+  size6x: 24
+}
+
+export default size
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/space.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/space.ts
new file mode 100644
index 000000000..482649534
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/space.ts
@@ -0,0 +1,15 @@
+const space = {
+  // 图表特别配置
+  spaceNone: 0,
+  space05x: 2,
+  spaceBase: 4,
+  space2x: 8,
+  space3x: 12,
+  space4x: 16,
+  space5x: 20,
+  space6x: 24,
+  space7x: 28,
+  space8x: 32
+}
+
+export default space
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/index.ts
new file mode 100644
index 000000000..be8d1c7a7
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/index.ts
@@ -0,0 +1,23 @@
+import color from '../color'
+import getGlobalToken from './getGlobalToken'
+import getAliasToken from './getAliasToken'
+import getModelToken from './getModelToken'
+import getChartsToken from './chartsToken'
+
+/**
+ * 获取相应的主题的token
+ * @param {string} themeName  主题名称
+ */
+function getToken(themeName) {
+  const globalToken = getGlobalToken(themeName)
+  const aliasToken = getAliasToken(themeName, globalToken)
+  const modelToken = getModelToken(aliasToken)
+  const chartsToken = getChartsToken(aliasToken)
+  return {
+    ...color[themeName].colorSet,
+    ...modelToken,
+    ...chartsToken
+  }
+}
+
+export default getToken
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/mergeToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/mergeToken.ts
new file mode 100644
index 000000000..7e40a70a2
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/mergeToken.ts
@@ -0,0 +1,61 @@
+import { aliasTokenMap } from './getAliasToken'
+import getGlobalToken from './getGlobalToken'
+import getModelToken from './getModelToken'
+import getChartsToken from './chartsToken'
+import { TOKENCHARTNAMES } from '../constants'
+import color from '../color'
+import merge from '../../../util/merge'
+import cloneDeep from '../../../util/cloneDeep'
+
+function getBasicToken(name, config) {
+  return {
+    ...getGlobalToken(name),
+    ...config
+  }
+}
+
+function getMapToken(name, config) {
+  return {
+    ...aliasTokenMap[name](config),
+    ...config
+  }
+}
+
+function getConfigModelToken(config) {
+  return {
+    ...getModelToken(config),
+    ...config
+  }
+}
+
+function mergeSpecialToken(name, chartsConfig, config) {
+  TOKENCHARTNAMES.forEach((item) => {
+    if (config[item]) merge(chartsConfig, config[item])
+  })
+  // 针对colorState特殊处理
+  const { colorState } = config
+  if (colorState) {
+    const newColorState = merge(cloneDeep(color[name].colorSet.colorState), colorState)
+    return { ...chartsConfig, colorState: newColorState }
+  }
+  return { ...chartsConfig }
+}
+
+/**
+ *
+ * @param {string} name  传入的主题名称
+ * @param {object} config   传入的主题配置
+ */
+
+export default function mergeToken(name, config) {
+  const basicConfig = getBasicToken(name, config)
+  const mapConfig = getMapToken(name, basicConfig)
+  const modelConfig = getConfigModelToken(mapConfig)
+  const chartsConfig = getChartsToken(mapConfig)
+  const specialConfig = mergeSpecialToken(name, chartsConfig, config)
+  return {
+    colorGroup: basicConfig.colorGroup,
+    ...modelConfig,
+    ...specialConfig
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/index.ts
new file mode 100644
index 000000000..81f7490bf
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/index.ts
@@ -0,0 +1,133 @@
+import { ictLight, ictDark } from './theme/ict'
+import { bpitLight, bpitDark } from './theme/bpit'
+import { cloudLight, cloudDark } from './theme/cloud'
+import { hdesignLight, hdesignDark } from './theme/hdesign'
+import merge from '../../util/merge'
+import HashMap from '../../util/hashMap'
+import cloneDeep from '../../util/cloneDeep'
+import tips from '../../util/tips'
+import { THEMES, CURRENT_THEME, DEFAULT_THEME_NAME, THEME_ERROR_TIP_MESSAGE } from './constants'
+import mergeToken from './factory/mergeToken'
+
+const themeToken = new HashMap({
+  [THEMES.LIGHT]: cloneDeep(ictLight),
+  [THEMES.DARK]: cloneDeep(ictDark),
+  [THEMES.BPIT_LIGHT]: cloneDeep(bpitLight),
+  [THEMES.BPIT_DARK]: cloneDeep(bpitDark),
+  [THEMES.CLOUD_LIGHT]: cloneDeep(cloudLight),
+  [THEMES.CLOUD_DARK]: cloneDeep(cloudDark),
+  [THEMES.HDESIGN_LIGHT]: cloneDeep(hdesignLight),
+  [THEMES.HDESIGN_DARK]: cloneDeep(hdesignDark),
+  [CURRENT_THEME]: cloneDeep(ictLight)
+})
+
+class Theme {
+  // 当前主题名称
+  static themeName = undefined
+
+  static config = cloneDeep(bpitLight)
+
+  // todo待修改
+  static set(name, config) {
+    const defaultConfig = cloneDeep(this.getConfig(DEFAULT_THEME_NAME))
+    merge(defaultConfig, config)
+    themeToken.set(name, defaultConfig)
+  }
+
+  //  以下待确认
+  static setConfig(name, config) {
+    // 以下为新的逻辑
+    const themeKeys = this.getThemeKeys()
+    const validate = themeKeys.includes(name)
+    // 修改已有主题的配置
+    if (validate) {
+      const newConfig = mergeToken(name, config)
+      const oldConfig = this.getConfig(name)
+      merge(oldConfig, newConfig)
+    } else {
+      const newConfig = mergeToken(DEFAULT_THEME_NAME, config)
+      themeToken.set(name, newConfig)
+    }
+  }
+
+  //  以下待确认
+  static getThemeKeys() {
+    return themeToken.keys()
+  }
+
+  //  以下待确认
+  static resetThemeCongfig() {
+    themeToken.set(THEMES.LIGHT, cloneDeep(ictLight))
+    themeToken.set(THEMES.DARK, cloneDeep(ictDark))
+    themeToken.set(THEMES.BPIT_LIGHT, cloneDeep(bpitLight))
+    themeToken.set(THEMES.BPIT_DARK, cloneDeep(bpitDark))
+    themeToken.set(THEMES.CLOUD_LIGHT, cloneDeep(cloudLight))
+    themeToken.set(THEMES.CLOUD_DARK, cloneDeep(cloudDark))
+    themeToken.set(THEMES.HDESIGN_LIGHT, cloneDeep(hdesignLight))
+    themeToken.set(THEMES.HDESIGN_DARK, cloneDeep(hdesignDark))
+    themeToken.set(CURRENT_THEME, cloneDeep(ictLight))
+  }
+
+  static getConfig(name) {
+    return themeToken.get(name)
+  }
+
+  static setDefaultTheme(name) {
+    const tempTheme = this.validate(name)
+    if (this.themeName !== tempTheme) {
+      this.themeName = tempTheme
+      // 以下config功能待完善
+      themeToken.set(CURRENT_THEME, themeToken.get(tempTheme))
+      this.config = this.getConfig(CURRENT_THEME)
+    }
+  }
+
+  // 校验主题的合法性,将不合法的主题值重置为默认的light主题,并给与告警
+  static validate(name) {
+    // 如果没传并且没有全局注册过直接就是light主题
+    let tempTheme = name || this.themeName || DEFAULT_THEME_NAME
+
+    if (tempTheme.toLowerCase().includes('cloud-light')) {
+      tempTheme = THEMES.CLOUD_LIGHT
+    }
+
+    if (tempTheme.toLowerCase().includes('cloud-dark')) {
+      tempTheme = THEMES.CLOUD_DARK
+    }
+
+    const themeKeys = themeToken.keys()
+
+    const validate = themeKeys.includes(tempTheme)
+
+    if (!validate) {
+      tips.error(THEME_ERROR_TIP_MESSAGE)
+      tempTheme = THEMES.LIGHT
+    }
+
+    return tempTheme
+  }
+
+  /**
+   *
+   * @param {string} chartName  图表名称，根据名称从config中获取对应图表的chartToken
+   * @returns Object 用于series或者其他模块的Proxy代理token对象
+   */
+
+  static getTokenByName(chartName) {
+    const token = {
+      ...this.config[chartName]
+    }
+
+    return new Proxy(
+      {},
+      {
+        get(_, prop) {
+          return token[prop]
+        }
+      }
+    )
+  }
+}
+
+export { THEMES }
+export default Theme
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/readme.md b/packages/vue/src/chart/chart-core/base/feature/token/readme.md
new file mode 100644
index 000000000..df03f5042
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/readme.md
@@ -0,0 +1,15 @@
+### globalToken
+
+图表使用的全局变量，包含 font，border，color，space 等
+
+### aliasToken
+
+基于 globalToken 衍生的别名变量，取值从 globalToken 中取，实现黑白主题的色值切换和不同主题之间的差异
+
+### modelToken
+
+基于 aliasToken 衍生的三级变量，取值从 aliasToken 中取，实现不同主题之间的差异覆盖
+
+### chartsToken
+
+目前是基于 globalToken，aliasToken，modelToken 衍生的变量，用于按照图表名称的具体 option 配置
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/bpit/getAliasToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/bpit/getAliasToken.ts
new file mode 100644
index 000000000..7ce27cd35
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/bpit/getAliasToken.ts
@@ -0,0 +1,179 @@
+import { codeToRGB } from '../../../../util/color'
+
+function getAliasToken(globalToken, light = true) {
+  const {
+    colorGray0,
+    colorGray10,
+    colorGray30,
+    colorGray40,
+    colorGray50,
+    colorGray60,
+    colorGray70,
+    colorGray80,
+    colorGray90,
+    colorTransparent,
+    fontSizeBase,
+    fontSizeMd,
+    space2x,
+    spaceBase,
+    lineTypeSolid,
+    borderNone,
+    borderBase,
+    borderRadiusBase,
+    border2x,
+    borderRadiusNone,
+    fontSizeLg,
+    fontSize4xl,
+    space6x,
+    size3x,
+    size2x,
+    spaceNone,
+    space8x,
+    space4x,
+    size6x,
+    size5x
+  } = globalToken
+
+  return {
+    //  初级底色 图表背景
+    colorBgPrimary: light ? colorGray0 : colorGray90, // 确定
+    // 次级背景色 tip背景
+    colorBgSecondary: light ? colorGray0 : colorGray80, // 确定
+    // 主要文本色
+    colorTextPrimary: light ? colorGray90 : colorGray10, // 确定
+    // 次级文本色
+    colorTextSecondary: light ? colorGray30 : colorGray30, // 确定
+    // 禁用文本色
+    colorTextDisabled: light ? colorGray50 : colorGray50, //
+    // 图标激活色（legend翻页的颜色）
+    colorIconPrimary: light ? colorGray70 : colorGray50, //
+    // 控件失效色（legend失效的颜色）
+    colorInactive: light ? colorGray50 : colorGray70, // 确定
+    // 图标禁用色（legend翻页图标禁用的颜色）
+    colorIconDisabled: light ? colorGray30 : colorGray70, // 确定
+    // 坐标轴线颜色
+    colorAxisLine: light ? codeToRGB(colorGray90, 0.1) : colorGray80, // 确定
+    // 刻度线颜色
+    colorAxisTickLine: light ? codeToRGB(colorGray90, 0.1) : colorGray80, // 确定
+    // 分隔线颜色
+    colorAxisSplitLine: light ? codeToRGB(colorGray90, 0.1) : colorGray80, // 确定
+    // 坐标轴指示器悬浮线
+    colorAxisPointerLine: light ? colorGray60 : colorGray60, // 确定
+    // 透明边框色
+    colorBorderTransparent: colorTransparent,
+    // 文本透明
+    colorTextTransparent: colorTransparent,
+    // 指示器阴影
+    colorAxisPointerShadow: light ? codeToRGB(colorGray90, 0.08) : codeToRGB(colorGray40, 0.1),
+    // tip阴影
+    colorShadow: light ? codeToRGB(colorGray90, 0.08) : codeToRGB(colorGray40, 0.1),
+    // 边框颜色
+    colorBorder: light ? colorGray0 : colorGray90, // 确定
+    // 禁用边框颜色和图表colorBgPrimary保持一致（聚合气泡图用todo）
+    colorBorderDisabled: light ? colorGray0 : colorGray90, // 确定
+    // label颜色
+    colorLabel: light ? colorGray90 : colorGray0, // 确定
+    // label禁用颜色（和文本禁用色保持一致）
+    colorLabelDisabled: light ? colorGray50 : colorGray50, //
+    // 虚线的颜色
+    colorDash: light ? colorGray0 : colorGray90,
+    // 背景透明
+    colorBgTransparent: colorTransparent,
+    // 无数据占位背景
+    colorBgEmpty: light ? codeToRGB(colorGray90, 0.1) : colorGray80, // 确定
+    // labelLine颜色
+    colorLabelLine: light ? colorGray90 : colorGray10, // 确定
+    // 线透明
+    colorLineTransparent: colorTransparent,
+    // tip阴影垂直偏移
+    shadowOffsetY: space2x,
+    // tip阴影模糊
+    shadowBlur: space6x,
+    // 主文本字号
+    textFontSize: fontSizeMd, // 确定
+    // 次级文本字号
+    subtextFontSize: fontSizeBase, // 确定
+    // 标题文本字号
+    titleFontSize: fontSize4xl,
+    // 副标题文本字号
+    subtitleFontSize: fontSizeLg,
+    // 坐标轴线宽 2
+    axisLineWidth: border2x, // 确定
+    // 刻度线线宽 2
+    axisTickLineWidth: border2x, // 确定
+    // 分隔线线宽 1
+    axisSplitLineWidth: border2x, // 确定
+    // 坐标轴指示器的标线线宽 1
+    axisPointerLineWidth: borderBase, // 确定
+    // 坐标轴类型
+    axisLineType: lineTypeSolid,
+    // 刻度线类型
+    axisTickLineType: lineTypeSolid,
+    // 直角坐标系分隔线类型
+    axisSplitLineType: lineTypeSolid,
+    // 极坐标系分隔线类型
+    polarAxisSplitLineType: lineTypeSolid,
+    // 坐标轴指示器标线类型
+    axisPointerLineType: lineTypeSolid,
+    // 坐标轴名称间距
+    axisNameSpace: space2x,
+    // 坐标轴文本间距
+    axisLabelSpace: spaceBase,
+    // 标识线宽度
+    markLineWidth: borderBase,
+    // 标识线高亮宽度
+    markLineEmphasisWidth: borderBase,
+    //  border 0
+    borderWidthNone: borderNone,
+    // 标题文本间距
+    titleSpace: space2x,
+    // 容器的间距
+    containerGap: space2x,
+    // 容器的圆角
+    containerBoderRadius: borderRadiusBase,
+    // 图元
+    symbolSizeLG: size3x,
+    // 图元 雷达图用
+    symbolSize: size3x,
+    // 图元 超大
+    symbolSizeSM: size2x,
+    // 图元的边框
+    symbolBorderWidth: border2x,
+    // 图元的边框 雷达图专用
+    symbolBorderWidthSM: border2x,
+    // 柱条的宽度
+    barWidth: size2x,
+    // 堆叠进度图宽度 20
+    barWidthLG: size5x,
+    // label字号
+    labelFontSize: fontSizeBase,
+    // labelLine的长度
+    labelLineLength: size6x,
+    // 边框 细
+    borderWidth: borderBase,
+    // 边框
+    borderWidthLG: border2x,
+    // 圆角 0
+    borderRadiusNone,
+    // 圆角 小
+    borderRadius: borderRadiusBase,
+    // series.lineStyle
+    lineWidth: border2x,
+    // series.lineStyle 0
+    lineWidthNone: borderNone,
+    // 图例单元尺寸
+    legendItemSize: 2,
+    // 图例圆形单元尺寸
+    legendCircleItemSize: 6,
+    // 图例的间距
+    legendSpace: space8x,
+    // 无padding
+    paddingNone: spaceNone,
+    paddingSM: spaceBase,
+    padding: space2x,
+    paddingLG: space4x
+  }
+}
+
+export default getAliasToken
+export { getAliasToken as getBpitAliasToken }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/bpit/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/bpit/index.ts
new file mode 100644
index 000000000..6b9c795dd
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/bpit/index.ts
@@ -0,0 +1,8 @@
+import { THEMES } from '../../constants'
+import getToken from '../../factory'
+
+const bpitLight = getToken(THEMES.BPIT_LIGHT)
+
+const bpitDark = getToken(THEMES.BPIT_DARK)
+
+export { bpitLight, bpitDark }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/getAliasToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/getAliasToken.ts
new file mode 100644
index 000000000..be6e10f63
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/getAliasToken.ts
@@ -0,0 +1,179 @@
+import { codeToRGB } from '../../../../util/color'
+
+function getAliasToken(globalToken, light = true) {
+  const {
+    colorGray0,
+    colorGray30,
+    colorGray40,
+    colorGray50,
+    colorGray60,
+    colorGray80,
+    colorGray70,
+    colorGray90,
+    colorTransparent,
+    fontSizeBase,
+    fontSizeMd,
+    space2x,
+    spaceBase,
+    lineTypeSolid,
+    lineTypeDashedLG,
+    borderNone,
+    borderBase,
+    borderRadiusBase,
+    border2x,
+    borderRadiusNone,
+    fontSizeLg,
+    fontSize4xl,
+    space6x,
+    size3x,
+    size2x,
+    spaceNone,
+    space8x,
+    space4x,
+    size6x,
+    size5x
+  } = globalToken
+
+  return {
+    //  初级底色 图表背景
+    colorBgPrimary: light ? colorGray0 : colorGray90, // 确定
+    // 次级背景色 tip背景
+    colorBgSecondary: light ? colorGray0 : colorGray80, // 确定
+    // 主要文本色
+    colorTextPrimary: light ? colorGray90 : colorGray40, // 确定
+    // 次级文本色
+    colorTextSecondary: light ? colorGray60 : colorGray50, // 确定
+    // 禁用文本色
+    colorTextDisabled: light ? colorGray50 : colorGray60, // 确定
+    // 图标激活色（legend翻页的颜色）
+    colorIconPrimary: light ? colorGray60 : colorGray60, // 确定
+    // 控件失效色（legend失效的颜色）
+    colorInactive: light ? colorGray50 : colorGray80, // 确定
+    // 图标禁用色（legend翻页图标禁用的颜色）
+    colorIconDisabled: light ? colorGray50 : colorGray80, // 确定
+    // 坐标轴线颜色
+    colorAxisLine: light ? colorGray30 : colorGray80, // 确定
+    // 刻度线颜色
+    colorAxisTickLine: light ? colorGray30 : colorGray80, // 确定
+    // 分隔线颜色
+    colorAxisSplitLine: light ? colorGray30 : colorGray80, // 确定
+    // 坐标轴指示器悬浮线
+    colorAxisPointerLine: light ? colorGray60 : colorGray70, // 确定
+    // 透明边框色
+    colorBorderTransparent: colorTransparent,
+    // 文本透明
+    colorTextTransparent: colorTransparent,
+    // 指示器阴影
+    colorAxisPointerShadow: light ? codeToRGB(colorGray90, 0.08) : codeToRGB(colorGray90, 0.08), //
+    // tip阴影
+    colorShadow: light ? codeToRGB(colorGray90, 0.08) : codeToRGB(colorGray90, 0.08), //
+    // 边框颜色
+    colorBorder: light ? colorGray0 : colorGray90, // 确定
+    // 禁用边框颜色和图表colorBgPrimary保持一致（聚合气泡图用todo）
+    colorBorderDisabled: light ? colorGray0 : colorGray90, // 确定
+    // label颜色
+    colorLabel: light ? colorGray90 : colorGray40, // 确定
+    // label禁用颜色（和文本禁用色保持一致）
+    colorLabelDisabled: light ? colorGray50 : colorGray60, // 确定
+    // 虚线的颜色
+    colorDash: light ? colorGray0 : colorGray90,
+    // 背景透明
+    colorBgTransparent: colorTransparent,
+    // 无数据占位背景
+    colorBgEmpty: light ? colorGray30 : colorGray80, // 确定
+    // labelLine颜色
+    colorLabelLine: light ? colorGray90 : colorGray40, // 确定
+    // 线透明
+    colorLineTransparent: colorTransparent,
+    // tip阴影垂直偏移
+    shadowOffsetY: space2x,
+    // tip阴影模糊
+    shadowBlur: space6x,
+    // 主文本字号
+    textFontSize: fontSizeMd, // 确定
+    // 次级文本字号
+    subtextFontSize: fontSizeBase, // 确定
+    // 标题文本字号
+    titleFontSize: fontSize4xl,
+    // 副标题文本字号
+    subtitleFontSize: fontSizeLg,
+    // 坐标轴 1
+    axisLineWidth: borderBase,
+    //   刻度线  1
+    axisTickLineWidth: borderBase,
+    // 分隔线线宽 1
+    axisSplitLineWidth: borderBase,
+    // 坐标轴指示器的标线线宽 1
+    axisPointerLineWidth: borderBase,
+    // 坐标轴类型
+    axisLineType: lineTypeSolid,
+    // 刻度线类型
+    axisTickLineType: lineTypeSolid,
+    // 直角坐标系分隔线类型
+    axisSplitLineType: lineTypeDashedLG,
+    // 极坐标系分隔线类型
+    polarAxisSplitLineType: lineTypeSolid,
+    // 坐标轴指示器标线类型
+    axisPointerLineType: lineTypeSolid,
+    // 坐标轴名称间距
+    axisNameSpace: space2x,
+    // 坐标轴文本间距
+    axisLabelSpace: spaceBase,
+    // 标识线宽度
+    markLineWidth: borderBase,
+    // 标识线高亮宽度
+    markLineEmphasisWidth: borderBase,
+    //  border 0
+    borderWidthNone: borderNone,
+    // 标题文本间距
+    titleSpace: space2x,
+    // 容器的间距
+    containerGap: space2x,
+    // 容器的圆角
+    containerBoderRadius: borderRadiusBase,
+    // 图元
+    symbolSizeLG: size3x,
+    // 图元 雷达图用
+    symbolSize: size2x,
+    // 图元 超大
+    symbolSizeSM: size2x,
+    // 图元的边框
+    symbolBorderWidth: border2x,
+    // 图元的边框 雷达图专用
+    symbolBorderWidthSM: borderBase,
+    // 柱条的宽度
+    barWidth: size2x,
+    // 堆叠进度图宽度 20
+    barWidthLG: size5x,
+    // label字号
+    labelFontSize: fontSizeBase,
+    // labelLine的长度
+    labelLineLength: size6x,
+    // 边框 细
+    borderWidth: borderBase,
+    // 边框
+    borderWidthLG: border2x,
+    // 圆角 0
+    borderRadiusNone,
+    // 圆角 小
+    borderRadius: borderRadiusBase,
+    // series.lineStyle
+    lineWidth: border2x,
+    // series.lineStyle 0
+    lineWidthNone: borderNone,
+    // 图例单元尺寸
+    legendItemSize: 2,
+    // 图例圆形单元尺寸
+    legendCircleItemSize: 6,
+    // 图例的间距
+    legendSpace: space8x,
+    // 无padding
+    paddingNone: spaceNone,
+    paddingSM: spaceBase,
+    padding: space2x,
+    paddingLG: space4x
+  }
+}
+
+export default getAliasToken
+export { getAliasToken as getCloudAliasToken }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/index.ts
new file mode 100644
index 000000000..b3a3ea3d0
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/index.ts
@@ -0,0 +1,8 @@
+import { THEMES } from '../../constants'
+import getToken from '../../factory'
+
+const cloudLight = getToken(THEMES.CLOUD_LIGHT)
+
+const cloudDark = getToken(THEMES.CLOUD_DARK)
+
+export { cloudLight, cloudDark }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/getAliasToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/getAliasToken.ts
new file mode 100644
index 000000000..04b91c30d
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/getAliasToken.ts
@@ -0,0 +1,183 @@
+import { codeToRGB } from '../../../../util/color'
+
+function getAliasToken(globalToken, light = true) {
+  const {
+    colorGray0,
+    colorGray5,
+    colorGray10,
+    colorGray20,
+    colorGray50,
+    colorGray60,
+    colorGray70,
+    colorGray80,
+    colorGray90,
+    colorGray100,
+    fontSizeBase,
+    fontSizeMd,
+    space2x,
+    spaceBase,
+    lineTypeSolid,
+    colorTransparent,
+    borderNone,
+    borderBase,
+    borderRadiusBase,
+    border2x,
+    fontSizeLg,
+    borderRadiusNone,
+    fontSize4xl,
+    space6x,
+    size3x,
+    size2x,
+    size4x,
+    spaceNone,
+    space8x,
+    space4x,
+    size6x,
+    size5x,
+    borderRadiusLg
+  } = globalToken
+
+  return {
+    //  初级底色  图表背景
+    colorBgPrimary: light ? colorGray0 : codeToRGB(colorGray5, 0.1), // 确定
+    // 次级背景色  tip背景
+    colorBgSecondary: light ? colorGray0 : colorGray70, // 确定
+    // 主要文本色
+    colorTextPrimary: light ? colorGray90 : colorGray0, // 确定
+    // 次级文本色
+    colorTextSecondary: light ? colorGray50 : colorGray20, // 确定
+    // 禁用文本色
+    colorTextDisabled: light ? colorGray20 : colorGray60, // 确定
+    // 图标激活色（legend翻页的颜色）
+    colorIconPrimary: light ? colorGray70 : colorGray20, // 确定
+    // 控件失效色（legend失效的颜色）
+    colorInactive: light ? colorGray10 : colorGray80, // 确定
+    // 图标禁用色（legend翻页图标禁用的颜色）
+    colorIconDisabled: light ? colorGray10 : colorGray80, // 确定
+    // 坐标轴线颜色
+    colorAxisLine: light ? colorGray10 : colorGray70, // 确定
+    // 刻度线颜色
+    colorAxisTickLine: light ? colorGray10 : colorGray70, // 确定
+    // 分隔线颜色
+    colorAxisSplitLine: light ? colorGray5 : colorGray80, // 确定
+    // 坐标轴指示器悬浮线
+    colorAxisPointerLine: light ? colorGray10 : colorGray70, // 确定
+    // 透明边框色
+    colorBorderTransparent: colorTransparent,
+    // 文本透明
+    colorTextTransparent: colorTransparent,
+    // 指示器阴影
+    colorAxisPointerShadow: light ? codeToRGB(colorGray10, 0.5) : codeToRGB(colorGray5, 0.05), // 确定
+    // tip阴影
+    colorShadow: light ? codeToRGB(colorGray90, 0.08) : codeToRGB(colorGray100, 0.5), // 确定
+    // 以下和规范还未确认
+    // 边框颜色
+    colorBorder: light ? colorGray0 : colorGray90,
+    // 禁用边框颜色和图表colorBgPrimary保持一致（聚合气泡图用todo）
+    colorBorderDisabled: light ? colorGray0 : codeToRGB(colorGray5, 0.1), // 确定
+    // label颜色
+    colorLabel: light ? colorGray90 : colorGray5,
+    // label禁用颜色（和文本禁用色保持一致）
+    colorLabelDisabled: light ? colorGray20 : colorGray60, // 确定
+    // 虚线的颜色
+    colorDash: light ? colorGray0 : colorGray90,
+    // 背景透明
+    colorBgTransparent: colorTransparent,
+    // 无数据占位背景
+    colorBgEmpty: light ? colorGray10 : codeToRGB(colorGray10, 0.1),
+    // labelLine颜色
+    colorLabelLine: light ? colorGray90 : colorGray5,
+    // 线透明
+    colorLineTransparent: colorTransparent,
+    // tip阴影垂直偏移
+    shadowOffsetY: space2x,
+    // tip阴影模糊
+    shadowBlur: space6x,
+    // 主文本字号
+    textFontSize: fontSizeMd,
+    // 次级文本字号
+    subtextFontSize: fontSizeBase,
+    // 标题文本字号
+    titleFontSize: fontSize4xl,
+    // 副标题文本字号
+    subtitleFontSize: fontSizeLg,
+    // 坐标轴线宽 2
+    axisLineWidth: border2x,
+    // 刻度线线宽 2
+    axisTickLineWidth: border2x,
+    // 分隔线线宽 1
+    axisSplitLineWidth: borderBase,
+    // 坐标轴指示器的标线线宽 1
+    axisPointerLineWidth: borderBase, // 待定
+    // 坐标轴类型
+    axisLineType: lineTypeSolid,
+    // 刻度线类型
+    axisTickLineType: lineTypeSolid,
+    // 直角坐标系分隔线类型
+    axisSplitLineType: lineTypeSolid,
+    // 极坐标系分隔线类型
+    polarAxisSplitLineType: lineTypeSolid,
+    // 坐标轴指示器标线类型
+    axisPointerLineType: lineTypeSolid,
+    // 坐标轴名称间距
+    axisNameSpace: space2x,
+    // 坐标轴文本间距
+    axisLabelSpace: spaceBase,
+    // 标识线宽度
+    markLineWidth: borderBase,
+    // 标识线高亮宽度
+    markLineEmphasisWidth: borderBase,
+    //  border 0
+    borderWidthNone: borderNone,
+    // 标题文本间距
+    titleSpace: space2x,
+    // 容器的间距
+    containerGap: space2x,
+    // 容器的圆角
+    containerBoderRadius: borderRadiusLg,
+    // 图元
+    symbolSizeLG: size3x,
+    // 图元 雷达图用
+    symbolSize: size3x,
+    // 图元 超大
+    symbolSizeSM: size2x,
+    // 图元的边框
+    symbolBorderWidth: border2x,
+    // 图元的边框 雷达图专用
+    symbolBorderWidthSM: border2x,
+    // 柱条的宽度
+    barWidth: size4x,
+    // 堆叠进度图宽度 20
+    barWidthLG: size5x,
+    // label字号
+    labelFontSize: fontSizeBase,
+    // labelLine的长度
+    labelLineLength: size6x,
+    // 边框 细
+    borderWidth: borderBase,
+    // 边框
+    borderWidthLG: border2x,
+    // 圆角 0
+    borderRadiusNone,
+    // 圆角 小
+    borderRadius: borderRadiusBase,
+    // series.lineStyle
+    lineWidth: border2x,
+    // series.lineStyle 0
+    lineWidthNone: borderNone,
+    // 图例单元尺寸
+    legendItemSize: 2,
+    // 图例圆形单元尺寸
+    legendCircleItemSize: 12,
+    // 图例的间距
+    legendSpace: space8x,
+    // 无padding
+    paddingNone: spaceNone,
+    paddingSM: spaceBase,
+    padding: space2x,
+    paddingLG: space4x
+  }
+}
+
+export default getAliasToken
+export { getAliasToken as getHdesignAliasToken }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/index.ts
new file mode 100644
index 000000000..cc549ede4
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/index.ts
@@ -0,0 +1,8 @@
+import { THEMES } from '../../constants'
+import getToken from '../../factory'
+
+const hdesignLight = getToken(THEMES.HDESIGN_LIGHT)
+
+const hdesignDark = getToken(THEMES.HDESIGN_DARK)
+
+export { hdesignLight, hdesignDark }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/ict/getAliasToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/ict/getAliasToken.ts
new file mode 100644
index 000000000..25aa73deb
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/ict/getAliasToken.ts
@@ -0,0 +1,179 @@
+import { codeToRGB } from '../../../../util/color'
+
+function getAliasToken(globalToken, light = true) {
+  const {
+    colorGray0,
+    colorGray5,
+    colorGray10,
+    colorGray20,
+    colorGray50,
+    colorGray60,
+    colorGray70,
+    colorGray90,
+    colorGray100,
+    fontSizeBase,
+    fontSizeMd,
+    space2x,
+    spaceBase,
+    lineTypeSolid,
+    colorTransparent,
+    borderNone,
+    borderBase,
+    borderRadiusBase,
+    border2x,
+    fontSizeLg,
+    borderRadiusNone,
+    fontSize4xl,
+    space6x,
+    size3x,
+    size2x,
+    spaceNone,
+    space8x,
+    space4x,
+    size6x,
+    size5x
+  } = globalToken
+
+  return {
+    //  初级底色 图表背景
+    colorBgPrimary: light ? colorGray0 : colorGray90, // 确定
+    // 次级背景色 tip背景
+    colorBgSecondary: light ? colorGray0 : colorGray70,
+    // 主要文本色
+    colorTextPrimary: light ? colorGray90 : colorGray5, // 确定
+    // 次级文本色
+    colorTextSecondary: light ? colorGray60 : colorGray20, // 确定
+    // 禁用文本色
+    colorTextDisabled: light ? codeToRGB(colorGray90, 0.3) : codeToRGB(colorGray10, 0.3), // 确定
+    // 图标激活色（legend翻页的颜色）
+    colorIconPrimary: light ? colorGray90 : colorGray10, // 确定
+    // 控件失效色（legend失效的颜色）
+    colorInactive: light ? colorGray20 : colorGray50, // 确定
+    // 图标禁用色（legend翻页图标禁用的颜色）
+    colorIconDisabled: light ? codeToRGB(colorGray90, 0.3) : codeToRGB(colorGray10, 0.3), // 确定
+    // 坐标轴线颜色
+    colorAxisLine: light ? colorGray10 : codeToRGB(colorGray10, 0.1), // 确定
+    // 刻度线颜色
+    colorAxisTickLine: light ? colorGray10 : codeToRGB(colorGray10, 0.1), // 确定
+    // 分隔线颜色
+    colorAxisSplitLine: light ? codeToRGB(colorGray90, 0.1) : codeToRGB(colorGray10, 0.1), // 确定
+    // 坐标轴指示器悬浮线
+    colorAxisPointerLine: light ? colorGray20 : colorGray50, // 确定
+    // 透明边框色
+    colorBorderTransparent: colorTransparent,
+    // 文本透明
+    colorTextTransparent: colorTransparent,
+    // 指示器阴影
+    colorAxisPointerShadow: light ? codeToRGB(colorGray90, 0.05) : codeToRGB(colorGray10, 0.08),
+    // tip阴影
+    colorShadow: light ? codeToRGB(colorGray100, 0.16) : codeToRGB(colorGray100, 0.5),
+    // 边框颜色
+    colorBorder: light ? colorGray0 : colorGray90,
+    // 禁用边框颜色和图表colorBgPrimary保持一致（聚合气泡图用todo）
+    colorBorderDisabled: light ? colorGray0 : colorGray90, // 确定
+    // label颜色
+    colorLabel: light ? colorGray90 : colorGray5,
+    // label禁用颜色（和文本禁用色保持一致）
+    colorLabelDisabled: light ? codeToRGB(colorGray90, 0.3) : codeToRGB(colorGray10, 0.3), // 确定
+    // 虚线的颜色
+    colorDash: light ? colorGray0 : colorGray90,
+    // 背景透明
+    colorBgTransparent: colorTransparent,
+    // 无数据占位背景
+    colorBgEmpty: light ? colorGray10 : codeToRGB(colorGray10, 0.1), // 确定
+    // labelLine颜色
+    colorLabelLine: light ? colorGray90 : colorGray5, // 确定
+    // 线透明
+    colorLineTransparent: colorTransparent,
+    // tip阴影垂直偏移
+    shadowOffsetY: space2x,
+    // tip阴影模糊
+    shadowBlur: space6x,
+    // 主文本字号
+    textFontSize: fontSizeMd, // 确定
+    // 次级文本字号
+    subtextFontSize: fontSizeBase, // 确定
+    // 标题文本字号
+    titleFontSize: fontSize4xl,
+    // 副标题文本字号
+    subtitleFontSize: fontSizeLg,
+    // 坐标轴线宽 2
+    axisLineWidth: border2x, // 确定
+    // 刻度线线宽 2
+    axisTickLineWidth: border2x, // 确定
+    // 分隔线线宽 1
+    axisSplitLineWidth: borderBase, // 确定
+    // 坐标轴指示器的标线线宽 1
+    axisPointerLineWidth: borderBase,
+    // 坐标轴类型
+    axisLineType: lineTypeSolid,
+    // 刻度线类型
+    axisTickLineType: lineTypeSolid,
+    // 直角坐标系分隔线类型
+    axisSplitLineType: lineTypeSolid,
+    // 极坐标系分隔线类型
+    polarAxisSplitLineType: lineTypeSolid,
+    // 坐标轴指示器标线类型
+    axisPointerLineType: lineTypeSolid,
+    // 坐标轴名称间距
+    axisNameSpace: space2x,
+    // 坐标轴文本间距
+    axisLabelSpace: spaceBase,
+    // 标识线宽度
+    markLineWidth: borderBase,
+    // 标识线高亮宽度
+    markLineEmphasisWidth: borderBase,
+    //  border 0
+    borderWidthNone: borderNone,
+    // 标题文本间距
+    titleSpace: space2x,
+    // 容器的间距
+    containerGap: space2x,
+    // 容器的圆角
+    containerBoderRadius: borderRadiusBase,
+    // 图元
+    symbolSizeLG: size3x,
+    // 图元 雷达图用
+    symbolSize: size3x,
+    // 图元 超大
+    symbolSizeSM: size2x,
+    // 图元的边框
+    symbolBorderWidth: border2x,
+    // 图元的边框 雷达图专用
+    symbolBorderWidthSM: border2x,
+    // 柱条的宽度
+    barWidth: size2x,
+    // 堆叠进度图宽度 20
+    barWidthLG: size5x,
+    // label字号
+    labelFontSize: fontSizeBase,
+    // labelLine的长度
+    labelLineLength: size6x,
+    // 边框 细
+    borderWidth: borderBase,
+    // 边框
+    borderWidthLG: border2x,
+    // 圆角 0
+    borderRadiusNone,
+    // 圆角 小
+    borderRadius: borderRadiusBase,
+    // series.lineStyle
+    lineWidth: border2x,
+    // series.lineStyle 0
+    lineWidthNone: borderNone,
+    // 图例单元尺寸
+    legendItemSize: 2,
+    // 图例圆形单元尺寸
+    legendCircleItemSize: 12,
+    // 图例的间距
+    legendSpace: space8x,
+    // 无padding
+    paddingNone: spaceNone,
+    paddingSM: spaceBase,
+    padding: space2x,
+    paddingLG: space4x
+  }
+}
+
+export default getAliasToken
+export { getAliasToken as getIctAliasToken }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/ict/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/ict/index.ts
new file mode 100644
index 000000000..7ebd8d7c2
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/ict/index.ts
@@ -0,0 +1,8 @@
+import { THEMES } from '../../constants'
+import getToken from '../../factory'
+
+const ictLight = getToken(THEMES.LIGHT)
+
+const ictDark = getToken(THEMES.DARK)
+
+export { ictLight, ictDark }
diff --git a/packages/vue/src/chart/chart-core/base/index.less b/packages/vue/src/chart/chart-core/base/index.less
new file mode 100644
index 000000000..236cf41b7
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/index.less
@@ -0,0 +1,11 @@
+@import './feature/drag/index.less';
+@import './components/FlowChart/index.less';
+@import './components/GanttChart/index.less';
+@import './components/HoneycombChart/index.less';
+@import './components/OrganizationChart/index.less';
+@import './components/RiverChart/index.less';
+@import './components/SnowFlakeChart/index.less';
+@import './components/TerraceChart/index.less';
+@import './components/TimelineChart/index.less';
+@import './components/WaveChart/index.less';
+@import './components/MilestoneChart/index.less';
\ No newline at end of file
diff --git a/packages/vue/src/chart/chart-core/base/index.ts b/packages/vue/src/chart/chart-core/base/index.ts
new file mode 100644
index 000000000..0a475e56a
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/index.ts
@@ -0,0 +1,25 @@
+import HuiChart from './chart'
+
+export { default as core } from './core'
+export { default as Dragger } from './feature/drag'
+export { default as BarChart } from './components/BarChart'
+export { default as PieChart } from './components/PieChart'
+export { default as LineChart } from './components/LineChart'
+export { default as TreeChart } from './components/TreeChart'
+export { default as RadarChart } from './components/RadarChart'
+export { default as GaugeChart } from './components/GaugeChart'
+export { default as GraphChart } from './components/GraphChart'
+export { default as BubbleChart } from './components/BubbleChart'
+export { default as RegionChart } from './components/RegionChart'
+export { default as FunnelChart } from './components/FunnelChart'
+export { default as SankeyChart } from './components/SankeyChart'
+export { default as BoxplotChart } from './components/BoxplotChart'
+export { default as HeatMapChart } from './components/HeatMapChart'
+export { default as BaiduMapChart } from './components/BaiduMapChart'
+export { default as SunburstChart } from './components/SunburstChart'
+export { default as WordCloudChart } from './components/WordCloudChart'
+export { default as LiquidfillChart } from './components/LiquidfillChart'
+export { default as AutonaviMapChart } from './components/AutonaviMapChart'
+export { default as CandlestickChart } from './components/CandlestickChart'
+
+export default HuiChart
diff --git a/packages/vue/src/chart/chart-core/base/option/PolarSys/index.ts b/packages/vue/src/chart/chart-core/base/option/PolarSys/index.ts
new file mode 100644
index 000000000..351257bc7
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/PolarSys/index.ts
@@ -0,0 +1,32 @@
+import title from '../config/polarTitle'
+import legend from '../config/legend'
+import tooltip from '../config/tooltip'
+import angleAxis from '../config/angleAxis'
+import radiusAxis from '../config/radiusAxis'
+import polar from '../config/polar'
+
+// 极坐标系所需的基础配置
+function PolarCoordSys(baseOpt, iChartOpt, chartName) {
+  // 图表基础颜色
+  baseOpt.color = iChartOpt.color
+
+  // 图表的圆环角度轴
+  baseOpt.angleAxis = angleAxis(iChartOpt, chartName)
+
+  // 图表的圆环径向轴
+  baseOpt.radiusAxis = radiusAxis(iChartOpt, chartName)
+
+  // 图表的圆环位置
+  baseOpt.polar = polar(iChartOpt, chartName)
+
+  // 图表鼠标悬浮提示框
+  baseOpt.tooltip = tooltip(iChartOpt, chartName)
+
+  // 图表中间的文字使用 title 属性实现
+  baseOpt.title = title(iChartOpt, chartName)
+
+  // 图表图例
+  baseOpt.legend = legend(iChartOpt)
+}
+
+export default PolarCoordSys
diff --git a/packages/vue/src/chart/chart-core/base/option/RectSys/index.ts b/packages/vue/src/chart/chart-core/base/option/RectSys/index.ts
new file mode 100644
index 000000000..ed1966ed2
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/RectSys/index.ts
@@ -0,0 +1,40 @@
+import grid from '../config/grid'
+import xAxis from '../config/xAxis'
+import yAxis from '../config/yAxis'
+import legend from '../config/legend'
+import tooltip from '../config/tooltip'
+import datazoom from '../config/datazoom'
+
+// 暴露出去的方法
+import xkey from '../config/xAxis/xkey'
+import xdata from '../config/xAxis/xdata'
+import ydata from '../config/yAxis/ydata'
+import ldata from '../config/legend/ldata'
+
+// 组装直角坐标系所需的基础配置
+function RectCoordSys(baseOpt, iChartOpt, chartName) {
+  // 图表padding
+  baseOpt.grid = grid(iChartOpt)
+  // 图表基础颜色
+  baseOpt.color = iChartOpt.color
+  // 图表x坐标轴
+  baseOpt.xAxis = xAxis(iChartOpt, chartName)
+  // 图表y坐标轴
+  baseOpt.yAxis = yAxis(baseOpt, iChartOpt, chartName)
+  // 图表鼠标悬浮提示框
+  baseOpt.tooltip = tooltip(iChartOpt, chartName)
+  // 图表图例
+  baseOpt.legend = legend(iChartOpt, chartName)
+  // 图表datazoom
+  baseOpt.dataZoom = datazoom(iChartOpt)
+}
+
+export default RectCoordSys
+
+/**
+ * xkey:  获取到x轴的key name
+ * xdata: 获取到x轴的数据
+ * ydata: 获取到y轴的数据
+ * ldata: 获取到legend的数据
+ */
+export { xkey, xdata, ldata, ydata }
diff --git a/packages/vue/src/chart/chart-core/base/option/base/index.ts b/packages/vue/src/chart/chart-core/base/option/base/index.ts
new file mode 100644
index 000000000..75fc2c75f
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/base/index.ts
@@ -0,0 +1,13 @@
+const base = {
+  grid: {
+    top: '0',
+    left: '0',
+    right: '0',
+    bottom: '0',
+    containLabel: true
+  },
+  legend: {},
+  tooltip: {}
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/angleAxis/base.ts b/packages/vue/src/chart/chart-core/base/option/config/angleAxis/base.ts
new file mode 100644
index 000000000..6de53bb75
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/angleAxis/base.ts
@@ -0,0 +1,46 @@
+import Theme from '../../../feature/token'
+
+function getBaseAngleAxis() {
+  return {
+    splitNumber: 6,
+    startAngle: 90,
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: Theme.config.angleAxisLineColor,
+        width: Theme.config.angleAxisLineWidth,
+        type: Theme.config.angleAxisLineType
+      }
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: Theme.config.angleAxisSplitLineColor,
+        width: Theme.config.angleAxisSplitLineWidth,
+        type: Theme.config.angleAxisSplitLineType
+      }
+    },
+    axisTick: {
+      show: false,
+      length: 5,
+      lineStyle: {
+        color: Theme.config.angleAxisTickLineColor,
+        width: Theme.config.angleAxisTickLineWidth,
+        type: Theme.config.angleAxisTickLineType
+      }
+    },
+    axisLabel: {
+      show: true,
+      fontSize: Theme.config.angleAxisLabelFontSize,
+      color: Theme.config.angleAxisLabelColor,
+      formatter: undefined
+    }
+  }
+}
+
+function base(chartName) {
+  const angleAxisOption = getBaseAngleAxis()
+  return angleAxisOption
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/angleAxis/index.ts b/packages/vue/src/chart/chart-core/base/option/config/angleAxis/index.ts
new file mode 100644
index 000000000..d2a0eb47e
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/angleAxis/index.ts
@@ -0,0 +1,31 @@
+import base from './base'
+import merge from '../../../util/merge'
+
+function angleAxis(iChartOption, chartName) {
+  let angleAxisOpt
+  switch (chartName) {
+    case 'JadeJueChart':
+      angleAxisOpt = base(chartName)
+      merge(angleAxisOpt, iChartOption.angleAxis)
+      break
+    case 'PolarBarChart':
+      angleAxisOpt = base(chartName)
+      angleAxisOpt.type = 'category'
+      angleAxisOpt.axisLine.show = true
+      angleAxisOpt.axisLabel.show = false
+      angleAxisOpt.splitLine.show = true
+      merge(angleAxisOpt, iChartOption.angleAxis)
+      break
+    case 'CircleProcessChart':
+      angleAxisOpt = {
+        max: 100,
+        show: false
+      }
+      break
+    default:
+      break
+  }
+  return angleAxisOpt
+}
+
+export default angleAxis
diff --git a/packages/vue/src/chart/chart-core/base/option/config/datazoom/base.ts b/packages/vue/src/chart/chart-core/base/option/config/datazoom/base.ts
new file mode 100644
index 000000000..8005b7ece
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/datazoom/base.ts
@@ -0,0 +1,112 @@
+import cloneDeep from '../../../util/cloneDeep'
+import Theme from '../../../feature/token'
+
+const baseOption = [
+  {
+    end: 100,
+    start: 0,
+    height: 24,
+    bottom: 18,
+    show: false,
+    type: 'slider',
+    left: 'center',
+    xAxisIndex: [0],
+    zoomLock: false,
+    borderColor: 'none', // 边框
+    backgroundColor: undefined, // 背景颜色
+    fillerColor: undefined, // 选中范围填充颜色
+    handleSize: '85%', // 控制手柄的尺寸
+    handleIcon: 'path://M0 0.2 Q 0 0 0.2 0 L0.8 0 Q1 0 1 0.2 L1 2.8 Q1 3 0.8 3L0.2 3 Q0 3 0 2.8 Z', // 手柄形状
+    handleStyle: {
+      color: undefined, // 手柄颜色
+      shadowBlur: 5, // 阴影模糊大小
+      shadowColor: undefined,
+      shadowOffsetX: 0, // 阴影偏移x轴多少
+      shadowOffsetY: 0, // 阴影偏移y轴多少
+      opacity: 1, // 透明度
+      borderColor: undefined, // 手柄边框颜色
+      borderWidth: 5, // 手柄边框宽度
+      borderJoin: 'round' // 手柄边框圆角
+    },
+    dataBackground: {
+      lineStyle: {
+        color: undefined, // 线条颜色
+        join: 'round',
+        cap: 'round'
+      },
+      areaStyle: {
+        opacity: 1, // 阴影的透明度
+        color: undefined // 填充的颜色
+      }
+    },
+    selectedDataBackground: {
+      // 选中部分样式
+      lineStyle: {
+        color: undefined // 线条颜色
+      },
+      areaStyle: {
+        opacity: 0.9, // 阴影的透明度
+        color: undefined // 填充的颜色
+      }
+    },
+    moveHandleSize: '0', // 移动手柄的尺寸高度
+    emphasis: {
+      handleStyle: {
+        color: undefined,
+        borderColor: undefined
+      }
+    }
+  }
+]
+
+function base(theme) {
+  const option = cloneDeep(baseOption)
+  if (theme.includes('dark')) {
+    // 手柄中心填充色
+    option[0].handleStyle.color = Theme.config.dataZoomHandleColor
+    // 手柄外框色
+    option[0].handleStyle.borderColor = Theme.config.dataZoomHandleBorderColor
+    // 手柄阴影色
+    option[0].handleStyle.shadowColor = Theme.config.dataZoomHandleShadowColor
+    // 手柄hover时中心填充色
+    option[0].emphasis.handleStyle.color = Theme.config.dataZoomEmphasisHandleColor
+    // 手柄hover时外框色
+    option[0].emphasis.handleStyle.borderColor = Theme.config.dataZoomEmphasisHandleBorderColor
+
+    // 空白部分底色
+    option[0].backgroundColor = '#090909'
+    // 空白遮罩颜色
+    option[0].fillerColor = 'rgba(255,255,255,0)'
+    // 选中区域外的线条颜色和面积颜色
+    option[0].dataBackground.lineStyle.color = '#282828'
+    option[0].dataBackground.areaStyle.color = '#282828'
+    // 选中区域内的线条颜色和面积颜色
+    option[0].selectedDataBackground.lineStyle.color = '#555555'
+    option[0].selectedDataBackground.areaStyle.color = '#555555'
+  } else {
+    // 手柄中心填充色
+    option[0].handleStyle.color = '#ffffff'
+    // 手柄外框色
+    option[0].handleStyle.borderColor = '#1476ff'
+    // 手柄阴影色
+    option[0].handleStyle.shadowColor = 'transparent'
+    // 手柄hover时中心填充色
+    option[0].emphasis.handleStyle.color = '#ffffff'
+    // 手柄hover时外框色
+    option[0].emphasis.handleStyle.borderColor = '#1476ff'
+
+    // 空白部分底色
+    option[0].backgroundColor = '#f3f3f3'
+    // 空白遮罩颜色
+    option[0].fillerColor = 'rgba(175,218,245,.5)'
+    // 选中区域外的线条颜色和面积颜色
+    option[0].dataBackground.lineStyle.color = '#c2c2c2'
+    option[0].dataBackground.areaStyle.color = '#e8e8e8'
+    // 选中区域内的线条颜色和面积颜色
+    option[0].selectedDataBackground.lineStyle.color = '#9fb3ce'
+    option[0].selectedDataBackground.areaStyle.color = '#bcd0eb'
+  }
+  return option
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/datazoom/index.ts b/packages/vue/src/chart/chart-core/base/option/config/datazoom/index.ts
new file mode 100644
index 000000000..9748b7294
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/datazoom/index.ts
@@ -0,0 +1,45 @@
+import base from './base'
+import merge from '../../../util/merge'
+
+function datazoom(iChartOption) {
+  const theme = iChartOption.theme
+  const self = iChartOption.dataZoom
+  const dataZoom = base(theme)
+  const { show, position, start, end, startValue, endValue, style, zoomOnMouseWheel, height } = self
+  if (show) {
+    end && (dataZoom[0].end = end)
+    start && (dataZoom[0].start = start)
+    if (startValue !== undefined) {
+      delete dataZoom[0].start
+      dataZoom[0].startValue = startValue
+    }
+    if (endValue !== undefined) {
+      delete dataZoom[0].end
+      dataZoom[0].endValue = endValue
+    }
+    height && (dataZoom[0].height = height)
+    dataZoom[0].show = true
+    dataZoom[0].top = position.top || 'auto'
+    dataZoom[0].left = position.left || 'auto'
+    dataZoom[0].right = position.right || 'auto'
+    dataZoom[0].bottom = position.bottom || 'auto'
+    // 用户自定义样式
+    if (style) {
+      const { backgroundColor, dataBackground, selectedDataBackground, fillerColor } = dataZoom[0]
+      dataZoom[0].backgroundColor = style.backgroundColor || backgroundColor
+      dataZoom[0].dataBackground.areaStyle.color = style.unSelectDataColor || dataBackground.areaStyle.color
+      dataZoom[0].selectedDataBackground.areaStyle.color =
+        style.selectDataColor || selectedDataBackground.areaStyle.color
+      dataZoom[0].fillerColor = style.middleFillerColor || fillerColor
+      // 用户自定义手柄样式
+      if (style.handleStyle) {
+        dataZoom[0].handleStyle = Object.assign(dataZoom[0].handleStyle, style.handleStyle)
+      }
+    }
+    merge(dataZoom[0], self)
+  }
+  // dataZoom = self;
+  return dataZoom
+}
+
+export default datazoom
diff --git a/packages/vue/src/chart/chart-core/base/option/config/grid/base.ts b/packages/vue/src/chart/chart-core/base/option/config/grid/base.ts
new file mode 100644
index 000000000..bcd626393
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/grid/base.ts
@@ -0,0 +1,16 @@
+import cloneDeep from '../../../util/cloneDeep'
+
+const baseGridOption = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  containLabel: true
+}
+
+function base() {
+  const option = cloneDeep(baseGridOption)
+  return option
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/grid/index.ts b/packages/vue/src/chart/chart-core/base/option/config/grid/index.ts
new file mode 100644
index 000000000..eee3de15e
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/grid/index.ts
@@ -0,0 +1,21 @@
+import base from './base'
+import merge from '../../../util/merge'
+import { isArray } from '../../../util/type'
+
+function grid(iChartOpt) {
+  const gridUnit = base()
+  gridUnit.top = iChartOpt.padding[0]
+  gridUnit.left = iChartOpt.padding[3]
+  gridUnit.right = iChartOpt.padding[1]
+  gridUnit.bottom = iChartOpt.padding[2]
+  let gridResult = iChartOpt.grid || [gridUnit]
+  if (!isArray(gridResult)) {
+    gridResult = [gridResult]
+  }
+  gridResult.forEach((item) => {
+    merge(gridUnit, item)
+  })
+  return gridResult
+}
+
+export default grid
diff --git a/packages/vue/src/chart/chart-core/base/option/config/legend/base.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/base.ts
new file mode 100644
index 000000000..cd7eb04a7
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/legend/base.ts
@@ -0,0 +1,66 @@
+import Theme from '../../../feature/token'
+import { pageIconArr } from './pageIcon'
+
+function getBaseOption() {
+  return {
+    data: [],
+    icon: 'circle',
+    left: 'center',
+    bottom: 12,
+    padding: Theme.config.legendPadding,
+    inactiveColor: Theme.config.legendInactiveColor,
+    inactiveBorderColor: Theme.config.legendInactiveBorderColor,
+    inactiveBorderWidth: Theme.config.legendInactiveBorderWidth,
+    borderWidth: Theme.config.legendBorderWidth,
+    formatter: undefined,
+    textStyle: {
+      fontSize: Theme.config.legendTextFontSize,
+      color: Theme.config.legendTextColor,
+      align: 'left',
+      verticalAlign: 'top',
+      padding: Theme.config.legendTextPadding,
+      rich: {
+        a: {
+          fontSize: Theme.config.legendTextRichFontSize,
+          color: Theme.config.legendTextRichColor,
+          align: 'left',
+          verticalAlign: 'top',
+          padding: Theme.config.legendTextRichPadding
+        },
+        b: {
+          fontSize: Theme.config.legendTextRichFontSize,
+          color: Theme.config.legendTextRichColor,
+          align: 'left',
+          verticalAlign: 'top',
+          padding: Theme.config.legendTextRichPadding
+        }
+      },
+      overflow: 'none',
+      width: undefined
+    },
+    width: undefined,
+    pageTextStyle: {
+      color: Theme.config.legendPageTextColor
+    },
+    pageIconColor: Theme.config.legendPageIconColor,
+    pageIconInactiveColor: Theme.config.legendPageIconInactiveColor,
+    pageIcons: {
+      horizontal: pageIconArr,
+      vertical: pageIconArr
+    },
+    selectedMode: true,
+    align: 'left',
+    itemGap: Theme.config.legendItemGap,
+    itemWidth: Theme.config.legendCircleItemWidth,
+    itemHeight: Theme.config.legendCircleItemHeight,
+    itemStyle: {
+      borderWidth: Theme.config.legendItemBorderWidth
+    }
+  }
+}
+
+function base() {
+  return getBaseOption()
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/legend/icon.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/icon.ts
new file mode 100644
index 000000000..ce353b10e
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/legend/icon.ts
@@ -0,0 +1,11 @@
+import Theme from '../../../feature/token'
+
+function icon(legend, iChartOption) {
+  if (iChartOption.legend.icon === 'line') {
+    legend.icon = 'rect'
+    legend.itemHeight = Theme.config.legendReactItemHeight
+    legend.itemWidth = Theme.config.legendReactItemWidth
+  }
+}
+
+export default icon
diff --git a/packages/vue/src/chart/chart-core/base/option/config/legend/index.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/index.ts
new file mode 100644
index 000000000..fdb49a627
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/legend/index.ts
@@ -0,0 +1,45 @@
+import base from './base'
+import icon from './icon'
+import size from './size'
+import position from './position'
+import textStyle from './textStyle'
+import itemStyle from './itemStyle'
+
+function legend(iChartOption, chartName) {
+  const selfLegend = iChartOption.legend
+  const { data, show, orient, formatter, selectedMode } = selfLegend
+  const legend = base()
+  // 控制显示
+  if (!show) {
+    legend.show = false
+  }
+  // 图例排布方向
+  if (orient) {
+    legend.orient = orient
+  }
+  // 图例选择模式, 当 selectedMode == false 时表示不可点击
+  legend.selectedMode = selectedMode !== undefined ? selectedMode : true
+  // 图例位置
+  position(legend, selfLegend)
+  // 图例整体的宽高
+  size(legend, selfLegend)
+  // 图例样式
+  itemStyle(legend, chartName)
+  // 图例文本格式化
+  legend.formatter = formatter
+  // 图例图标大小
+  legend.itemWidth = selfLegend.itemWidth || legend.itemWidth
+  legend.itemHeight = selfLegend.itemHeight || legend.itemHeight
+  // 图例每项之间的间隔
+  legend.itemGap = selfLegend.itemGap || legend.itemGap
+  // 数据
+  legend.data = data
+  // 配置图例富文本样式
+  textStyle(legend, selfLegend.textStyle)
+  Object.assign(legend, iChartOption.legend)
+  // 自定义icon
+  icon(legend, iChartOption)
+  return legend
+}
+
+export default legend
diff --git a/packages/vue/src/chart/chart-core/base/option/config/legend/itemStyle.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/itemStyle.ts
new file mode 100644
index 000000000..bd486b4af
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/legend/itemStyle.ts
@@ -0,0 +1,5 @@
+export default function itemStyle(legend, chartName) {
+  if (chartName === 'BubbleChart') {
+    legend.itemStyle.borderWidth = 1
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/option/config/legend/ldata.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/ldata.ts
new file mode 100644
index 000000000..55bfd4e9f
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/legend/ldata.ts
@@ -0,0 +1,17 @@
+/**
+ * 从数据中拿出legend-data
+ */
+function ldata(data, xAxisKey) {
+  const legendData = []
+  if (data.length > 0) {
+    const temp = data[0]
+    for (const key in temp) {
+      if (key !== xAxisKey) {
+        legendData.push(key)
+      }
+    }
+  }
+  return legendData
+}
+
+export default ldata
diff --git a/packages/vue/src/chart/chart-core/base/option/config/legend/pageIcon.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/pageIcon.ts
new file mode 100644
index 000000000..57299000a
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/legend/pageIcon.ts
@@ -0,0 +1,43 @@
+const leftIcon = (color = '#191919') => {
+  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 48 48" version="1.1">
+    <title>ic_public_left_arrow</title>
+    <g id="ic_public_left_arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M1.5054679,23.9816777 C1.5054679,20.4665945 1.49316512,16.9515113 1.5054679,13.4364281 C1.49839598,11.7354825 1.70745964,10.0405302 2.1276372,8.39228371 C3.04858836,4.90356362 5.32108808,2.83317961 8.80629066,2.0299831 C10.5538164,1.65241445 12.3387234,1.4755157 14.1263654,1.50272062 C20.8671186,1.50272062 27.6084577,1.50272062 34.3503826,1.50272062 C36.0530469,1.49215117 37.7507765,1.68688567 39.4068263,2.08270935 C42.9974813,2.96148015 45.1522258,5.23573899 45.9729972,8.81409369 C46.3419987,10.5052846 46.5182902,12.2328244 46.4985018,13.9636906 C46.4985018,20.7770935 46.4985018,27.5910823 46.4985018,34.405657 C46.5077071,36.0919093 46.3135624,37.7731207 45.920271,39.412893 C45.0415008,43.0053081 42.7566983,45.1495088 39.1783461,45.9702807 C37.4305962,46.3464204 35.6458526,46.5233029 33.8582713,46.4975432 C27.1456387,46.4975432 20.433592,46.4975432 13.7221311,46.4975432 C12.0064517,46.5115465 10.2952822,46.3197774 8.62526401,45.9263422 C5.01879113,45.0475714 2.85350138,42.7627673 2.03448756,39.1668372 C1.61619295,37.3389939 1.5054679,35.505878 1.5054679,33.6569443 C1.5054679,30.4324413 1.5054679,27.2073524 1.5054679,23.9816777 Z" id="path1" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero"></path>
+        <path d="M1.5054679,23.9816777 C1.5054679,20.4665945 1.49316512,16.9515113 1.5054679,13.4364281 C1.49839598,11.7354825 1.70745964,10.0405302 2.1276372,8.39228371 C3.04858836,4.90356362 5.32108808,2.83317961 8.80629066,2.0299831 C10.5538164,1.65241445 12.3387234,1.4755157 14.1263654,1.50272062 C20.8671186,1.50272062 27.6084577,1.50272062 34.3503826,1.50272062 C36.0530469,1.49215117 37.7507765,1.68688567 39.4068263,2.08270935 C42.9974813,2.96148015 45.1522258,5.23573899 45.9729972,8.81409369 C46.3419987,10.5052846 46.5182902,12.2328244 46.4985018,13.9636906 C46.4985018,20.7770935 46.4985018,27.5910823 46.4985018,34.405657 C46.5077071,36.0919093 46.3135624,37.7731207 45.920271,39.412893 C45.0415008,43.0053081 42.7566983,45.1495088 39.1783461,45.9702807 C37.4305962,46.3464204 35.6458526,46.5233029 33.8582713,46.4975432 C27.1456387,46.4975432 20.433592,46.4975432 13.7221311,46.4975432 C12.0064517,46.5115465 10.2952822,46.3197774 8.62526401,45.9263422 C5.01879113,45.0475714 2.85350138,42.7627673 2.03448756,39.1668372 C1.61619295,37.3389939 1.5054679,35.505878 1.5054679,33.6569443 C1.5054679,30.4324413 1.5054679,27.2073524 1.5054679,23.9816777 Z" id="path2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-rule="nonzero"></path>
+        <circle id="path3" fill-opacity="0" fill="#FFFFFF" cx="24" cy="24" r="24"></circle>
+        <polyline id="path4" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(24.000000, 24.000000) scale(-1, 1) rotate(-90.000000) translate(-24.000000, -24.000000) " points="4.5 14 24 34 43.5 14"></polyline>
+        <path d="M42.7840001,13.3019001 C43.1695502,12.9064642 43.8026644,12.8984501 44.1981004,13.2840001 C44.5935363,13.6695502 44.6015505,14.3026644 44.2160004,14.6981004 L24.7160004,34.6981004 C24.3235306,35.1006335 23.6764699,35.1006335 23.2840001,34.6981004 L3.78400011,14.6981004 C3.39845005,14.3026644 3.40646416,13.6695502 3.80190012,13.2840001 C4.19733607,12.8984501 4.83045033,12.9064642 5.21600039,13.3019001 L23.9990003,32.5660003 L42.7840001,13.3019001 Z" id="path5" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero" transform="translate(24.000000, 24.000000) scale(-1, 1) rotate(-90.000000) translate(-24.000000, -24.000000) "></path>
+    </g>
+</svg>`
+}
+
+const rightIcon = (color = '#191919') => {
+  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 48 48" version="1.1">
+    <title>ic_public_right_arrow</title>
+    <g id="ic_public_right_arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M1.5054679,23.9816777 C1.5054679,20.4665945 1.49316512,16.9515113 1.5054679,13.4364281 C1.49839598,11.7354825 1.70745964,10.0405302 2.1276372,8.39228371 C3.04858836,4.90356362 5.32108808,2.83317961 8.80629066,2.0299831 C10.5538164,1.65241445 12.3387234,1.4755157 14.1263654,1.50272062 C20.8671186,1.50272062 27.6084577,1.50272062 34.3503826,1.50272062 C36.0530469,1.49215117 37.7507765,1.68688567 39.4068263,2.08270935 C42.9974813,2.96148015 45.1522258,5.23573899 45.9729972,8.81409369 C46.3419987,10.5052846 46.5182902,12.2328244 46.4985018,13.9636906 C46.4985018,20.7770935 46.4985018,27.5910823 46.4985018,34.405657 C46.5077071,36.0919093 46.3135624,37.7731207 45.920271,39.412893 C45.0415008,43.0053081 42.7566983,45.1495088 39.1783461,45.9702807 C37.4305962,46.3464204 35.6458526,46.5233029 33.8582713,46.4975432 C27.1456387,46.4975432 20.433592,46.4975432 13.7221311,46.4975432 C12.0064517,46.5115465 10.2952822,46.3197774 8.62526401,45.9263422 C5.01879113,45.0475714 2.85350138,42.7627673 2.03448756,39.1668372 C1.61619295,37.3389939 1.5054679,35.505878 1.5054679,33.6569443 C1.5054679,30.4324413 1.5054679,27.2073524 1.5054679,23.9816777 Z" id="path1" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero"></path>
+        <path d="M1.5054679,23.9816777 C1.5054679,20.4665945 1.49316512,16.9515113 1.5054679,13.4364281 C1.49839598,11.7354825 1.70745964,10.0405302 2.1276372,8.39228371 C3.04858836,4.90356362 5.32108808,2.83317961 8.80629066,2.0299831 C10.5538164,1.65241445 12.3387234,1.4755157 14.1263654,1.50272062 C20.8671186,1.50272062 27.6084577,1.50272062 34.3503826,1.50272062 C36.0530469,1.49215117 37.7507765,1.68688567 39.4068263,2.08270935 C42.9974813,2.96148015 45.1522258,5.23573899 45.9729972,8.81409369 C46.3419987,10.5052846 46.5182902,12.2328244 46.4985018,13.9636906 C46.4985018,20.7770935 46.4985018,27.5910823 46.4985018,34.405657 C46.5077071,36.0919093 46.3135624,37.7731207 45.920271,39.412893 C45.0415008,43.0053081 42.7566983,45.1495088 39.1783461,45.9702807 C37.4305962,46.3464204 35.6458526,46.5233029 33.8582713,46.4975432 C27.1456387,46.4975432 20.433592,46.4975432 13.7221311,46.4975432 C12.0064517,46.5115465 10.2952822,46.3197774 8.62526401,45.9263422 C5.01879113,45.0475714 2.85350138,42.7627673 2.03448756,39.1668372 C1.61619295,37.3389939 1.5054679,35.505878 1.5054679,33.6569443 C1.5054679,30.4324413 1.5054679,27.2073524 1.5054679,23.9816777 Z" id="path2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-rule="nonzero"></path>
+        <circle id="path3" fill-opacity="0" fill="#FFFFFF" cx="24" cy="24" r="24"></circle>
+        <polyline id="path4" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(24.000000, 24.000000) rotate(-90.000000) translate(-24.000000, -24.000000) " points="4.5 14 24 34 43.5 14"></polyline>
+        <path d="M42.7840001,13.3019001 C43.1695502,12.9064642 43.8026644,12.8984501 44.1981004,13.2840001 C44.5935363,13.6695502 44.6015505,14.3026644 44.2160004,14.6981004 L24.7160004,34.6981004 C24.3235306,35.1006335 23.6764699,35.1006335 23.2840001,34.6981004 L3.78400011,14.6981004 C3.39845005,14.3026644 3.40646416,13.6695502 3.80190012,13.2840001 C4.19733607,12.8984501 4.83045033,12.9064642 5.21600039,13.3019001 L23.9990003,32.5660003 L42.7840001,13.3019001 Z" id="path5" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero" transform="translate(24.000000, 24.000000) rotate(-90.000000) translate(-24.000000, -24.000000) "></path>
+    </g>
+</svg>`
+}
+
+// base64的方法生成的pageIcon,点击切换,色值无法自适应。
+// 只有path路径会自适应pageIconColor、pageIconInactiveColor
+const iconBase64 = (color, position) => {
+  const div = document.createElement('div')
+  div.insertAdjacentHTML('beforeend', position === 'left' ? leftIcon(color) : rightIcon(color))
+  const svg = div.children[0]
+  const svgString = new XMLSerializer().serializeToString(svg)
+  const imgBase64 = `image://data:image/svg+xml;base64,${window.btoa(svgString)}`
+  return imgBase64
+}
+
+const pageIconArr = [
+  'path://M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0',
+  'path://M711.6 488.624L355.2 152.976a29.36 29.36 0 0 0-42.352 0 31.408 31.408 0 0 0 0 43.552L647.76 512 312.848 827.36a31.408 31.408 0 0 0 0 43.552 29.36 29.36 0 0 0 42.352 0l356.4-335.648a36.32 36.32 0 0 0 0-46.64z'
+]
+
+export { iconBase64, pageIconArr }
diff --git a/packages/vue/src/chart/chart-core/base/option/config/legend/position.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/position.ts
new file mode 100644
index 000000000..660213437
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/legend/position.ts
@@ -0,0 +1,8 @@
+function position(legend, selfLegend) {
+  legend.top = selfLegend.position.top || 'auto'
+  legend.left = selfLegend.position.left || 'auto'
+  legend.right = selfLegend.position.right || 'auto'
+  legend.bottom = selfLegend.position.bottom || 'auto'
+}
+
+export default position
diff --git a/packages/vue/src/chart/chart-core/base/option/config/legend/size.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/size.ts
new file mode 100644
index 000000000..da20339b1
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/legend/size.ts
@@ -0,0 +1,6 @@
+function size(legend, selfLegend) {
+  legend.width = selfLegend.width || 'auto'
+  legend.height = selfLegend.height || 'auto'
+}
+
+export default size
diff --git a/packages/vue/src/chart/chart-core/base/option/config/legend/textStyle.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/textStyle.ts
new file mode 100644
index 000000000..9559021c1
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/legend/textStyle.ts
@@ -0,0 +1,6 @@
+export default function textStyle(legend, textStyle) {
+  if (textStyle) {
+    legend.textStyle.rich = Object.assign(legend.textStyle.rich, textStyle.rich)
+    legend.textStyle = Object.assign(legend.textStyle, textStyle)
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/option/config/mark/index.ts b/packages/vue/src/chart/chart-core/base/option/config/mark/index.ts
new file mode 100644
index 000000000..28a79864d
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/mark/index.ts
@@ -0,0 +1,34 @@
+import Theme from '../../../feature/token'
+
+export function getMarkLineDefault() {
+  return {
+    symbol: 'none',
+    silent: true,
+    label: {
+      show: false
+    },
+    lineStyle: {
+      width: Theme.config.markLineWidth
+    },
+    emphasis: {
+      label: {
+        show: false
+      },
+      lineStyle: {
+        width: Theme.config.markLineEmphasisWidth
+      }
+    },
+    data: []
+  }
+}
+
+export function getMarkPointDefault() {
+  return {
+    symbol: 'path://M50 0 L0 50 L100 50 Z',
+    symbolSize: [10, 6],
+    label: {
+      color: Theme.config.markPointLabelColor
+    },
+    data: []
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/base/option/config/polar/base.ts b/packages/vue/src/chart/chart-core/base/option/config/polar/base.ts
new file mode 100644
index 000000000..1866a562e
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/polar/base.ts
@@ -0,0 +1,15 @@
+import cloneDeep from '../../../util/cloneDeep'
+
+const basePolar = {
+  center: ['50%', '50%'],
+  radius: ['8%', '70%']
+}
+
+function base(position, chartName) {
+  const PolarOption = cloneDeep(basePolar)
+  PolarOption.center = (position && position.center) || basePolar.center
+  PolarOption.radius = (position && position.radius) || basePolar.radius
+  return PolarOption
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/polar/index.ts b/packages/vue/src/chart/chart-core/base/option/config/polar/index.ts
new file mode 100644
index 000000000..401ed9582
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/polar/index.ts
@@ -0,0 +1,22 @@
+import base from './base'
+
+function polar(iChartOption, chartName) {
+  const { position } = iChartOption
+  let polarOption = base(position, chartName)
+  switch (chartName) {
+    case 'PolarBarChart':
+      break
+    case 'JadeJueChart':
+      polarOption.radius = ['20%', '60%']
+      break
+    case 'CircleProcessChart':
+      polarOption.radius = ['44%', '50%']
+      break
+    default:
+      polarOption = undefined
+      break
+  }
+  return polarOption
+}
+
+export default polar
diff --git a/packages/vue/src/chart/chart-core/base/option/config/polarTitle/base.ts b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/base.ts
new file mode 100644
index 000000000..84a34500d
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/base.ts
@@ -0,0 +1,29 @@
+import Theme from '../../../feature/token'
+
+function getBaseTitle() {
+  return {
+    text: '',
+    subtext: '',
+    top: 'center',
+    left: 'center',
+    itemGap: Theme.config.titleItemGap,
+    textStyle: {
+      color: Theme.config.titleTextColor,
+      fontSize: Theme.config.titleTextFontSize,
+      lineHeight: 28,
+      fontWeight: 'normal'
+    },
+    subtextStyle: {
+      color: Theme.config.titleSubTextColor,
+      fontSize: Theme.config.titleSubtextFontSize,
+      lineHeight: 24,
+      fontWeight: 'normal'
+    }
+  }
+}
+
+function base() {
+  return getBaseTitle()
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/polarTitle/index.ts b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/index.ts
new file mode 100644
index 000000000..769813040
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/index.ts
@@ -0,0 +1,40 @@
+import base from './base'
+import textStyle from './textStyle'
+import subtextStyle from './subtextStyle'
+
+function title(iChartOption) {
+  const { text, title } = iChartOption
+  if (!title && !text) return {}
+  const titleOption = base()
+  // 传入title时忽略旧属性text
+  if (title) {
+    Object.assign(titleOption, title)
+    return titleOption
+  }
+  // 旧属性text
+  const { main: pieMain, sub: pieSub, position: textPosition, itemGap } = text
+  // 兼容旧属性text
+  titleOption.textAlign = 'center'
+  titleOption.left = '49.5%'
+  // 设置标题文本
+  titleOption.text = pieMain?.text || text?.text || ''
+  // 设置标题文本
+  titleOption.subtext = pieSub?.text || text?.subtext || ''
+  // 设置主副文本间距
+  if (itemGap) {
+    titleOption.itemGap = itemGap
+  }
+  // 配置标题样式
+  textStyle(titleOption, pieMain)
+  // 配置副标题样式
+  subtextStyle(titleOption, pieSub)
+  // 兼容所有的title属性
+  Object.assign(titleOption, text)
+  // 设置位置
+  if (textPosition) {
+    Object.assign(titleOption, textPosition)
+  }
+  return titleOption
+}
+
+export default title
diff --git a/packages/vue/src/chart/chart-core/base/option/config/polarTitle/subtextStyle.ts b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/subtextStyle.ts
new file mode 100644
index 000000000..dc361ef4d
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/subtextStyle.ts
@@ -0,0 +1,10 @@
+function subtextStyle(titleOption, pieSub) {
+  if (pieSub?.textSize) {
+    titleOption.subtextStyle.fontSize = pieSub.textSize
+    titleOption.subtextStyle.color = pieSub.color || titleOption.subtextStyle.color
+    titleOption.subtextStyle.fontWeight = pieSub.fontWeight || 'normal'
+    titleOption.subtextStyle.lineHeight = pieSub.textSize * 1.2
+  }
+}
+
+export default subtextStyle
diff --git a/packages/vue/src/chart/chart-core/base/option/config/polarTitle/textStyle.ts b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/textStyle.ts
new file mode 100644
index 000000000..3858a201a
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/textStyle.ts
@@ -0,0 +1,11 @@
+function textStyle(titleOption, pieMain) {
+  if (pieMain?.textSize) {
+    titleOption.textStyle.fontSize = pieMain.textSize
+    titleOption.textStyle.color = pieMain.color || titleOption.textStyle.color
+    titleOption.textStyle.fontWeight = pieMain.fontWeight || 'normal'
+    titleOption.textStyle.lineHeight = Number(pieMain.textSize)
+  }
+  Object.assign(titleOption.textStyle, pieMain)
+}
+
+export default textStyle
diff --git a/packages/vue/src/chart/chart-core/base/option/config/radiusAxis/base.ts b/packages/vue/src/chart/chart-core/base/option/config/radiusAxis/base.ts
new file mode 100644
index 000000000..83378d22b
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/radiusAxis/base.ts
@@ -0,0 +1,45 @@
+import Theme from '../../../feature/token'
+
+function getBaseRadiusAxis() {
+  return {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: Theme.config.radiusAxisLineColor,
+        width: Theme.config.radiusAxisLineWidth,
+        type: Theme.config.radiusAxisLineType
+      }
+    },
+    axisTick: {
+      length: 5,
+      show: false,
+      lineStyle: {
+        color: Theme.config.radiusAxisTickLineColor,
+        width: Theme.config.radiusAxisTickLineWidth,
+        type: Theme.config.radiusAxisTickLineType
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: Theme.config.radiusAxisLabelColor,
+      fontSize: Theme.config.radiusAxisLabelFontSize,
+      align: 'right',
+      margin: Theme.config.radiusAxisLabelGap * 5,
+      interval: 0
+    },
+    splitLine: {
+      lineStyle: {
+        type: Theme.config.radiusAxisSplitLineType,
+        color: Theme.config.radiusAxisSplitLineColor,
+        width: Theme.config.radiusAxisSplitLineWidth
+      }
+    }
+  }
+}
+
+function base(chartName) {
+  const radiusAxisOption = getBaseRadiusAxis()
+  return radiusAxisOption
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/radiusAxis/index.ts b/packages/vue/src/chart/chart-core/base/option/config/radiusAxis/index.ts
new file mode 100644
index 000000000..64c602b64
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/radiusAxis/index.ts
@@ -0,0 +1,29 @@
+import base from './base'
+import merge from '../../../util/merge'
+import Theme from '../../../feature/token'
+
+function radiusAxis(iChartOption, chartName) {
+  let radiusAxisOpt
+  switch (chartName) {
+    case 'JadeJueChart':
+      radiusAxisOpt = base(chartName)
+      break
+    case 'PolarBarChart':
+      radiusAxisOpt = base(chartName)
+      radiusAxisOpt.axisLabel.margin = Theme.config.radiusAxisLabelGap
+      merge(radiusAxisOpt, iChartOption.radiusAxis)
+      break
+    case 'CircleProcessChart':
+      radiusAxisOpt = {
+        type: 'category',
+        show: false
+      }
+      break
+    default:
+      break
+  }
+
+  return radiusAxisOpt
+}
+
+export default radiusAxis
diff --git a/packages/vue/src/chart/chart-core/base/option/config/rectTitle/base.ts b/packages/vue/src/chart/chart-core/base/option/config/rectTitle/base.ts
new file mode 100644
index 000000000..199195358
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/rectTitle/base.ts
@@ -0,0 +1,20 @@
+import Theme from '../../../feature/token'
+
+// 直角坐标系中的title用于y轴名称
+function getBaseOption() {
+  return {
+    text: '',
+    textStyle: {
+      fontWeight: 'normal',
+      color: Theme.config.yAxisNameColor,
+      fontSize: Theme.config.yAxisNameFontSize
+    },
+    padding: [0, 0, 0, 0]
+  }
+}
+
+function base() {
+  return getBaseOption()
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/rectTitle/index.ts b/packages/vue/src/chart/chart-core/base/option/config/rectTitle/index.ts
new file mode 100644
index 000000000..b8882dfbe
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/rectTitle/index.ts
@@ -0,0 +1,43 @@
+import base from './base'
+import { getTextWidth } from '../../../util/dom'
+import merge from '../../../util/merge'
+import completePadding from './titlePadding'
+
+/**
+ * 配置纵轴名称
+ */
+function title(iChartOption, chartName, nameTextStyle = {}) {
+  let name = ''
+  if (iChartOption.yAxisName) {
+    name = iChartOption.yAxisName
+  }
+  if (iChartOption.yAxis && iChartOption.yAxis.name) {
+    name = iChartOption.yAxis.name
+  }
+  if (iChartOption.yAxis && iChartOption.yAxis.length === 1 && iChartOption.yAxis[0].name) {
+    name = iChartOption.yAxis[0].name
+  }
+  let theme = iChartOption.theme
+  let padding = iChartOption.padding
+  let title = base(theme)
+  // 名称
+  title.text = name
+  // 如果图表为柱状图，并且为横向
+  if (chartName === 'BarChart' && iChartOption.direction === 'horizontal') {
+    const nameLength = getTextWidth(name, 12)
+    title.right = padding[1] - nameLength - 24
+    title.bottom = padding[2]
+    title.textAlign = 'left'
+  } else {
+    // 位置
+    title.padding[0] = padding[0] - 30
+    title.padding[3] = padding[3]
+  }
+  // y轴文本的样式需要合并到title配置上
+  merge(title.textStyle, nameTextStyle)
+  merge(title.padding, completePadding(nameTextStyle.padding))
+  delete title.textStyle.padding
+  return title
+}
+
+export default title
diff --git a/packages/vue/src/chart/chart-core/base/option/config/rectTitle/titlePadding.ts b/packages/vue/src/chart/chart-core/base/option/config/rectTitle/titlePadding.ts
new file mode 100644
index 000000000..3c42fc137
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/rectTitle/titlePadding.ts
@@ -0,0 +1,25 @@
+/**
+ * 当只有一个yAxis时，会转为使用title属性。
+ * 默认title.padding为[20,0,0,20]
+ * 默认yAxis.nameTextStyle.padding为[0,0,0,0]
+ * 因此对padding值需要进行处理
+ * @param {*} padding
+ * @returns
+ */
+const completePadding = (padding) => {
+  let titlePadding = []
+  if (!padding || padding.length === 0) {
+    titlePadding = [20, 0, 0, 20]
+  } else if (padding.length === 1) {
+    titlePadding = [padding[0] + 20, padding[0], padding[0], padding[0] + 20]
+  } else if (padding.length === 2) {
+    titlePadding = [padding[0] + 20, padding[1], padding[0], padding[1] + 20]
+  } else if (padding.length === 3) {
+    titlePadding = [padding[0] + 20, padding[1], padding[2], padding[1] + 20]
+  } else {
+    titlePadding = [padding[0] + 20, padding[1], padding[2], padding[3] + 20]
+  }
+  return titlePadding
+}
+
+export default completePadding
diff --git a/packages/vue/src/chart/chart-core/base/option/config/tooltip/axisPointer.ts b/packages/vue/src/chart/chart-core/base/option/config/tooltip/axisPointer.ts
new file mode 100644
index 000000000..f296a053e
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/tooltip/axisPointer.ts
@@ -0,0 +1,19 @@
+import Theme from '../../../feature/token'
+
+function axisPointer(tooltip, chartName) {
+  switch (chartName) {
+    case 'ProcessBarChart':
+    case 'BarChart':
+      tooltip.axisPointer = {
+        type: 'shadow',
+        shadowStyle: {
+          color: Theme.config.tooltipAxisPointerShadowColor
+        }
+      }
+      break
+    default:
+      break
+  }
+}
+
+export default axisPointer
diff --git a/packages/vue/src/chart/chart-core/base/option/config/tooltip/base.ts b/packages/vue/src/chart/chart-core/base/option/config/tooltip/base.ts
new file mode 100644
index 000000000..509ea766d
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/tooltip/base.ts
@@ -0,0 +1,50 @@
+import Theme from '../../../feature/token'
+
+const chartType = [
+  'CircleProcessChart',
+  'GaugeChart',
+  'RadarChart',
+  'FunnelChart',
+  'JadeJueChart',
+  'LiquidfillChart',
+  'PieChart',
+  'PolarBarChart',
+  'SunburstChart'
+]
+
+function getbaseOption(chartName) {
+  const trigger = chartName && chartType.includes(chartName) ? 'item' : 'axis'
+  return {
+    trigger,
+    confine: true,
+    borderRadius: Theme.config.tooltipBorderRaduis,
+    axisPointer: {
+      z: 0,
+      type: 'line',
+      lineStyle: {
+        type: Theme.config.tooltipAxisPointerLineType,
+        width: Theme.config.tooltipAxisPointerLineWidth,
+        color: Theme.config.tooltipAxisPointerLineColor
+      },
+      shadowStyle: {
+        color: Theme.config.tooltipAxisPointerShadowColor
+      }
+    },
+    textStyle: {
+      color: Theme.config.tooltipTextColor,
+      fontSize: Theme.config.tooltipTextFontSize
+    },
+    borderWidth: Theme.config.tooltipBorderWidth,
+    padding: Theme.config.tooltipPadding,
+    backgroundColor: Theme.config.tooltipBg,
+    formatter: undefined,
+    extraCssText: `box-shadow:0 ${Theme.config.tooltipShadowOffsetY}px 
+    ${Theme.config.tooltipShadowBlur}px 0 ${Theme.config.tooltipShadowColor};`
+  }
+}
+
+function base(chartName) {
+  return getbaseOption(chartName)
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/tooltip/index.ts b/packages/vue/src/chart/chart-core/base/option/config/tooltip/index.ts
new file mode 100644
index 000000000..985c760c3
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/tooltip/index.ts
@@ -0,0 +1,24 @@
+import base from './base'
+import axisPointer from './axisPointer'
+import merge from '../../../util/merge'
+
+/**
+ * tipHtml 和 tipHtmlStyle 为旧属性，后续逐步废弃
+ */
+function tooltip(iChartOption, chartName) {
+  const formatter = iChartOption.tipHtml
+  const formatterStyle = iChartOption.tipHtmlStyle
+  const tooltip = base(chartName)
+  if (formatter) {
+    tooltip.formatter = formatter
+  }
+  if (formatterStyle) {
+    tooltip.padding = formatterStyle.padding || tooltip.padding
+    tooltip.backgroundColor = formatterStyle.backgroundColor || tooltip.backgroundColor
+  }
+  axisPointer(tooltip, chartName)
+  merge(tooltip, iChartOption.tooltip)
+  return tooltip
+}
+
+export default tooltip
diff --git a/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisLabel.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisLabel.ts
new file mode 100644
index 000000000..6a795a334
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisLabel.ts
@@ -0,0 +1,17 @@
+// 坐标轴刻度
+function axisLabel(xAxisUnit, xAxisItem, iChartOption) {
+  // 自定义formatter
+  xAxisUnit.axisLabel.formatter = xAxisItem.formatter || undefined
+  // 显示间隔
+  xAxisUnit.axisLabel.interval = iChartOption.xAxisInterval || xAxisItem.interval
+  // 旋转角度
+  xAxisUnit.axisLabel.rotate = iChartOption.xAxisLabelRotate || xAxisItem.labelRotate
+  // 超出省略
+  if (iChartOption.xAxisEllipsis || xAxisItem.ellipsis) {
+    const xEllipsis = iChartOption.xAxisEllipsis || xAxisItem.ellipsis
+    xAxisUnit.axisLabel.overflow = xEllipsis.overflow || 'none'
+    xAxisUnit.axisLabel.width = xEllipsis.labelWidth
+  }
+}
+
+export default axisLabel
diff --git a/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisLine.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisLine.ts
new file mode 100644
index 000000000..4de804900
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisLine.ts
@@ -0,0 +1,18 @@
+function axisLine(xAxisUnit, xAxisItem, iChartOption) {
+  if (iChartOption.xAxisLine || xAxisItem.line) {
+    const xAxisLine = iChartOption.xAxisLine || xAxisItem.line
+    if (xAxisLine.show === false) {
+      xAxisUnit.axisLine.show = false
+      xAxisUnit.axisTick.show = false
+      xAxisUnit.axisLabel.show = false
+    }
+    if (xAxisLine.lineStyle) {
+      Object.assign(xAxisUnit.axisLine.lineStyle, xAxisLine.lineStyle)
+    }
+    if (xAxisLine.textStyle) {
+      Object.assign(xAxisUnit.axisLabel, xAxisLine.textStyle)
+    }
+  }
+}
+
+export default axisLine
diff --git a/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisMargin.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisMargin.ts
new file mode 100644
index 000000000..56d5e4ee5
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisMargin.ts
@@ -0,0 +1,19 @@
+function axisMargin(xAxisUnit, xAxisItem, iChartOption) {
+  if (xAxisItem && xAxisItem.axisMargin) {
+    let axisMargin = xAxisItem.axisMargin
+    let min = axisMargin.left
+    let max = axisMargin.right
+    if (min) {
+      xAxisUnit.min = function (value) {
+        return value.min - min
+      }
+    }
+    if (max) {
+      xAxisUnit.max = function (value) {
+        return value.max + max
+      }
+    }
+  }
+}
+
+export default axisMargin
diff --git a/packages/vue/src/chart/chart-core/base/option/config/xAxis/base.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/base.ts
new file mode 100644
index 000000000..14a292f3b
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/xAxis/base.ts
@@ -0,0 +1,54 @@
+import Theme from '../../../feature/token'
+
+function getBaseOption() {
+  return {
+    data: [],
+    // 坐标轴类型
+    type: 'category',
+    // 坐标轴两边留白策略
+    boundaryGap: true,
+    // 坐标轴在grid区域中分隔线
+    splitLine: {
+      show: false,
+      lineStyle: {
+        width: Theme.config.xAxisSplitLineWidth,
+        color: Theme.config.xAxisSplitLineColor,
+        type: Theme.config.xAxisSplitLineType
+      }
+    },
+    // 坐标轴名称样式配置
+    nameTextStyle: {
+      color: Theme.config.xAxisNameColor,
+      fontSize: Theme.config.xAxisNameFontSize
+    },
+    // 坐标轴线配置
+    axisLine: {
+      lineStyle: {
+        width: Theme.config.xAxisLineWidth,
+        color: Theme.config.xAxisLineColor,
+        type: Theme.config.xAxisLineType
+      }
+    },
+    // 坐标轴刻度配置
+    axisTick: {
+      alignWithLabel: true,
+      lineStyle: {
+        width: Theme.config.xAxisTickLineWidth,
+        color: Theme.config.xAxisTickLineColor,
+        type: Theme.config.xAxisTickLineType
+      }
+    },
+    // 坐标轴刻度标签配置
+    axisLabel: {
+      color: Theme.config.xAxisLabelColor,
+      fontSize: Theme.config.xAxisLabelFontSize
+    }
+  }
+}
+
+function base() {
+  const option = getBaseOption()
+  return option
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/xAxis/boundaryGap.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/boundaryGap.ts
new file mode 100644
index 000000000..3f8196994
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/xAxis/boundaryGap.ts
@@ -0,0 +1,6 @@
+function boundaryGap(xAxisUnit, xAxisItem, iChartOption) {
+  let xAxisFullGrid = iChartOption.xAxisFullGrid || xAxisItem.fullGrid
+  xAxisUnit.boundaryGap = xAxisFullGrid !== true
+}
+
+export default boundaryGap
diff --git a/packages/vue/src/chart/chart-core/base/option/config/xAxis/index.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/index.ts
new file mode 100644
index 000000000..b936ba7b6
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/xAxis/index.ts
@@ -0,0 +1,34 @@
+import base from './base'
+import name from './name'
+import axisLine from './axisLine'
+import axisLabel from './axisLabel'
+import axisMargin from './axisMargin'
+import boundaryGap from './boundaryGap'
+import merge from '../../../util/merge'
+import { toArray } from '../../../util/type'
+
+function xAxis(iChartOpt, chartName) {
+  let xAxisResult = iChartOpt.xAxis || {}
+  xAxisResult = toArray(xAxisResult).map((xAxisItem) => {
+    const xAxisUnit = base()
+    // 坐标轴名称
+    name(xAxisUnit, xAxisItem, iChartOpt)
+    // 坐标轴两边留白策略
+    boundaryGap(xAxisUnit, xAxisItem, iChartOpt)
+    // 刻度标签
+    axisLabel(xAxisUnit, xAxisItem, iChartOpt)
+    // 坐标轴刻度
+    axisLine(xAxisUnit, xAxisItem, iChartOpt)
+    // 坐标轴前后留白
+    axisMargin(xAxisUnit, xAxisItem, iChartOpt)
+    // 覆盖属性
+    merge(xAxisUnit, xAxisItem)
+    return xAxisUnit
+  })
+  return xAxisResult
+}
+
+/**
+ * 配置横轴样式
+ */
+export default xAxis
diff --git a/packages/vue/src/chart/chart-core/base/option/config/xAxis/name.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/name.ts
new file mode 100644
index 000000000..10633ea58
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/xAxis/name.ts
@@ -0,0 +1,7 @@
+function name(xAxisUnit, xAxisItem, iChartOpt) {
+  xAxisUnit.name = iChartOpt.xAxisName || xAxisItem.name
+  xAxisUnit.nameLocation = xAxisItem.nameLocation || 'end'
+  xAxisUnit.nameTextStyle = Object.assign(xAxisUnit.nameTextStyle, xAxisItem.nameTextStyle)
+}
+
+export default name
diff --git a/packages/vue/src/chart/chart-core/base/option/config/xAxis/xdata.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/xdata.ts
new file mode 100644
index 000000000..135d4d673
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/xAxis/xdata.ts
@@ -0,0 +1,12 @@
+/**
+ * 从数据中拿出x轴的坐标数据
+ */
+function xdata(data, xAxisKey) {
+  const xAxisData = []
+  data.forEach((item) => {
+    xAxisData.push(item[xAxisKey])
+  })
+  return xAxisData
+}
+
+export default xdata
diff --git a/packages/vue/src/chart/chart-core/base/option/config/xAxis/xkey.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/xkey.ts
new file mode 100644
index 000000000..e1917f64d
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/xAxis/xkey.ts
@@ -0,0 +1,9 @@
+function xkey(iChartOption) {
+  let xAxisKey
+  iChartOption.xAxis.forEach((xAxisItem) => {
+    xAxisKey = xAxisItem.keyName
+  })
+  return xAxisKey
+}
+
+export default xkey
diff --git a/packages/vue/src/chart/chart-core/base/option/config/yAxis/base.ts b/packages/vue/src/chart/chart-core/base/option/config/yAxis/base.ts
new file mode 100644
index 000000000..885ee9193
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/yAxis/base.ts
@@ -0,0 +1,47 @@
+import Theme from '../../../feature/token'
+
+function getBaseOption() {
+  return {
+    type: 'value',
+    axisLine: {
+      show: false,
+      lineStyle: {
+        width: Theme.config.yAxisLineWidth,
+        type: Theme.config.yAxisLineType,
+        color: Theme.config.yAxisLineColor
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        width: Theme.config.yAxisTickLineWidth,
+        type: Theme.config.yAxisTickLineType,
+        color: Theme.config.yAxisTickLineColor
+      }
+    },
+    axisLabel: {
+      color: Theme.config.yAxisLabelColor,
+      fontSize: Theme.config.yAxisLabelFontSize
+    },
+    nameTextStyle: {
+      color: Theme.config.yAxisNameColor,
+      fontSize: Theme.config.yAxisNameFontSize
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        width: Theme.config.yAxisSplitLineWidth,
+        type: Theme.config.yAxisSplitLineType,
+        color: Theme.config.yAxisSplitLineColor
+      },
+      minInterval: undefined,
+      maxInterval: undefined
+    }
+  }
+}
+
+function base() {
+  return getBaseOption()
+}
+
+export default base
diff --git a/packages/vue/src/chart/chart-core/base/option/config/yAxis/index.ts b/packages/vue/src/chart/chart-core/base/option/config/yAxis/index.ts
new file mode 100644
index 000000000..e7e447f72
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/yAxis/index.ts
@@ -0,0 +1,70 @@
+import base from './base'
+import title from '../rectTitle'
+import { isArray } from '../../../util/type'
+import fluctuation from '../../../feature/fluctuation/index'
+import { transformData } from '../../../feature/fluctuation/index'
+import merge from '../../../util/merge'
+
+function yAxis(baseOpt, iChartOpt, chartName) {
+  let yAxisOpt = iChartOpt.yAxis
+  const yAxisName = iChartOpt.yAxisName
+  const data = iChartOpt.data
+  if (!isArray(yAxisOpt)) {
+    yAxisOpt = [yAxisOpt]
+  }
+  if (isNeedTitle(yAxisOpt, yAxisName)) {
+    baseOpt.title = title(iChartOpt, chartName, yAxisOpt[0]?.nameTextStyle)
+  }
+  // 循环y轴配置
+  const yAxis = []
+  yAxisOpt.forEach((item, index) => {
+    let temp = base()
+    if (item && item.unit) {
+      temp.axisLabel.formatter = `{value} ${item.unit}`
+    }
+    if (item && item.formatter) {
+      temp.axisLabel.formatter = item.formatter
+    }
+    if (item && item.name) {
+      item.nameTextStyle = Object.assign(temp.nameTextStyle, item.nameTextStyle)
+    }
+    if (item && item.labelTextStyle) {
+      item.labelTextStyle = Object.assign(temp.axisLabel, item.labelTextStyle)
+    }
+    if (item && item.splitLine) {
+      item.splitLine = Object.assign(temp.splitLine, item.splitLine)
+    }
+    // 静态给定y轴优化范围
+    if (item && item.fluctuation === true) {
+      const newdata = transformData(data)
+      const value = fluctuation(newdata)
+      temp.min = value[0]
+      temp.max = value[1]
+    }
+    // 动态优化y轴范围
+    if (item && item.allowRange) {
+      const newdata = transformData(data)
+      const value = fluctuation(newdata, item.allowRange)
+      temp.min = value[0]
+      temp.max = value[1]
+    }
+    temp = merge(temp, item)
+    if (index === 0 && yAxisOpt.length === 1 && temp.position !== 'right') {
+      delete temp.name
+    }
+    yAxis.push(temp)
+  })
+  return yAxis
+}
+
+function isNeedTitle(yAxisOpt, yAxisName) {
+  if (yAxisName) {
+    return true
+  }
+  if (yAxisOpt.length === 1 && yAxisOpt[0] && yAxisOpt[0].position !== 'right') {
+    return true
+  }
+  return false
+}
+
+export default yAxis
diff --git a/packages/vue/src/chart/chart-core/base/option/config/yAxis/ydata.ts b/packages/vue/src/chart/chart-core/base/option/config/yAxis/ydata.ts
new file mode 100644
index 000000000..f544b51c9
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/config/yAxis/ydata.ts
@@ -0,0 +1,17 @@
+/**
+ * 从数据中拿出y轴的坐标数据
+ */
+function ydata(data, legendData) {
+  const seriesData = {}
+  legendData.forEach((legend) => {
+    seriesData[legend] = []
+  })
+  data.forEach((item) => {
+    legendData.forEach((legend) => {
+      seriesData[legend].push(item[legend])
+    })
+  })
+  return seriesData
+}
+
+export default ydata
diff --git a/packages/vue/src/chart/chart-core/base/option/init/index.ts b/packages/vue/src/chart/chart-core/base/option/init/index.ts
new file mode 100644
index 000000000..4155ad945
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/option/init/index.ts
@@ -0,0 +1,148 @@
+import { isArray, isString } from '../../util/type'
+import Theme, { THEMES } from '../../feature/token'
+
+/**
+ * 设置默认主题
+ * @param {外部传入的配置} iChartOption
+ */
+function setDefaultTheme(iChartOption) {
+  iChartOption.theme = iChartOption.theme || Theme.themeName || THEMES.LIGHT
+}
+
+/**
+ * 设置默认颜色集合
+ * @param {外部传入的配置} iChartOption
+ */
+function setDefaultColor(iChartOption) {
+  if (!iChartOption.color) {
+    iChartOption.color = Theme.config.colorGroup
+  }
+}
+
+/**
+ * 线性图/条形图专用，设置默认x轴Key值,默认取第一个数据的第一个Key
+ * @param {外部传入的配置} iChartOption
+ */
+function setDefaultXAxis(iChartOption) {
+  const data = iChartOption.data
+  let keyName
+  if (data && data.length > 0) {
+    const keys = Object.keys(data[0])
+    if (keys.length > 0) {
+      keyName = keys[0]
+    }
+  }
+  if (isArray(iChartOption.xAxis)) {
+    iChartOption.xAxis.forEach((xAxisItem) => {
+      setXAxisKeyName(xAxisItem, keyName)
+    })
+  } else if (typeof iChartOption.xAxis == 'object') {
+    setXAxisKeyName(iChartOption.xAxis, keyName)
+    iChartOption.xAxis = [iChartOption.xAxis]
+  } else {
+    iChartOption.xAxis = [{ keyName }]
+  }
+}
+
+/**
+ * 给x轴赋值key，兼容旧版本属性
+ */
+function setXAxisKeyName(xAxisItem, defaultKey) {
+  let keyName = defaultKey
+  if (isString(xAxisItem.data)) {
+    keyName = xAxisItem.data
+    delete xAxisItem.data
+  }
+  if (xAxisItem.keyName) {
+    keyName = xAxisItem.keyName
+  }
+  xAxisItem.keyName = keyName
+}
+
+/**
+ * 线性图/条形图专用---设置图表的四周padding值
+ * @param {外部传入的配置} iChartOption
+ */
+function setChartPadding(iChartOption) {
+  const defaultPadding = [50, 20, 50, 20]
+  const padding = iChartOption.padding || iChartOption.chartPadding
+  if (!padding) {
+    iChartOption.padding = defaultPadding
+  } else if (padding.length === 1) {
+    iChartOption.padding = [padding[0], 20, padding[0], 20]
+  } else if (padding.length === 2) {
+    iChartOption.padding = [padding[0], padding[1], padding[0], padding[1]]
+  } else if (padding.length === 3) {
+    iChartOption.padding = [padding[0], padding[1], padding[2], padding[1]]
+  } else {
+    iChartOption.padding = padding
+  }
+  delete iChartOption.chartPadding
+}
+
+/**
+ * 设置图表的Legend属性
+ * @param {外部传入的配置} iChartOption
+ */
+function setDefaultLegend(iChartOption) {
+  if (!iChartOption.legend) {
+    iChartOption.legend = {
+      show: true,
+      position: {
+        left: 'center',
+        bottom: 14
+      },
+      orient: 'horizontal'
+    }
+  }
+  if (iChartOption.legend.show === undefined) {
+    iChartOption.legend.show = false
+  }
+  if (!iChartOption.legend.orient) {
+    iChartOption.legend.orient = 'horizontal'
+  }
+  if (!iChartOption.legend.position) {
+    iChartOption.legend.position = {
+      left: 'center',
+      bottom: 15
+    }
+  }
+}
+
+/**
+ * 设置图表区域缩放功能
+ * @param {外部传入的配置} iChartOption
+ */
+function setDefaultDataZoom(iChartOption) {
+  if (!iChartOption.dataZoom) {
+    iChartOption.dataZoom = {
+      show: false,
+      position: {
+        left: 40,
+        bottom: 18
+      }
+    }
+  }
+  if (iChartOption.dataZoom.show === undefined) {
+    iChartOption.dataZoom.show = false
+  }
+  if (!iChartOption.dataZoom.position) {
+    iChartOption.dataZoom.position = {
+      left: 'center',
+      bottom: 20
+    }
+  }
+}
+
+// 初始化 iChartOption 的默认配置
+function init(iChartOption) {
+  setDefaultTheme(iChartOption)
+  setDefaultColor(iChartOption)
+  setDefaultXAxis(iChartOption)
+  setChartPadding(iChartOption)
+  setDefaultLegend(iChartOption)
+  setDefaultDataZoom(iChartOption)
+  return iChartOption
+}
+
+export default init
diff --git a/packages/vue/src/chart/chart-core/base/register.ts b/packages/vue/src/chart/chart-core/base/register.ts
new file mode 100644
index 000000000..3c053fec0
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/register.ts
@@ -0,0 +1,122 @@
+import LineChart from './components/LineChart'
+import BarChart from './components/BarChart'
+import PieChart from './components/PieChart'
+import RadarChart from './components/RadarChart'
+import GaugeChart from './components/GaugeChart'
+import BubbleChart from './components/BubbleChart'
+import WordCloudChart from './components/WordCloudChart'
+import SankeyChart from './components/SankeyChart'
+import HeatMapChart from './components/HeatMapChart'
+import TreeChart from './components/TreeChart'
+import SunburstChart from './components/SunburstChart'
+import FunnelChart from './components/FunnelChart'
+import LiquidfillChart from './components/LiquidfillChart'
+import BoxplotChart from './components/BoxplotChart'
+import RegionChart from './components/RegionChart'
+import CandlestickChart from './components/CandlestickChart'
+import GraphChart from './components/GraphChart'
+import ProcessChart from './components/ProcessChart'
+
+function Register() {
+  this.registeredComp = {}
+}
+
+function registerComp(options) {
+  this.registeredComp[options.name] = options.component
+}
+
+function getRegisteredComp(name) {
+  if (name in this.registeredComp) {
+    return this.registeredComp[name]
+  }
+  return null
+}
+
+Register.prototype.registerComp = registerComp
+Register.prototype.getRegisteredComp = getRegisteredComp
+
+const register = new Register()
+
+const components = [
+  {
+    name: 'AreaChart',
+    component: LineChart
+  },
+  {
+    name: 'LineChart',
+    component: LineChart
+  },
+  {
+    name: 'BarChart',
+    component: BarChart
+  },
+  {
+    name: 'PieChart',
+    component: PieChart
+  },
+  {
+    name: 'GaugeChart',
+    component: GaugeChart
+  },
+  {
+    name: 'BubbleChart',
+    component: BubbleChart
+  },
+  {
+    name: 'RadarChart',
+    component: RadarChart
+  },
+  {
+    name: 'WordCloudChart',
+    component: WordCloudChart
+  },
+  {
+    name: 'HeatMapChart',
+    component: HeatMapChart
+  },
+  {
+    name: 'SankeyChart',
+    component: SankeyChart
+  },
+  {
+    name: 'TreeChart',
+    component: TreeChart
+  },
+  {
+    name: 'SunburstChart',
+    component: SunburstChart
+  },
+  {
+    name: 'FunnelChart',
+    component: FunnelChart
+  },
+  {
+    name: 'LiquidfillChart',
+    component: LiquidfillChart
+  },
+  {
+    name: 'BoxplotChart',
+    component: BoxplotChart
+  },
+  {
+    name: 'RegionChart',
+    component: RegionChart
+  },
+  {
+    name: 'CandlestickChart',
+    component: CandlestickChart
+  },
+  {
+    name: 'GraphChart',
+    component: GraphChart
+  },
+  {
+    name: 'ProcessChart',
+    component: ProcessChart
+  }
+]
+
+components.forEach((comp) => {
+  register.registerComp(comp)
+})
+export default register
diff --git a/packages/vue/src/chart/chart-core/base/util/centerDom.ts b/packages/vue/src/chart/chart-core/base/util/centerDom.ts
new file mode 100644
index 000000000..92cdbf3ee
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/centerDom.ts
@@ -0,0 +1,80 @@
+import { isString, isArray, isDOM } from './type'
+import { appendHTML, appendDom } from './dom'
+
+export function insertCenterDom(container, option) {
+  if (!option.centerDom) return
+  // 用户传入的中心dom渲染回调
+  const { centerDom } = option
+  let containerWidth = Math.min(container.clientWidth, container.clientHeight)
+  let position = getComputedStyle(container).position
+  if (position === 'static') {
+    container.style.position = 'relative'
+  }
+  // 计算出中心圆宽度
+  let radius = getCenterDomRadius(option)
+  // 生成中心dom的容器
+  let centerDomContainer = createCenterDomContainer(containerWidth, radius)
+  // 生成中心自定义dom
+  let customDom = centerDom(centerDomContainer)
+  isString(customDom) && appendHTML(centerDomContainer, customDom)
+  isDOM(customDom) && appendDom(centerDomContainer, customDom)
+  appendDom(container, centerDomContainer)
+}
+
+export function removeCenterDom(container) {
+  let centerDomContainer = container.getElementsByClassName('hui_center_dom_container')
+  Array.prototype.slice.call(centerDomContainer).forEach((element) => {
+    element.remove()
+  })
+}
+
+export function resizeCenterDom(container, option) {
+  let centerDomContainer = container?.getElementsByClassName('hui_center_dom_container')
+  let containerWidth = Math.min(container?.clientWidth, container?.clientHeight)
+  let radius = getCenterDomRadius(option)
+  if (centerDomContainer) {
+    Array.prototype.slice.call(centerDomContainer).forEach((element) => {
+      setSize(element, radius, containerWidth)
+    })
+  }
+}
+
+const getCenterDomRadius = (option) => {
+  let radius = option.position?.radius || '50%'
+  if (isArray(radius)) {
+    radius = percentToDecimal(radius[0])
+  } else {
+    radius = percentToDecimal(radius) * 0.5
+  }
+  return radius
+}
+
+const createCenterDomContainer = (containerWidth, radius) => {
+  let centerDomContainer = document.createElement('div')
+  centerDomContainer.classList.add('hui_center_dom_container')
+  centerDomContainer.style.cssText = `
+        top: 50%;
+        left: 50%;
+        display: flex;
+        color: #191919;
+        position: absolute;
+        border-radius: 50%;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        transform: translate(-50%, -50%);
+        background: rgb(255, 255, 255);
+        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1)`
+  // 动态计算大小
+  setSize(centerDomContainer, radius, containerWidth)
+  return centerDomContainer
+}
+
+const setSize = (dom, radius, width) => {
+  dom.style.width = width * radius + 'px'
+  dom.style.height = width * radius + 'px'
+}
+
+const percentToDecimal = (percent) => {
+  return parseFloat(percent) / 100
+}
diff --git a/packages/vue/src/chart/chart-core/base/util/cloneDeep.ts b/packages/vue/src/chart/chart-core/base/util/cloneDeep.ts
new file mode 100644
index 000000000..aa185a4f5
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/cloneDeep.ts
@@ -0,0 +1,18 @@
+// 深拷贝
+function cloneDeep(obj) {
+  // 判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
+  const objClone = Array.isArray(obj) ? [] : {}
+  // 进行深拷贝的不能为空，并且是对象或者是数组
+  if (obj && typeof obj === 'object') {
+    for (const key in obj) {
+      if (obj[key] && typeof obj[key] === 'object') {
+        objClone[key] = cloneDeep(obj[key])
+      } else {
+        objClone[key] = obj[key]
+      }
+    }
+  }
+  return objClone
+}
+
+export default cloneDeep
diff --git a/packages/vue/src/chart/chart-core/base/util/color.ts b/packages/vue/src/chart/chart-core/base/util/color.ts
new file mode 100644
index 000000000..902c159a5
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/color.ts
@@ -0,0 +1,144 @@
+/**
+ * 循环取出颜色
+ */
+function getColor(colors, index) {
+  return colors[index % colors.length]
+}
+
+/**
+ * 十六进制转rgba, 如codeToRGB("#6d8ff0",0.5) --> 'rgba(109,143,240,0.5)'
+ */
+function codeToRGB(code, opacity) {
+  if (code === undefined) {
+    return undefined
+  }
+  const result = []
+  result.push(parseInt(code.substring(1, 3), 16))
+  result.push(parseInt(code.substring(3, 5), 16))
+  result.push(parseInt(code.substring(5), 16))
+  return `rgba(${result.join(',')},${opacity})`
+}
+
+/**
+ * rgba转十六进制 codeToHex('rgba(255,0,0,.5)') --> '#fffcfc'
+ * 将red、blue等转换为十六进制
+ */
+function codeToHex(color) {
+  switch (color) {
+    case 'red':
+      return '#ff0000'
+    case 'blue':
+      return '#0000ff'
+    case 'green':
+      return '#00ff00'
+    case 'pink':
+      return '#FFC0CB'
+    case 'yellow':
+      return '#FFFF00'
+    case 'orange':
+      return '#FFA500'
+    case 'black':
+      return '#000000'
+    case 'white':
+      return '#ffffff'
+    case 'gray':
+      return '#808080'
+    case 'purple':
+      return '#800080'
+  }
+  if (color.includes('#')) {
+    if (color.length === 7) {
+      return color
+    } else if (color.length === 4) {
+      return color[0] + color[1] + color[1] + color[2] + color[2] + color[3] + color[3]
+    }
+  }
+  const values = color
+    .replace(/rgba?\(/, '')
+    .replace(/\)/, '')
+    .replace(/[\s+]/g, '')
+    .split(',')
+  const a = parseFloat(values[3] || 1)
+  const r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255)
+  const g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255)
+  const b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
+  return `#${`0${r.toString(16)}`.slice(-2)}${`0${g.toString(16)}`.slice(-2)}${`0${b.toString(16)}`.slice(-2)}`
+}
+
+/**
+ * 修改 'rgba(109,143,240,0.5)' 格式下的颜色透明度
+ */
+function changeRgbaOpacity(rgba, opacity) {
+  const [r, g, b] = rgba.match(/\d+(\.\d+)?/g)
+  return `rgba(${r},${g},${b},${opacity})`
+}
+
+/**
+ * 生成过渡色的方法(c1,c2必须为十六进制颜色 c1为初始颜色，c2为末尾颜色，n表示过渡色数量，返回值为 length === n+2 的数组
+ * 如：colorsBetween('#ff0000', '#ffffff', 10) --> ['#ff0000','#ff1717','#ff2e2e','#ff4646','#ff5d5d','#ff7474','#ff8b8b','#ffa2a2','#ffb9b9','#ffd1d1','#ffe8e8','#ffffff' ]
+ */
+function colorsBetween(c1, c2, n) {
+  const Color = function Color(r, g, b) {
+    this.r = Math.abs(r)
+    this.g = Math.abs(g)
+    this.b = Math.abs(b)
+    if (typeof r === 'string') {
+      function fromHex(str) {
+        return str
+          .substr(1)
+          .match(/.{1,2}/g)
+          .map(function (n) {
+            return parseInt(n, 16)
+          })
+      }
+      const v = fromHex(r)
+      this.r = v[0]
+      this.g = v[1]
+      this.b = v[2]
+    }
+  }
+  Color.prototype.diff = function (c) {
+    return new Color(this.r - c.r, this.g - c.g, this.b - c.b)
+  }
+  Color.prototype.dividedBy = function (n) {
+    return new Color(this.r / n, this.g / n, this.b / n)
+  }
+  Color.prototype.approach = function (c, c2) {
+    return new Color(
+      this.r > c.r ? this.r - c2.r : this.r + c2.r,
+      this.g > c.g ? this.g - c2.g : this.g + c2.g,
+      this.b > c.b ? this.b - c2.b : this.b + c2.b
+    )
+  }
+  Color.prototype.toHex = function () {
+    function pad(n) {
+      const str = `${n}`
+      const pad = '00'
+      return pad.substring(0, pad.length - str.length) + str
+    }
+    const newR = Math.round(this.r).toString(16)
+    const newG = Math.round(this.g).toString(16)
+    const newB = Math.round(this.b).toString(16)
+    return `#${pad(newR)}${pad(newG)}${pad(newB)}`
+  }
+  // 简写16进制变为全写
+  if (c1.length === 4) {
+    c1 = c1[0] + c1[1] + c1[1] + c1[2] + c1[2] + c1[3] + c1[3]
+  }
+  if (c2.length === 4) {
+    c2 = c2[0] + c2[1] + c2[1] + c2[2] + c2[2] + c2[3] + c2[3]
+  }
+  c1 = new Color(c1)
+  c2 = new Color(c2)
+  const diff = c1.diff(c2).dividedBy(n + 1)
+  const out = [c1]
+  for (let i = 0; i < n; i++) {
+    out.push(out[i].approach(c2, diff))
+  }
+  out.push(c2)
+  return out.map(function (c) {
+    return c.toHex()
+  })
+}
+
+export { getColor, codeToRGB, codeToHex, colorsBetween, changeRgbaOpacity }
diff --git a/packages/vue/src/chart/chart-core/base/util/convert.ts b/packages/vue/src/chart/chart-core/base/util/convert.ts
new file mode 100644
index 000000000..0fcb034e3
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/convert.ts
@@ -0,0 +1,27 @@
+const pxToNumber = (pxText) => {
+  return pxText.split('px')[0] - 0
+}
+
+// 日期格式化
+const formatDate = (date, fmt) => {
+  const o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds(),
+    'q+': Math.floor((date.getMonth() + 3) / 3),
+    'S': date.getMilliseconds()
+  }
+  fmt = fmt.replace(/(y+)/, (match, year) => {
+    return (date.getFullYear() + '').substr(4 - year.length)
+  })
+  for (let k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
+    }
+  }
+  return fmt
+}
+
+export { pxToNumber, formatDate }
diff --git a/packages/vue/src/chart/chart-core/base/util/defendXSS.ts b/packages/vue/src/chart/chart-core/base/util/defendXSS.ts
new file mode 100644
index 000000000..bf2b39388
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/defendXSS.ts
@@ -0,0 +1,91 @@
+/**
+ *  转义字符 防止xss攻击
+ */
+const matchHtmlRegExp = /["'&<>/]/
+function escapeHtml(string) {
+  const str = `${string}`
+  const match = matchHtmlRegExp.exec(str)
+  if (!match) {
+    return str
+  }
+  let escape
+  let html = ''
+  let index
+  let lastIndex = 0
+
+  for (index = match.index; index < str.length; index++) {
+    switch (str.charCodeAt(index)) {
+      case 34: // "
+        escape = '&quot;'
+        break
+      case 38: // &
+        escape = '&amp;'
+        break
+      case 39: // '
+        escape = '&#x27;' // modified from escape-html; used to be '&#39'
+        break
+      case 60: // <
+        escape = '&lt;'
+        break
+      case 62: // >
+        escape = '&gt;'
+        break // /
+      case 47:
+        escape = '&#x2F;'
+        break
+      default:
+        continue
+    }
+
+    if (lastIndex !== index) {
+      html += str.substring(lastIndex, index)
+    }
+
+    lastIndex = index + 1
+    html += escape
+  }
+
+  return lastIndex !== index ? html + str.substring(lastIndex, index) : html
+}
+
+const escapeHtmlAHO = (value) => {
+  if (typeof value === 'string') {
+    if (value.includes('&') && !value.includes('&amp;')) {
+      value = value.replace(/&/g, '&amp;')
+    }
+    if (value.includes('<')) {
+      value = value.replace(/</g, '&lt;')
+    }
+    if (value.includes('>')) {
+      value = value.replace(/>/g, '&gt;')
+    }
+    if (value.includes('/')) {
+      value = value.replace(/\//g, '&#x2F;')
+    }
+    if (value.includes('"')) {
+      value = value.replace(/"/g, '&quot;')
+    }
+    if (value.includes("'")) {
+      value = value.replace(/'/g, '&#x27;')
+    }
+  }
+  return value
+}
+
+const defendXSS = (obj) => {
+  if (typeof obj === 'string') {
+    return escapeHtml(obj)
+  } else if (typeof obj === 'number') {
+    return obj
+  } else if (typeof obj === 'object') {
+    for (const key in obj) {
+      obj[key] = defendXSS(obj[key])
+    }
+    return obj
+  } else {
+    return obj
+  }
+}
+
+export default defendXSS
+export { escapeHtml, escapeHtmlAHO }
diff --git a/packages/vue/src/chart/chart-core/base/util/dom.ts b/packages/vue/src/chart/chart-core/base/util/dom.ts
new file mode 100644
index 000000000..a41698569
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/dom.ts
@@ -0,0 +1,48 @@
+// 插入HTML元素
+const appendHTML = (dom, child) => {
+  dom.insertAdjacentHTML('beforeend', child)
+}
+
+// 插入dom元素
+const appendDom = (dom, child) => {
+  dom.insertAdjacentElement('beforeend', child)
+}
+
+// 创建元素
+const createDom = (name) => {
+  return document.createElementNS('http://www.w3.org/2000/svg', name)
+}
+
+// 元素绑定样式
+const setStyle = (dom, option) => {
+  for (let i in option) {
+    dom.setAttribute(i, option[i])
+  }
+}
+
+// 判断父元素是否为指定的 class
+const isParent = (targetElement, parentClass) => {
+  if (targetElement === document.body) {
+    return false
+  } else if (targetElement.parentNode.classList.contains(parentClass)) {
+    return targetElement.parentNode
+  } else {
+    return isParent(targetElement.parentNode, parentClass)
+  }
+}
+
+// 计算一段字符的像素长度
+const getTextWidth = (text, fontSize = 12) => {
+  let result = 0
+  const ele = document.createElement('span')
+  // 字符串中带有换行符时，会被自动转换成<br/>标签，若需要考虑这种情况，可以替换成空格，以获取正确的宽度
+  ele.innerText = text
+  // 不同的大小和不同的字体都会导致渲染出来的字符串宽度变化，可以传入尽可能完备的样式信息
+  ele.setAttribute('style', `font-size: ${fontSize}px`)
+  document.documentElement.append(ele)
+  result = ele.offsetWidth
+  document.documentElement.removeChild(ele)
+  return result
+}
+
+export { appendHTML, appendDom, createDom, setStyle, isParent, getTextWidth }
diff --git a/packages/vue/src/chart/chart-core/base/util/equal.ts b/packages/vue/src/chart/chart-core/base/util/equal.ts
new file mode 100644
index 000000000..fe49fca3e
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/equal.ts
@@ -0,0 +1,47 @@
+import { isObject, isArray } from './type'
+import { getItemCount } from './math'
+
+/**
+ * 深比较两个对象
+ * 如果对比的是两个数组，值一致，顺序改变，如[1,2]和[2,1]，算不等
+ * 如果对比的是两个对象，值一致，顺序改变。如{a:1,b:2}和{b:2,a:1},算相等
+ */
+export function isObjEqual(obj1, obj2) {
+  if (!isObject(obj1) || !isObject(obj2)) {
+    return obj1 === obj2
+  }
+  if (obj1 === obj2) {
+    return true
+  }
+  const obj1Keys = Object.keys(obj1)
+  const obj2Keys = Object.keys(obj2)
+  if (obj1Keys.length !== obj2Keys.length) {
+    return false
+  }
+  for (let key in obj1) {
+    const res = isObjEqual(obj1[key], obj2[key])
+    if (!res) {
+      return false
+    }
+  }
+  return true
+}
+
+/**
+ * 对比两个简单类型数组的值和长度是否完全一样（值的顺序允许改变）
+ * 值一致，顺序不一致，如[1,2]和[2,1],算相等
+ */
+export function isArrayEqual(arr1, arr2) {
+  if (!isArray(arr1) || !isArray(arr2)) {
+    return false
+  }
+  if (arr1.length !== arr2.length) {
+    return false
+  }
+  for (let key of arr1) {
+    if (getItemCount(arr1, key) !== getItemCount(arr2, key)) {
+      return false
+    }
+  }
+  return true
+}
diff --git a/packages/vue/src/chart/chart-core/base/util/event.ts b/packages/vue/src/chart/chart-core/base/util/event.ts
new file mode 100644
index 000000000..8a0cfe2a6
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/event.ts
@@ -0,0 +1,14 @@
+// 绑定图表事件
+export function event(chartInstance, event) {
+  if (!event) return
+  const queryKeys = Object.keys(event)
+  queryKeys.forEach((qrKey) => {
+    const eKeys = Object.keys(event[qrKey])
+    eKeys.forEach((key) => {
+      chartInstance.off(key)
+      chartInstance.on(key, qrKey, function (params) {
+        event[qrKey][key](params)
+      })
+    })
+  })
+}
diff --git a/packages/vue/src/chart/chart-core/base/util/hashMap.ts b/packages/vue/src/chart/chart-core/base/util/hashMap.ts
new file mode 100644
index 000000000..cf2d11fbd
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/hashMap.ts
@@ -0,0 +1,100 @@
+class HashMap {
+  data
+
+  constructor(initObj) {
+    this.data = newMap()
+    for (const key in initObj) {
+      if (Object.hasOwnProperty.call(initObj, key)) {
+        this.set(key, initObj[key])
+      }
+    }
+  }
+
+  hasKey(key) {
+    return this.data.has(key)
+  }
+
+  get(key) {
+    return this.data.get(key)
+  }
+
+  set(key, value) {
+    this.data.set(key, value)
+    return value
+  }
+
+  each(callback, context) {
+    this.data.forEach((value, key) => {
+      callback.call(context, value, key)
+    })
+  }
+
+  keys() {
+    const keys = this.data.keys()
+    return typeof Map === 'function' ? Array.from(keys) : keys
+  }
+
+  removeKey(key) {
+    this.data.delete(key)
+  }
+}
+
+function newMap() {
+  return typeof Map === 'function' ? new Map() : new MapPolyfill()
+}
+
+class MapPolyfill {
+  data
+
+  delete(key) {
+    const existed = this.has(key)
+    if (existed) {
+      delete this.data[key]
+    }
+    return existed
+  }
+
+  has(key) {
+    return Object.prototype.hasOwnProperty.call(this.data, key)
+  }
+
+  get(key) {
+    return this.data[key]
+  }
+
+  set(key, value) {
+    this.data[key] = value
+    return this
+  }
+
+  keys() {
+    return keys(this.data)
+  }
+
+  forEach(callback) {
+    const data = this.data
+    for (const key in data) {
+      if (Object.prototype.hasOwnProperty.call(data, key)) {
+        callback(data[key], key)
+      }
+    }
+  }
+}
+
+function keys(obj) {
+  if (!obj) {
+    return []
+  }
+  if (Object.keys) {
+    return Object.keys(obj)
+  }
+  let keyList = []
+  for (let key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      keyList.push(key)
+    }
+  }
+  return keyList
+}
+
+export default HashMap
diff --git a/packages/vue/src/chart/chart-core/base/util/init/insert.ts b/packages/vue/src/chart/chart-core/base/util/init/insert.ts
new file mode 100644
index 000000000..ada73fe49
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/init/insert.ts
@@ -0,0 +1,150 @@
+import defendXSS from '../defendXSS'
+
+const ERROR_SVG = (fillColor) => {
+  return `<svg width="80px" height="80px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g transform="translate(5.000000, 41.000000)">
+                <path d="M135.649368,0 C140.813579,-9.48650299e-16 145,4.18642074 145,9.35063244 L145,30.3128 C145,31.2446148 144.244615,32 143.3128,32 L126.298735,32 L126.298735,32 L126.298735,9.35063244 C126.298735,4.18642074 130.485156,9.48650299e-16 135.649368,0 Z" fill-opacity="0.08" fill="${fillColor}"></path>
+                <path d="M135.666667,0 C140.821324,0 145,4.09339657 145,9.14285714 L145,29.7142857 C145,30.9766509 143.955331,32 142.666667,32 L125.885703,32 L125.885703,9.7809637 C125.885703,4.37908661 130.26479,9.92308723e-16 135.666667,0 L135.666667,0 L135.666667,0 Z M135.666667,2.05920206 L134.981839,2.05920206 C131.115845,2.05920206 127.981839,5.19320881 127.981839,9.05920206 L127.981839,29.9407979 L127.981839,29.9407979 L142.666667,29.9407979 C142.794372,29.9407979 142.897898,29.839385 142.897898,29.7142857 L142.897898,9.14285714 C142.897898,5.23066247 139.660365,2.05920206 135.666667,2.05920206 Z" fill="${fillColor}" fill-rule="nonzero"></path>
+                <path d="M128.031703,105.57885 L128.031724,136.725807 C128.031724,142.400087 123.427668,147 117.748276,147 L115,147 L115,144.863 L117.748276,144.863993 C122.246921,144.863993 125.893793,141.220403 125.893793,136.725807 L125.894079,106.401172 C126.620404,106.155789 127.333413,105.881214 128.031703,105.57885 Z M136.360709,0 C136.644838,0.899738066 136.524602,1.57454162 136,2.02441065 C131.599253,2.02441065 128.031742,5.59192129 128.031724,9.99266869 L128.031703,54.4211505 C127.333413,54.1187859 126.620404,53.8442105 125.894079,53.5988278 L125.893083,27.9709748 C125.893033,27.9381122 125.89298,27.9039511 125.892924,27.8684915 L125.892114,27.3806471 L125.891993,27.3109015 L125.891993,27.3109015 L125.891021,26.7681443 L125.890865,26.6828164 L125.890865,26.6828164 L125.890017,26.2269601 C125.889414,25.9068243 125.888739,25.5542254 125.887989,25.1691634 L125.887055,24.6915067 C125.880914,21.5676598 125.870528,16.5687428 125.855897,9.69475588 C125.849378,6.63789545 127.472127,3.8175724 130.098992,2.28334264 L130.356319,2.13891888 L23.2834482,2.13600695 C18.7848033,2.13600695 15.137931,5.77959709 15.137931,10.2741933 L15.137,117 L13,117 L13,10.2741933 C13,4.59991303 17.6040566,0 23.2834482,0 L136.360709,0 Z" fill="${fillColor}" fill-rule="nonzero"></path>
+                <path d="M105.29412,117 C106.166823,117 106.874288,117.706919 106.874288,118.578947 L106.874288,136.247276 C106.874288,140.105898 109.495409,144.895084 115.097369,144.895084 C118.616046,144.895084 115.289571,147 117,147 L15.0115833,147 C6.72091477,147 0,140.284265 0,132 L0,118.578947 C0,117.706919 0.707465271,117 1.58016791,117 L105.29412,117 Z M104.73844,119.133713 L2.13536204,119.133713 L2.13536204,132 C2.13536204,138.998182 7.72687236,144.69141 14.6892832,144.862335 L15.0115833,144.866287 L108.724094,144.866287 L108.655993,144.812245 C106.247587,142.858894 104.821938,139.819547 104.742438,136.537479 L104.738926,136.247276 L104.73844,119.133713 Z" fill="${fillColor}" fill-rule="nonzero"></path>
+            </g>
+            <g transform="translate(32.000000, 55.000000)">
+                <path d="M18.5,0 C8.2991,0 0,8.2991 0,18.5 C0,28.7009 8.2991,37 18.5,37 C28.7009,37 37,28.7009 37,18.5 C37,8.2991 28.7009,0 18.5,0" id="Fill-1" fill="#1476FF"></path>
+                <path d="M11.4542029,12.4542029 C12.1323292,11.7760767 13.324783,11.8678039 14.1159303,12.6589512 L14.1159303,12.6589512 L18.5,17.043 L22.8840697,12.6589512 C23.675217,11.8678039 24.8676708,11.7760767 25.5457971,12.4542029 C26.2239233,13.1323292 26.1321961,14.324783 25.3410488,15.1159303 L20.957,19.5 L25.3410488,23.8840697 C26.0905568,24.6335776 26.2123303,25.743261 25.6464822,26.4345838 L25.5457971,26.5457971 C24.8676708,27.2239233 23.675217,27.1321961 22.8840697,26.3410488 L22.8840697,26.3410488 L18.5,21.957 L14.1159303,26.3410488 C13.324783,27.1321961 12.1323292,27.2239233 11.4542029,26.5457971 C10.7760767,25.8676708 10.8678039,24.675217 11.6589512,23.8840697 L16.043,19.5 L11.6589512,15.1159303 C10.9094432,14.3664224 10.7876697,13.256739 11.3535178,12.5654162 Z" fill="#ffffff" fill-rule="nonzero"></path>
+            </g>
+            <g transform="translate(92.000000, 91.000000)" fill="${fillColor}">
+                <path d="M54.661608,58.5980308 L48.4015328,52.3382734 C47.8661557,51.8047505 47.8661557,50.9368624 48.4015328,50.4015125 C48.93691,49.8661625 49.8048421,49.8661625 50.338392,50.4015125 L56.5984672,56.6612699 C57.1338443,57.1966198 57.1338443,58.0626808 56.5984672,58.5980308 C56.3316922,58.8666193 55.9808649,59 55.6300376,59 C55.2792102,59 54.9283829,58.8666193 54.661608,58.5980308 Z"></path>
+                <path d="M64.2299385,53.5190184 C66.59153,53.5190184 68.5059782,55.4315327 68.5059782,57.7907386 L68.5059782,74.877619 C68.5059782,77.2368249 66.59153,79.1493391 64.2299385,79.1493391 C61.868347,79.1493391 59.9538988,77.2368249 59.9538988,74.877619 L59.9538988,57.7907386 C59.9538988,55.4315327 61.868347,53.5190184 64.2299385,53.5190184 Z M64.2299385,55.6548785 C63.0491428,55.6548785 62.0919187,56.6111356 62.0919187,57.7907386 L62.0919187,74.877619 C62.0919187,76.057222 63.0491428,77.0134791 64.2299385,77.0134791 C65.4107343,77.0134791 66.3679584,76.057222 66.3679584,74.877619 L66.3679584,57.7907386 C66.3679584,56.6111356 65.4107343,55.6548785 64.2299385,55.6548785 Z"  fill-rule="nonzero" transform="translate(64.229939, 66.334179) rotate(-45.000000) translate(-64.229939, -66.334179) "></path>
+                <path d="M30,0 C46.5423465,0 60,13.4576535 60,30 C60,46.5423465 46.5423465,60 30,60 C13.4576535,60 0,46.5423465 0,30 C0,13.4576535 13.4576535,0 30,0 Z M30,2.14285714 C14.6411208,2.14285714 2.14285714,14.6411208 2.14285714,30 C2.14285714,45.3588792 14.6411208,57.8571429 30,57.8571429 C45.3588792,57.8571429 57.8571429,45.3588792 57.8571429,30 C57.8571429,14.6411208 45.3588792,2.14285714 30,2.14285714 Z" fill-rule="nonzero"></path>
+            </g>
+            <g transform="translate(53.177778, 12.000000)" stroke="${fillColor}" stroke-width="0.76">
+                <path d="M120.505373,158 L127.662222,158 C134.378005,158 139.822222,152.555783 139.822222,145.84 L139.822222,12.16 C139.822222,5.44421744 134.378005,-3.01002608e-15 127.662222,0 L11.9822222,0 C5.26643966,1.23366924e-15 -0.177777778,5.44421744 -0.177777778,12.16 L-0.177777778,23.786605 L-0.177777778,23.786605"></path>
+            </g>
+            <ellipse fill="${fillColor}" cx="171.047716" cy="170.746356" rx="3.74528" ry="3.7414966"></ellipse>
+            <ellipse fill="${fillColor}" cx="53.3389156" cy="33.9144801" rx="3.74528" ry="3.7414966"></ellipse>
+        </g>
+    </svg>`
+}
+
+const STAGE_EMPTY_SVG = (fillColor) => {
+  return `<svg width="80px" height="80px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g transform="translate(-0.340000, -0.000000)">
+                <g>
+                    <rect x="0" y="0" width="199.8" height="199.8"></rect>
+                    <path d="M33.966,63.936 L171.0288,63.936 C172.573651,63.936 173.826,65.1883491 173.826,66.7332 L173.826,167.832 C173.826,172.24586 170.24786,175.824 165.834,175.824 L41.958,175.824 C37.5441403,175.824 33.966,172.24586 33.966,167.832 L33.966,63.936 L33.966,63.936 Z"></path>
+                    <path d="M26.7732,63.936 L135.864,63.936 L135.864,63.936 L135.864,167.832 C135.864,172.24586 132.28586,175.824 127.872,175.824 L31.968,175.824 C27.5541403,175.824 23.976,172.24586 23.976,167.832 L23.976,66.7332 C23.976,65.1883491 25.2283491,63.936 26.7732,63.936 Z"></path>
+                    <path d="M1.998,63.936 L112.385858,63.936 C113.762537,63.936 115.042272,64.6446419 115.772816,65.8114973 L133.949294,94.8437487 C134.534854,95.7790313 134.251349,97.0119183 133.316066,97.597479 C132.998228,97.7964705 132.630806,97.902 132.255815,97.902 L28.3238627,97.902 C25.612893,97.902 23.0867558,96.5277135 21.614018,94.2516642 L1.998,63.936 L1.998,63.936 Z" transform="translate(68.931000, 80.919000) scale(-1, 1) translate(-68.931000, -80.919000) "></path>
+                    <path d="M135.864,63.936 L173.810021,63.936 C175.170494,63.936 176.437498,64.6281744 177.172556,65.7729789 L195.825988,94.8244894 C196.422185,95.7530279 196.152769,96.9890705 195.224231,97.5852677 C194.902159,97.7920639 194.527467,97.902 194.14472,97.902 L160.414993,97.902 C157.582914,97.902 154.962336,96.4031709 153.526415,93.9621049 L135.864,63.936 L135.864,63.936 Z"></path>
+                </g>
+                <g transform="translate(1.000000, 0.000000)">
+                    <rect x="0" y="0" width="199.8" height="199.8"></rect>
+                    <path d="M173.965,96.796875 L173.965,166.832 C173.965,171.797592 169.939592,175.823 164.974,175.823 L126.000156,175.823 L126.000156,173.825 L164.974,173.825 C168.836127,173.825 171.967,170.694127 171.967,166.832 L171.967,96.796875 L173.965,96.796875 Z" id="矩形备份" fill="${fillColor}" fill-rule="nonzero"></path>
+                    <path d="M135.863,63.937 L135.863,166.832 C135.863,171.797592 131.837592,175.823 126.872,175.823 L30.9680001,175.823 C26.0024079,175.823 21.977,171.797592 21.977,166.832 L21.977,96.796875 L23.975,96.796875 L23.975,166.832 C23.975,170.694127 27.1058728,173.825 30.9680001,173.825 L126.872,173.825 C130.734127,173.825 133.865,170.694127 133.865,166.832 L133.865,65.935 L25.7732,65.935 L25.7732,63.937 L135.863,63.937 Z" fill="${fillColor}" fill-rule="nonzero"></path>
+                    <path d="M112.995777,63.936 C114.372456,63.936 115.652192,64.6446419 116.382735,65.8114973 L134.559213,94.8437487 C135.144774,95.7790313 134.861268,97.0119183 133.925985,97.597479 C133.608148,97.7964705 133.240725,97.902 132.865734,97.902 L28.9337822,97.902 C26.2228125,97.902 23.6966752,96.5277135 22.2239375,94.2516642 L2.60791944,63.936 L112.995777,63.936 Z M112.995777,65.934 L6.27991944,65.934 L23.9013986,93.1662482 C25.0059519,94.8732851 26.9005549,95.904 28.9337822,95.904 L132.865734,95.904 L114.689256,66.8717487 C114.323984,66.2883209 113.684117,65.934 112.995777,65.934 Z" fill="${fillColor}" fill-rule="nonzero" transform="translate(68.735960, 80.919000) scale(-1, 1) translate(-68.735960, -80.919000) "></path>
+                    <path d="M172.810021,63.936 C174.170494,63.936 175.437498,64.6281744 176.172556,65.7729789 L194.825988,94.8244894 C195.422185,95.7530279 195.152769,96.9890705 194.224231,97.5852677 C193.902159,97.7920639 193.527467,97.902 193.14472,97.902 L159.414993,97.902 C156.582914,97.902 153.962336,96.4031709 152.526415,93.9621049 L134.864,63.936 L172.810021,63.936 Z M172.810021,65.934 L138.357,65.934 L154.248559,92.9490786 C155.3255,94.7798782 157.290933,95.904 159.414993,95.904 L193.14472,95.904 L174.491288,66.8524894 C174.123759,66.2800872 173.490257,65.934 172.810021,65.934 Z" fill="${fillColor}" fill-rule="nonzero"></path>
+                    <g transform="translate(61.895063, 21.978000)" fill="${fillColor}" fill-rule="nonzero">
+                        <path d="M39.0029373,0.999 L39.0029373,14.985 C39.0029373,15.5367325 38.5556698,15.984 38.0039373,15.984 C37.4522049,15.984 37.0049373,15.5367325 37.0049373,14.985 L37.0049373,0.999 C37.0049373,0.447267535 37.4522049,1.0135161e-16 38.0039373,0 C38.5556698,-1.0135161e-16 39.0029373,0.447267535 39.0029373,0.999 Z"></path>
+                        <path d="M72.1457153,6.84296597 L72.1457153,20.828966 C72.1457153,21.3806984 71.6984477,21.827966 71.1467153,21.827966 C70.5949828,21.827966 70.1477153,21.3806984 70.1477153,20.828966 L70.1477153,6.84296597 C70.1477153,6.2912335 70.5949828,5.84396597 71.1467153,5.84396597 C71.6984477,5.84396597 72.1457153,6.2912335 72.1457153,6.84296597 Z" transform="translate(71.146715, 13.835966) rotate(-330.000000) translate(-71.146715, -13.835966) "></path>
+                        <path d="M5.86015938,6.84296597 L5.86015938,20.828966 C5.86015938,21.3806984 5.41289184,21.827966 4.86115938,21.827966 C4.30942691,21.827966 3.86215938,21.3806984 3.86215938,20.828966 L3.86215938,6.84296597 C3.86215938,6.2912335 4.30942691,5.84396597 4.86115938,5.84396597 C5.41289184,5.84396597 5.86015938,6.2912335 5.86015938,6.84296597 Z" transform="translate(4.861159, 13.835966) rotate(-30.000000) translate(-4.861159, -13.835966) "></path>
+                    </g>
+                    <g transform="translate(36.962000, 133.866000)">
+                        <rect fill="#1476FF" x="0" y="0" width="31.968" height="9.99" rx="2"></rect>
+                        <rect fill="${fillColor}" x="0" y="17.982" width="23.976" height="1.998" rx="0.6993"></rect>
+                        <rect fill="${fillColor}" x="0" y="25.974" width="11.988" height="1.998" rx="0.6993"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </svg>`
+}
+
+const LOADING_SVG = (fillColor) => {
+  return `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="128.248383%" y1="50%" x2="26.8114638%" y2="0%" id="huichart-loading-linearGradient">
+            <stop stop-color="${fillColor}" stop-opacity="0" offset="0.0956075175%"></stop>
+            <stop stop-color="${fillColor}" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-817.000000, -590.000000)">
+            <g transform="translate(538.000000, 402.000000)">
+                <g transform="translate(279.000000, 188.000000)">
+                    <path style="transform-origin: 50% 50%;"  d="M12,0.9 C12.7455844,0.9 13.35,1.50441559 13.35,2.25 C13.35,2.99558441 12.7455844,3.6 12,3.6 C7.36058441,3.6 3.6,7.36058441 3.6,12 C3.6,16.6394156 7.36058441,20.4 12,20.4 C16.6394156,20.4 20.4,16.6394156 20.4,12 C20.4,11.2544156 21.0044156,10.65 21.75,10.65 C22.4955844,10.65 23.1,11.2544156 23.1,12 C23.1,18.1305844 18.1305844,23.1 12,23.1 C5.86941559,23.1 0.9,18.1305844 0.9,12 C0.9,5.86941559 5.86941559,0.9 12,0.9 Z" id="Stroke-2" fill="url(#huichart-loading-linearGradient)" fill-rule="nonzero">
+                    <animateTransform attributeName='transform' type="rotate" from='0' to='360' dur='1' repeatCount='indefinite'/> 
+                    </path>
+            
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`
+}
+
+function insertStateDom(container, state, option = { theme: 'light' }) {
+  let text = ''
+  let image = ''
+  let theme = option.theme || 'light'
+  let textSize = option.textSize || 14
+  let textShow = option.textShow !== false
+  let imageSize = option.imageSize || 'auto'
+  let imageShow = option.imageShow !== false
+  let textColor = option.textColor || (theme.includes('dark') ? '#FFFFFF' : '#808080')
+  let imageColor = option.imageColor || (theme.includes('dark') ? '#FFFFFF' : '#191919')
+  let backgroundColor = option.backgroundColor || (theme.includes('dark') ? '#191919' : '#FFFFFF')
+  if (hasStateDom(container, state)) return
+  switch (state) {
+    case 'error':
+      image = ERROR_SVG(defendXSS(imageColor))
+      text = '加载失败'
+      break
+    case 'empty':
+      image = STAGE_EMPTY_SVG(defendXSS(imageColor))
+      text = '暂无数据'
+      break
+    case 'loading':
+      image = LOADING_SVG(defendXSS(imageColor))
+      backgroundColor = option.backgroundColor || (theme.includes('dark') ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)')
+      text = '加载中...'
+      break
+    case 'stage_empty':
+      image = STAGE_EMPTY_SVG(defendXSS(imageColor))
+      backgroundColor = option.backgroundColor || 'transparent'
+      text = '没有符合所选时间内的数据'
+      break
+    case 'custom':
+      image = `<img style="display: block;" src="${defendXSS(option.image)}" />`
+      text = option.text
+      break
+  }
+  image = option.image
+    ? `<img style="display: block;width: ${defendXSS(imageSize)}px;" src="${defendXSS(option.image)}" />`
+    : image
+  text = option.text || text
+  let stateDom = `<div class="huicharts-state-container huicharts-${defendXSS(state)}" style="background-color: ${defendXSS(backgroundColor)};position:absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;flex-direction: column;justify-content: center;z-index: 99;">
+            <div style="display: ${imageShow ? 'flex' : 'none'};width: ${defendXSS(imageSize)}px;height: ${defendXSS(imageSize)}px;padding: 0;margin: 0;align-items: center;justify-content: center;">${image}</div>
+            <div style="color: ${defendXSS(textColor)};font-size: ${defendXSS(textSize)}px;line-height: ${defendXSS(textSize)}px;display: ${textShow ? 'block' : 'none'};margin-top: 14px;letter-spacing: 0.5px;">${text}</div>
+        </div>`
+  container.insertAdjacentHTML('beforeend', stateDom)
+}
+
+function removeStateDom(container, state) {
+  let doms = container.getElementsByClassName(`huicharts-${state}`)
+  for (let index = 0; index < doms.length; index++) {
+    let item = doms[index]
+    container.removeChild(item)
+  }
+}
+
+function hasStateDom(container, state) {
+  let doms = container.getElementsByClassName(`huicharts-${state}`)
+  if (doms.length >= 1) {
+    return true
+  } else {
+    return false
+  }
+}
+
+export { insertStateDom, removeStateDom }
diff --git a/packages/vue/src/chart/chart-core/base/util/math.ts b/packages/vue/src/chart/chart-core/base/util/math.ts
new file mode 100644
index 000000000..9a93bb82a
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/math.ts
@@ -0,0 +1,108 @@
+/**
+ * 百分比变成小数
+ */
+const percentToDecimal = (percent) => {
+  return parseFloat(percent) / 100
+}
+
+/**
+ * 已知两条边和他们的夹角，求另一条边的长度
+ * @param {边长} a
+ * @param {边长} b
+ * @param {a&b的夹角} angle
+ * return 另一条边的长度
+ */
+const getEdge = (a, b, angle) => {
+  let edgeSqrt = a ** 2 + b ** 2 - 2 * a * b * Math.cos((angle / 180) * Math.PI)
+  return Math.sqrt(edgeSqrt)
+}
+
+/**
+ * 已知三条边的长度，求任意角的大小
+ * @param {边长} a
+ * @param {边长} b
+ * @param {边长} c
+ * return [b和c的夹角，a和c的夹角，b和a的夹角]
+ */
+const getAngle = (a, b, c) => {
+  let cosA = (b * b + c * c - a * a) / (2 * b * c)
+  let cosB = (a * a + c * c - b * b) / (2 * a * c)
+  let cosC = (a * a + b * b - c * c) / (2 * a * b)
+  let angleA = (Math.acos(cosA) * 180) / Math.PI
+  let angleB = (Math.acos(cosB) * 180) / Math.PI
+  let angleC = (Math.acos(cosC) * 180) / Math.PI
+  return [angleA, angleB, angleC]
+}
+
+/**
+ * 已知三个点位置，求任意角的大小
+ * @param {点} a
+ * @param {点} b
+ * @param {点} c
+ * return [c点所在角，a点所在角，b点所在角]
+ */
+const getAngleByPoints = (a, b, c) => {
+  let edgeA = Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2)
+  let edgeB = Math.sqrt((b.x - c.x) ** 2 + (b.y - c.y) ** 2)
+  let edgeC = Math.sqrt((a.x - c.x) ** 2 + (a.y - c.y) ** 2)
+  return getAngle(edgeA, edgeB, edgeC)
+}
+
+/**
+ * 假设有三个点A(x1, y1), B(x2, y2), C(x3, y3)，则可以通过计算向量AB和向量AC的叉积来判断C点在AB线段的顺时针方向还是逆时针方向。
+ * 如果AB × AC > 0，则C在AB的逆时针方向；如果AB × AC < 0，则C在AB的顺时针方向。 此处的顺逆针指的是ABC的连线方向
+ * console.log(pointsDirection(0, 0, 1, 1, 2, 0)); // "顺时针方向"
+ * console.log(pointsDirection(0, 0, 1, 1, 0, 2)); // "逆时针方向"
+ * console.log(pointsDirection(0, 0, 1, 1, 1, 1)); // "点C在线段AB上"
+ * 由于web中的坐标系和数学坐标系相反，因此顺逆的结论需要反过来
+ */
+const pointsDirection = (a, b, c) => {
+  let { x: x1, y: y1 } = a
+  let { x: x2, y: y2 } = b
+  let { x: x3, y: y3 } = c
+  // 计算向量AB和向量AC的坐标差
+  const ABx = x2 - x1
+  const ABy = y2 - y1
+  const ACx = x3 - x1
+  const ACy = y3 - y1
+  // 计算向量AB和向量AC的叉积
+  const crossProduct = ABx * ACy - ABy * ACx
+  if (crossProduct > 0) {
+    // "顺时针方向"
+    return true
+  } else if (crossProduct < 0) {
+    // "逆时针方向"
+    return false
+  } else {
+    // "点C在线段AB上"
+    return false
+  }
+}
+
+/**
+ * 获取数组中的每项出现的次数
+ */
+const getItemCount = (arr, item) => {
+  let count = 0
+  arr.forEach((key) => {
+    if (key === item) {
+      count++
+    }
+  })
+  return count
+}
+
+/**
+ * 生成安全随机数算法
+ */
+const getRandom = () => {
+  const array = new Uint32Array(1)
+  let random = Math.random()
+  if (self.crypto) {
+    self.crypto.getRandomValues(array)
+    random = parseFloat(`0.${array[0].toString()}`)
+  }
+  return random
+}
+
+export { getEdge, getAngle, getRandom, getItemCount, getAngleByPoints, pointsDirection, percentToDecimal }
diff --git a/packages/vue/src/chart/chart-core/base/util/merge.ts b/packages/vue/src/chart/chart-core/base/util/merge.ts
new file mode 100644
index 000000000..57215bee5
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/merge.ts
@@ -0,0 +1,64 @@
+import { isObject, isArray } from '../util/type'
+
+// 将 task 中所有属性合并到 target
+function merge(target, task) {
+  if (!target) {
+    target = task
+    return target
+  }
+  if (isObject(task)) {
+    for (const key in task) {
+      if (target[key] === undefined || target[key] === null) {
+        target[key] = task[key]
+      } else if (isObject(task[key]) && !isArray(task[key])) {
+        merge(target[key], task[key])
+      } else {
+        target[key] = task[key]
+      }
+    }
+  }
+  return target
+}
+
+// 覆盖Series
+function mergeSeries(iChartOption, baseOption) {
+  const userSeries = iChartOption.series
+  const baseSeries = baseOption.series
+  userSeries &&
+    userSeries.forEach((uitem) => {
+      let isNewSeries = true
+      baseSeries.forEach((bitem) => {
+        if (bitem.name === uitem.name) {
+          isNewSeries = false
+          merge(bitem, uitem)
+        }
+      })
+      if (isNewSeries) {
+        baseSeries.push(uitem)
+      }
+    })
+}
+
+// 覆盖VisualMap，采用直接替换的形式
+function mergeVisualMap(iChartOption, baseOption) {
+  let userVisualMap = iChartOption.visualMap
+  if (userVisualMap) {
+    baseOption.visualMap = userVisualMap
+  }
+}
+
+// extend属性，采用直接替换的形式
+function mergeExtend(iChartOption, baseOption) {
+  if (!iChartOption) return
+  let extend = iChartOption.extend
+  if (!extend) return
+  for (const key in extend) {
+    if (Object.hasOwnProperty.call(extend, key)) {
+      baseOption[key] = extend[key]
+    }
+  }
+}
+
+export { mergeSeries, mergeExtend, mergeVisualMap }
+
+export default merge
diff --git a/packages/vue/src/chart/chart-core/base/util/proxy.ts b/packages/vue/src/chart/chart-core/base/util/proxy.ts
new file mode 100644
index 000000000..285a6e5b7
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/proxy.ts
@@ -0,0 +1,11 @@
+// 代理obj,实现obj的响应式更新
+export default function proxy(callBack) {
+  return new Proxy(
+    {},
+    {
+      get(_, prop) {
+        return callBack()[prop]
+      }
+    }
+  )
+}
diff --git a/packages/vue/src/chart/chart-core/base/util/sort/max.ts b/packages/vue/src/chart/chart-core/base/util/sort/max.ts
new file mode 100644
index 000000000..810ade94e
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/sort/max.ts
@@ -0,0 +1,53 @@
+export default function max(arr) {
+  function handle(arr) {
+    return arr.filter((item) => {
+      return Object.prototype.toString.call(item) === '[object Number]'
+    })
+  }
+
+  function heapAjust(data, i, length) {
+    let child = 2 * i + 1
+    while (child <= length) {
+      const temp = data[i]
+      if (child + 1 <= length && data[child] < data[child + 1]) {
+        child = child + 1
+      }
+      if (data[i] < data[child]) {
+        data[i] = data[child]
+        data[child] = temp
+        i = child
+        child = 2 * i + 1
+      } else {
+        break
+      }
+    }
+  }
+
+  function buildHeap(data) {
+    for (let i = Math.floor(data.length / 2); i >= 0; i--) {
+      heapAjust(data, i, data.length)
+    }
+  }
+
+  function swap(arr, i, j) {
+    const temp = arr[i]
+    arr[i] = arr[j]
+    arr[j] = temp
+  }
+
+  function heapSort(arr) {
+    const data = handle(arr).slice(0)
+    if (!Array.isArray(data)) return
+    if (Array.isArray(data) && data.length === 1) {
+      return data
+    }
+    buildHeap(data)
+    for (let i = data.length - 1; i >= 0; i--) {
+      swap(data, i, 0)
+      heapAjust(data, 0, i - 1)
+    }
+    return data[data.length - 1]
+  }
+
+  return heapSort(arr)
+}
diff --git a/packages/vue/src/chart/chart-core/base/util/sort/min.ts b/packages/vue/src/chart/chart-core/base/util/sort/min.ts
new file mode 100644
index 000000000..fa0dcf3fe
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/sort/min.ts
@@ -0,0 +1,53 @@
+export default function min(arrMin) {
+  function handleMin(arrMin) {
+    return arrMin.filter((item) => {
+      return Object.prototype.toString.call(item) === '[object Number]'
+    })
+  }
+
+  function heapJustMin(dataMin, iMin, length) {
+    let childMin = 2 * iMin + 1
+    while (childMin <= length) {
+      const temp = dataMin[iMin]
+      if (childMin + 1 <= length && dataMin[childMin] < dataMin[childMin + 1]) {
+        childMin = childMin + 1
+      }
+      if (dataMin[iMin] < dataMin[childMin]) {
+        dataMin[iMin] = dataMin[childMin]
+        dataMin[childMin] = temp
+        iMin = childMin
+        childMin = 2 * iMin + 1
+      } else {
+        break
+      }
+    }
+  }
+
+  function buildHeapMin(dataMin) {
+    for (let iMin = Math.floor(dataMin.length / 2); iMin >= 0; iMin--) {
+      heapJustMin(dataMin, iMin, dataMin.length)
+    }
+  }
+
+  function swap(arrMin, iMin, jMin) {
+    const temp = arrMin[iMin]
+    arrMin[iMin] = arrMin[jMin]
+    arrMin[jMin] = temp
+  }
+
+  function heapSort(arrMin) {
+    const dataMin = handleMin(arrMin).slice(0)
+    if (!Array.isArray(dataMin)) return
+    if (Array.isArray(dataMin) && dataMin.length === 1) {
+      return dataMin
+    }
+    buildHeapMin(dataMin)
+    for (let iMin = dataMin.length - 1; iMin >= 0; iMin--) {
+      swap(dataMin, iMin, 0)
+      heapJustMin(dataMin, 0, iMin - 1)
+    }
+    return dataMin[0]
+  }
+
+  return heapSort(arrMin)
+}
diff --git a/packages/vue/src/chart/chart-core/base/util/throttle.ts b/packages/vue/src/chart/chart-core/base/util/throttle.ts
new file mode 100644
index 000000000..91b5229aa
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/throttle.ts
@@ -0,0 +1,51 @@
+function throttle(delay, callback, options) {
+  const { noTrailing = false, noLeading = false, debounceMode = undefined } = options || {}
+  let timeoutID
+  let cancelled = false
+  let lastExec = 0
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID)
+    }
+  }
+  function cancel(options) {
+    const { upcomingOnly = false } = options || {}
+    clearExistingTimeout()
+    cancelled = !upcomingOnly
+  }
+  function wrapper(...arguments_) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this
+    const elapsed = Date.now() - lastExec
+    if (cancelled) {
+      return
+    }
+    function exec() {
+      lastExec = Date.now()
+      callback.apply(self, arguments_)
+    }
+    function clear() {
+      timeoutID = undefined
+    }
+    if (!noLeading && debounceMode && !timeoutID) {
+      exec()
+    }
+    clearExistingTimeout()
+    if (debounceMode === undefined && elapsed > delay) {
+      if (noLeading) {
+        lastExec = Date.now()
+        if (!noTrailing) {
+          timeoutID = setTimeout(debounceMode ? clear : exec, delay)
+        }
+      } else {
+        exec()
+      }
+    } else if (noTrailing !== true) {
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay)
+    }
+  }
+  wrapper.cancel = cancel
+  return wrapper
+}
+
+export default throttle
diff --git a/packages/vue/src/chart/chart-core/base/util/tips.ts b/packages/vue/src/chart/chart-core/base/util/tips.ts
new file mode 100644
index 000000000..81e616ade
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/tips.ts
@@ -0,0 +1,14 @@
+const packageName = 'HUI-Charts'
+
+function warn(tip) {
+  console.warn(`[${packageName}] Warning: ${tip}`)
+}
+
+function error(tip) {
+  console.error(`[${packageName}] Error: ${tip}`)
+}
+
+export default {
+  warn,
+  error
+}
diff --git a/packages/vue/src/chart/chart-core/base/util/type.ts b/packages/vue/src/chart/chart-core/base/util/type.ts
new file mode 100644
index 000000000..f346752f1
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/util/type.ts
@@ -0,0 +1,32 @@
+export function isArray(value) {
+  return Object.prototype.toString.call(value) === '[object Array]'
+}
+
+export const isObject = (value) => value !== null && typeof value === 'object'
+
+export const isFunction = (value) => typeof value === 'function'
+
+export const isString = (value) => typeof value === 'string'
+
+export const isBoolean = (value) => typeof value === 'boolean'
+
+export const isNumber = (value) => typeof value === 'number'
+
+export const isUndef = (value) => typeof value === 'undefined'
+
+export const isDOM =
+  typeof HTMLElement === 'object'
+    ? function (dom) {
+        return dom instanceof HTMLElement
+      }
+    : function (dom) {
+        return dom && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'
+      }
+
+export const toArray = (value) => {
+  if (!isArray(value)) {
+    return [value]
+  } else {
+    return value
+  }
+}
diff --git a/packages/vue/src/chart/chart-core/common/extend.ts b/packages/vue/src/chart/chart-core/common/extend.ts
index 814b1293c..82c3722f7 100644
--- a/packages/vue/src/chart/chart-core/common/extend.ts
+++ b/packages/vue/src/chart/chart-core/common/extend.ts
@@ -1,7 +1,7 @@
 import { merge, get } from './util'
 import { isObject } from './type'
 import { setObj as set } from './object'
-import cloneDeep from '@opentiny/huicharts/util/cloneDeep'
+import cloneDeep from '../base/util/cloneDeep'
 
 const isArr = Array.isArray
 
diff --git a/packages/vue/src/chart/chart-core/package.json b/packages/vue/src/chart/chart-core/package.json
index 2ff2900cc..d1d089f3c 100644
--- a/packages/vue/src/chart/chart-core/package.json
+++ b/packages/vue/src/chart/chart-core/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-core",
+  "name": "@opentiny/vue-chart-core",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "echarts": "5.4.1",
-    "@opentiny/huicharts": "1.0.1",
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-core/src/chart-core.ts b/packages/vue/src/chart/chart-core/src/chart-core.ts
index 29b5df061..7cece0b11 100644
--- a/packages/vue/src/chart/chart-core/src/chart-core.ts
+++ b/packages/vue/src/chart/chart-core/src/chart-core.ts
@@ -2,10 +2,10 @@ import { $prefix } from '../common/util'
 import { isObject } from '../common/type'
 import setExtend from '../common/extend'
 import { DEFAULT_COLORS, SAAS_DEFAULT_COLORS, SAAS_DEFAULT_SAME_COLORS, DEFAULT_THEME } from '../common/constants'
-import IntegrateChart from '@opentiny/huicharts'
-import BaiduMapChart from '@opentiny/huicharts/components/BaiduMapChart'
-import AutonaviMapChart from '@opentiny/huicharts/components/AutonaviMapChart'
-import cloneDeep from '@opentiny/huicharts/util/cloneDeep'
+import IntegrateChart from '../base'
+import BaiduMapChart from '../base/components/BaiduMapChart'
+import AutonaviMapChart from '../base/components/AutonaviMapChart'
+import cloneDeep from '../base/util/cloneDeep'
 import '@opentiny/vue-theme/chart-core/index.less'
 
 export default {
@@ -248,12 +248,6 @@ export default {
           this.integrateChart && this.integrateChart.echartsIns && this.integrateChart.echartsIns.resize()
         })
       }
-    },
-    colors: {
-      handler(val) {
-        this.refreshChart()
-      },
-      deep: true
     }
   },
   methods: {
@@ -342,15 +336,7 @@ export default {
         })
       }
     },
-
-    // 更新图表
     refreshChart() {
-      if (!this.option.theme) {
-        this.option.theme = 'cloud-light'
-      }
-      if (Array.isArray(this.colors) && this.colors.length > 0) {
-        option.color = cloneDeep(this.colors)
-      }
       const { data } = this
       if (Object.keys(this.options).length === 0) {
         this.updateChart(data)
@@ -384,21 +370,8 @@ export default {
       }, this.changeDelay)
       this.eChartOption = this.integrateChart.eChartOption
     },
-
-    // 初始渲染图表
     renderChart(option) {
-      // 设置默认theme为'cloud-light'
-      if (!option.theme) {
-        option.theme = 'cloud-light'
-      }
-
-      // 将外部colors放入配置项中
-      if (Array.isArray(this.colors) && this.colors.length > 0) {
-        option.color = cloneDeep(this.colors)
-      }
       const plugins = this.plugins || {}
-
-      // 判断是否为huicharts自定义图表
       if (this.isSelfChart) {
         this.integrateChart.init(this.$refs.chartRef)
         if (this.colorMode !== 'default') {
@@ -409,12 +382,8 @@ export default {
       } else {
         this.selfSetting(option)
         this.setAnimation(option)
-
-        // theme为ecahrts主题参数
-        const theme = this.themeName || this.theme || DEFAULT_THEME
-        this.integrateChart.init(this.$refs.chartRef, this.initOpts, theme)
-
-        // 通过colorMode参数控制颜色
+        const themeName = this.themeName || this.theme || DEFAULT_THEME
+        this.integrateChart.init(this.$refs.chartRef, themeName, this.initOpts)
         if (this.colorMode !== 'default') {
           option.color = this.computedChartColor()
         }
@@ -422,24 +391,16 @@ export default {
         this.$emit('handle-color', option.color)
         this.applyMarks(this.integrateChart.eChartOption)
       }
-
-      // 判断extend，将extend放入配置项中
       if (this.extend && Object.keys(this.extend).length !== 0) {
         option.extend = this.applyExtend(this.integrateChart.eChartOption)
         this.integrateChart.setSimpleOption(this.iChartName, option, plugins)
       }
       this.integrateChart.render(this.renderOption)
-
-      // 返回图表实例
       this.$emit('ready', this.integrateChart.echartsIns, option)
-
-      // 返回图表实例(仅一次)
       if (!this.once['ready-once']) {
         this.once['ready-once'] = true
         this.$emit('ready-once', this.integrateChart.echartsIns, option)
       }
-
-      // 赋值echartOption，方便用户获取
       this.eChartOption = this.integrateChart.eChartOption
     },
     addEvents(val) {
diff --git a/packages/vue/src/chart/chart-funnel/package.json b/packages/vue/src/chart/chart-funnel/package.json
index 2a9880ee3..62e0bca3a 100644
--- a/packages/vue/src/chart/chart-funnel/package.json
+++ b/packages/vue/src/chart/chart-funnel/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-funnel",
+  "name": "@opentiny/vue-chart-funnel",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-funnel/src/chart-funnel.vue b/packages/vue/src/chart/chart-funnel/src/chart-funnel.vue
index c10058638..f17e126e9 100644
--- a/packages/vue/src/chart/chart-funnel/src/chart-funnel.vue
+++ b/packages/vue/src/chart/chart-funnel/src/chart-funnel.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { getIChartOption } from './funnel'
 import { $prefix } from '@opentiny/vue-common'
 
diff --git a/packages/vue/src/chart/chart-funnel/src/funnel.ts b/packages/vue/src/chart/chart-funnel/src/funnel.ts
index 70026bfbe..b8361777e 100644
--- a/packages/vue/src/chart/chart-funnel/src/funnel.ts
+++ b/packages/vue/src/chart/chart-funnel/src/funnel.ts
@@ -1,4 +1,4 @@
-import { getFormatted, itemPoint, itemLabel, itemContent } from '@opentiny/vue-huicharts-core'
+import { getFormatted, itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const getMetrics = (args) => {
   const { dimension, columns, settings } = args
diff --git a/packages/vue/src/chart/chart-gauge/package.json b/packages/vue/src/chart/chart-gauge/package.json
index fda7bb902..b2063b95a 100644
--- a/packages/vue/src/chart/chart-gauge/package.json
+++ b/packages/vue/src/chart/chart-gauge/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-gauge",
+  "name": "@opentiny/vue-chart-gauge",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-gauge/src/chart-gauge.vue b/packages/vue/src/chart/chart-gauge/src/chart-gauge.vue
index c8b6f3305..138c4e68f 100644
--- a/packages/vue/src/chart/chart-gauge/src/chart-gauge.vue
+++ b/packages/vue/src/chart/chart-gauge/src/chart-gauge.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { getIChartOption } from './gauge'
 import { $prefix } from '@opentiny/vue-common'
 
diff --git a/packages/vue/src/chart/chart-gauge/src/gauge.ts b/packages/vue/src/chart/chart-gauge/src/gauge.ts
index 94a5b89de..1362e75ff 100644
--- a/packages/vue/src/chart/chart-gauge/src/gauge.ts
+++ b/packages/vue/src/chart/chart-gauge/src/gauge.ts
@@ -1,4 +1,4 @@
-import { getFormatted, itemLabel, isNull, isObject } from '@opentiny/vue-huicharts-core'
+import { getFormatted, itemLabel, isNull, isObject } from '@opentiny/vue-chart-core'
 
 const getTooltip = (args) => {
   const { tooltipFormatter, dataType, digit } = args
diff --git a/packages/vue/src/chart/chart-graph/package.json b/packages/vue/src/chart/chart-graph/package.json
index 3ddfcf57c..5a2c827b9 100644
--- a/packages/vue/src/chart/chart-graph/package.json
+++ b/packages/vue/src/chart/chart-graph/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-graph",
+  "name": "@opentiny/vue-chart-graph",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-graph/src/chart-graph.vue b/packages/vue/src/chart/chart-graph/src/chart-graph.vue
index cf62371bf..c7e1ac5fd 100644
--- a/packages/vue/src/chart/chart-graph/src/chart-graph.vue
+++ b/packages/vue/src/chart/chart-graph/src/chart-graph.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { graph } from './graph'
 import { $prefix } from '@opentiny/vue-common'
 
diff --git a/packages/vue/src/chart/chart-graph/src/graph.ts b/packages/vue/src/chart/chart-graph/src/graph.ts
index ce1d75d01..cafefd082 100644
--- a/packages/vue/src/chart/chart-graph/src/graph.ts
+++ b/packages/vue/src/chart/chart-graph/src/graph.ts
@@ -1,4 +1,4 @@
-import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-huicharts-core'
+import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const getTooltip = () => ({
   trigger: 'item',
diff --git a/packages/vue/src/chart/chart-heatmap/package.json b/packages/vue/src/chart/chart-heatmap/package.json
index 0e3d557d2..59a32b6d5 100644
--- a/packages/vue/src/chart/chart-heatmap/package.json
+++ b/packages/vue/src/chart/chart-heatmap/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-heatmap",
+  "name": "@opentiny/vue-chart-heatmap",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-heatmap/src/chart-heatmap.vue b/packages/vue/src/chart/chart-heatmap/src/chart-heatmap.vue
index 5d1b63a59..c51a61140 100644
--- a/packages/vue/src/chart/chart-heatmap/src/chart-heatmap.vue
+++ b/packages/vue/src/chart/chart-heatmap/src/chart-heatmap.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { heatmap } from './heatmap'
 import { $prefix } from '@opentiny/vue-common'
 
diff --git a/packages/vue/src/chart/chart-heatmap/src/heatmap.ts b/packages/vue/src/chart/chart-heatmap/src/heatmap.ts
index 75a54b806..1e8586b4c 100644
--- a/packages/vue/src/chart/chart-heatmap/src/heatmap.ts
+++ b/packages/vue/src/chart/chart-heatmap/src/heatmap.ts
@@ -1,11 +1,4 @@
-import {
-  getFormatted,
-  getMapJSON,
-  itemPoint,
-  itemLabel,
-  itemContent,
-  HEAT_MAP_COLOR
-} from '@opentiny/vue-huicharts-core'
+import { getFormatted, getMapJSON, itemPoint, itemLabel, itemContent, HEAT_MAP_COLOR } from '@opentiny/vue-chart-core'
 import * as echartsLib from 'echarts'
 
 const getAxisList = (rows, label) => {
diff --git a/packages/vue/src/chart/chart-histogram/package.json b/packages/vue/src/chart/chart-histogram/package.json
index ac8225e3f..59dbf75bc 100644
--- a/packages/vue/src/chart/chart-histogram/package.json
+++ b/packages/vue/src/chart/chart-histogram/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-histogram",
+  "name": "@opentiny/vue-chart-histogram",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-histogram/src/chart-histogram.vue b/packages/vue/src/chart/chart-histogram/src/chart-histogram.vue
index 296c7a20d..97baf2d79 100644
--- a/packages/vue/src/chart/chart-histogram/src/chart-histogram.vue
+++ b/packages/vue/src/chart/chart-histogram/src/chart-histogram.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { histogram } from './histogram'
 import { $prefix } from '@opentiny/vue-common'
 
diff --git a/packages/vue/src/chart/chart-histogram/src/histogram.ts b/packages/vue/src/chart/chart-histogram/src/histogram.ts
index 7734f8de2..46da3dfb9 100644
--- a/packages/vue/src/chart/chart-histogram/src/histogram.ts
+++ b/packages/vue/src/chart/chart-histogram/src/histogram.ts
@@ -1,13 +1,4 @@
-import {
-  getFormatted,
-  cloneDeep,
-  getStackMap,
-  get,
-  set,
-  isNull,
-  getRows,
-  getTooltip
-} from '@opentiny/vue-huicharts-core'
+import { getFormatted, cloneDeep, getStackMap, get, set, isNull, getRows, getTooltip } from '@opentiny/vue-chart-core'
 
 const VALUE_AXIS_OPACITY = 0.5
 
diff --git a/packages/vue/src/chart/chart-line/package.json b/packages/vue/src/chart/chart-line/package.json
index 9898905da..5ebac7b6a 100644
--- a/packages/vue/src/chart/chart-line/package.json
+++ b/packages/vue/src/chart/chart-line/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-line",
+  "name": "@opentiny/vue-chart-line",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-line/src/chart-line.vue b/packages/vue/src/chart/chart-line/src/chart-line.vue
index a82bbc50a..4afc98b22 100644
--- a/packages/vue/src/chart/chart-line/src/chart-line.vue
+++ b/packages/vue/src/chart/chart-line/src/chart-line.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { line } from './line'
 import { $prefix } from '@opentiny/vue-common'
 
diff --git a/packages/vue/src/chart/chart-line/src/line.ts b/packages/vue/src/chart/chart-line/src/line.ts
index ceb4d6d5d..bc7dfee1d 100644
--- a/packages/vue/src/chart/chart-line/src/line.ts
+++ b/packages/vue/src/chart/chart-line/src/line.ts
@@ -1,4 +1,4 @@
-import { getRows, getYAxis, getTooltip, isNull } from '@opentiny/vue-huicharts-core'
+import { getRows, getYAxis, getTooltip, isNull } from '@opentiny/vue-chart-core'
 
 const getStackMap = (stack) => {
   const result = {}
diff --git a/packages/vue/src/chart/chart-liquidfill/package.json b/packages/vue/src/chart/chart-liquidfill/package.json
index 0c691913e..b4bbad7c9 100644
--- a/packages/vue/src/chart/chart-liquidfill/package.json
+++ b/packages/vue/src/chart/chart-liquidfill/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-liquidfill",
+  "name": "@opentiny/vue-chart-liquidfill",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "echarts-liquidfill": "3.1.0",
     "@opentiny/vue-common": "workspace:~"
   },
diff --git a/packages/vue/src/chart/chart-liquidfill/src/chart-liquidfill.vue b/packages/vue/src/chart/chart-liquidfill/src/chart-liquidfill.vue
index 462db33b6..e5bb74be4 100644
--- a/packages/vue/src/chart/chart-liquidfill/src/chart-liquidfill.vue
+++ b/packages/vue/src/chart/chart-liquidfill/src/chart-liquidfill.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { getIChartOption } from './liquidfill'
 import 'echarts-liquidfill'
 import { $prefix } from '@opentiny/vue-common'
diff --git a/packages/vue/src/chart/chart-liquidfill/src/liquidfill.ts b/packages/vue/src/chart/chart-liquidfill/src/liquidfill.ts
index 269352932..07f03854a 100644
--- a/packages/vue/src/chart/chart-liquidfill/src/liquidfill.ts
+++ b/packages/vue/src/chart/chart-liquidfill/src/liquidfill.ts
@@ -1,4 +1,4 @@
-import { getFormatted, isObject, itemLabel, itemContent } from '@opentiny/vue-huicharts-core'
+import { getFormatted, isObject, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const isArr = Array.isArray
 
diff --git a/packages/vue/src/chart/chart-map/package.json b/packages/vue/src/chart/chart-map/package.json
index 889959ed2..51a482b79 100644
--- a/packages/vue/src/chart/chart-map/package.json
+++ b/packages/vue/src/chart/chart-map/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-map",
+  "name": "@opentiny/vue-chart-map",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-map/src/chart-map.vue b/packages/vue/src/chart/chart-map/src/chart-map.vue
index 75e792e7e..517d40310 100644
--- a/packages/vue/src/chart/chart-map/src/chart-map.vue
+++ b/packages/vue/src/chart/chart-map/src/chart-map.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 
 import { map } from './map'
 import * as echarts from 'echarts'
diff --git a/packages/vue/src/chart/chart-map/src/map.ts b/packages/vue/src/chart/chart-map/src/map.ts
index 586a4b2fd..bf78a57fb 100644
--- a/packages/vue/src/chart/chart-map/src/map.ts
+++ b/packages/vue/src/chart/chart-map/src/map.ts
@@ -1,4 +1,4 @@
-import { getFormatted, getMapJSON, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-huicharts-core'
+import { getFormatted, getMapJSON, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-chart-core'
 
 const getLegendMap = (args, legendItemStyle) => {
   const { metrics, legendName, labelMap } = args
diff --git a/packages/vue/src/chart/chart-pie/package.json b/packages/vue/src/chart/chart-pie/package.json
index e26800c71..a9028f0ba 100644
--- a/packages/vue/src/chart/chart-pie/package.json
+++ b/packages/vue/src/chart/chart-pie/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-pie",
+  "name": "@opentiny/vue-chart-pie",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
diff --git a/packages/vue/src/chart/chart-pie/src/chart-pie.vue b/packages/vue/src/chart/chart-pie/src/chart-pie.vue
index ea873778a..c02467f55 100644
--- a/packages/vue/src/chart/chart-pie/src/chart-pie.vue
+++ b/packages/vue/src/chart/chart-pie/src/chart-pie.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { t } from '@opentiny/vue-locale'
 import { pie } from './pie'
 import { $prefix } from '@opentiny/vue-common'
diff --git a/packages/vue/src/chart/chart-pie/src/pie.ts b/packages/vue/src/chart/chart-pie/src/pie.ts
index 63c4a4962..2507b3c9e 100644
--- a/packages/vue/src/chart/chart-pie/src/pie.ts
+++ b/packages/vue/src/chart/chart-pie/src/pie.ts
@@ -24,7 +24,7 @@
  * tooltipVisible boolean 是否显示提示框,true
  */
 
-import { deepCopy, getFormatted, itemPoint, itemLabel, itemContent, isDefined } from '@opentiny/vue-huicharts-core'
+import { deepCopy, getFormatted, itemPoint, itemLabel, itemContent, isDefined } from '@opentiny/vue-chart-core'
 
 const PIE_RADIUS = 100
 const RING_RADIUS = [90, 100]
diff --git a/packages/vue/src/chart/chart-process/package.json b/packages/vue/src/chart/chart-process/package.json
index 5fbfcae69..b09c2da01 100644
--- a/packages/vue/src/chart/chart-process/package.json
+++ b/packages/vue/src/chart/chart-process/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-process",
+  "name": "@opentiny/vue-chart-process",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-process/src/chart-process.vue b/packages/vue/src/chart/chart-process/src/chart-process.vue
index a6df47fcc..b95b7a6b0 100644
--- a/packages/vue/src/chart/chart-process/src/chart-process.vue
+++ b/packages/vue/src/chart/chart-process/src/chart-process.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { $prefix } from '@opentiny/vue-common'
 
 export default {
diff --git a/packages/vue/src/chart/chart-radar/package.json b/packages/vue/src/chart/chart-radar/package.json
index 8146c19d7..5f54ea309 100644
--- a/packages/vue/src/chart/chart-radar/package.json
+++ b/packages/vue/src/chart/chart-radar/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-radar",
+  "name": "@opentiny/vue-chart-radar",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-radar/src/chart-radar.vue b/packages/vue/src/chart/chart-radar/src/chart-radar.vue
index a6933e076..ce2a63919 100644
--- a/packages/vue/src/chart/chart-radar/src/chart-radar.vue
+++ b/packages/vue/src/chart/chart-radar/src/chart-radar.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { radar } from './radar'
 import { $prefix } from '@opentiny/vue-common'
 
diff --git a/packages/vue/src/chart/chart-radar/src/radar.ts b/packages/vue/src/chart/chart-radar/src/radar.ts
index 58c613da4..c146c1a89 100644
--- a/packages/vue/src/chart/chart-radar/src/radar.ts
+++ b/packages/vue/src/chart/chart-radar/src/radar.ts
@@ -1,4 +1,4 @@
-import { getFormatted, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-huicharts-core'
+import { getFormatted, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-chart-core'
 
 const getRadarLegend = (rows, dimension, legendName, legendVisible) => {
   let legendData = rows.map((row) => row[dimension]).filter((i) => i)
diff --git a/packages/vue/src/chart/chart-ring/package.json b/packages/vue/src/chart/chart-ring/package.json
index fd244ec05..3b5a99f3b 100644
--- a/packages/vue/src/chart/chart-ring/package.json
+++ b/packages/vue/src/chart/chart-ring/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-ring",
+  "name": "@opentiny/vue-chart-ring",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
diff --git a/packages/vue/src/chart/chart-ring/src/chart-ring.vue b/packages/vue/src/chart/chart-ring/src/chart-ring.vue
index 2829a5750..bc1c31cdb 100644
--- a/packages/vue/src/chart/chart-ring/src/chart-ring.vue
+++ b/packages/vue/src/chart/chart-ring/src/chart-ring.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { t } from '@opentiny/vue-locale'
 import { pie } from './ring'
 import { $prefix } from '@opentiny/vue-common'
diff --git a/packages/vue/src/chart/chart-ring/src/ring.ts b/packages/vue/src/chart/chart-ring/src/ring.ts
index 63c4a4962..2507b3c9e 100644
--- a/packages/vue/src/chart/chart-ring/src/ring.ts
+++ b/packages/vue/src/chart/chart-ring/src/ring.ts
@@ -24,7 +24,7 @@
  * tooltipVisible boolean 是否显示提示框,true
  */
 
-import { deepCopy, getFormatted, itemPoint, itemLabel, itemContent, isDefined } from '@opentiny/vue-huicharts-core'
+import { deepCopy, getFormatted, itemPoint, itemLabel, itemContent, isDefined } from '@opentiny/vue-chart-core'
 
 const PIE_RADIUS = 100
 const RING_RADIUS = [90, 100]
diff --git a/packages/vue/src/chart/chart-sankey/package.json b/packages/vue/src/chart/chart-sankey/package.json
index dbd6df37f..d79966502 100644
--- a/packages/vue/src/chart/chart-sankey/package.json
+++ b/packages/vue/src/chart/chart-sankey/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-sankey",
+  "name": "@opentiny/vue-chart-sankey",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-sankey/src/chart-sankey.vue b/packages/vue/src/chart/chart-sankey/src/chart-sankey.vue
index ebbd6e110..1e86cab77 100644
--- a/packages/vue/src/chart/chart-sankey/src/chart-sankey.vue
+++ b/packages/vue/src/chart/chart-sankey/src/chart-sankey.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { sankey } from './sankey'
 import { $prefix } from '@opentiny/vue-common'
 
diff --git a/packages/vue/src/chart/chart-sankey/src/sankey.ts b/packages/vue/src/chart/chart-sankey/src/sankey.ts
index d7b67e09f..bf15d5f96 100644
--- a/packages/vue/src/chart/chart-sankey/src/sankey.ts
+++ b/packages/vue/src/chart/chart-sankey/src/sankey.ts
@@ -1,4 +1,4 @@
-import { getFormatted, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-huicharts-core'
+import { getFormatted, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-chart-core'
 
 const getTooltip = (args) => {
   const { digit, itemDataType, linksDataType } = args
diff --git a/packages/vue/src/chart/chart-scatter/package.json b/packages/vue/src/chart/chart-scatter/package.json
index ccfd553c0..60f9bb3ea 100644
--- a/packages/vue/src/chart/chart-scatter/package.json
+++ b/packages/vue/src/chart/chart-scatter/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-scatter",
+  "name": "@opentiny/vue-chart-scatter",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-scatter/src/chart-scatter.vue b/packages/vue/src/chart/chart-scatter/src/chart-scatter.vue
index 71dfbd115..cdc65cb39 100644
--- a/packages/vue/src/chart/chart-scatter/src/chart-scatter.vue
+++ b/packages/vue/src/chart/chart-scatter/src/chart-scatter.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { scatter } from './scatter'
 import { $prefix } from '@opentiny/vue-common'
 
diff --git a/packages/vue/src/chart/chart-scatter/src/scatter.ts b/packages/vue/src/chart/chart-scatter/src/scatter.ts
index e7e375a61..569fc0a6c 100644
--- a/packages/vue/src/chart/chart-scatter/src/scatter.ts
+++ b/packages/vue/src/chart/chart-scatter/src/scatter.ts
@@ -23,7 +23,7 @@
  * itemStyle 图形样式。series-scatter. itemStyle
  */
 
-import { getFormatted, itemLabel, itemPoint, itemContent, isDefined } from '@opentiny/vue-huicharts-core'
+import { getFormatted, itemLabel, itemPoint, itemContent, isDefined } from '@opentiny/vue-chart-core'
 
 const getLegend = (args) => {
   const { legendVisible, legendName } = args
diff --git a/packages/vue/src/chart/chart-sunburst/package.json b/packages/vue/src/chart/chart-sunburst/package.json
index 14efe2020..9f596d2a3 100644
--- a/packages/vue/src/chart/chart-sunburst/package.json
+++ b/packages/vue/src/chart/chart-sunburst/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-sunburst",
+  "name": "@opentiny/vue-chart-sunburst",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-sunburst/src/chart-sunburst.vue b/packages/vue/src/chart/chart-sunburst/src/chart-sunburst.vue
index 9f2c2f1c5..9bfce8645 100644
--- a/packages/vue/src/chart/chart-sunburst/src/chart-sunburst.vue
+++ b/packages/vue/src/chart/chart-sunburst/src/chart-sunburst.vue
@@ -7,7 +7,7 @@
 
 <script>
 import { sunburst } from './sunburst'
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { $prefix } from '@opentiny/vue-common'
 
 export default {
diff --git a/packages/vue/src/chart/chart-sunburst/src/sunburst.ts b/packages/vue/src/chart/chart-sunburst/src/sunburst.ts
index 7faf00c03..6b74a7b7f 100644
--- a/packages/vue/src/chart/chart-sunburst/src/sunburst.ts
+++ b/packages/vue/src/chart/chart-sunburst/src/sunburst.ts
@@ -1,4 +1,4 @@
-import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-huicharts-core'
+import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const getTooltip = () => ({
   trigger: 'item',
diff --git a/packages/vue/src/chart/chart-tree/package.json b/packages/vue/src/chart/chart-tree/package.json
index 96b262803..fc3b38266 100644
--- a/packages/vue/src/chart/chart-tree/package.json
+++ b/packages/vue/src/chart/chart-tree/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-tree",
+  "name": "@opentiny/vue-chart-tree",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/chart/chart-tree/src/chart-tree.vue b/packages/vue/src/chart/chart-tree/src/chart-tree.vue
index dedf81f2c..b67e73c1d 100644
--- a/packages/vue/src/chart/chart-tree/src/chart-tree.vue
+++ b/packages/vue/src/chart/chart-tree/src/chart-tree.vue
@@ -7,7 +7,7 @@
 
 <script>
 import { tree } from './tree'
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { $prefix } from '@opentiny/vue-common'
 
 export default {
diff --git a/packages/vue/src/chart/chart-tree/src/tree.ts b/packages/vue/src/chart/chart-tree/src/tree.ts
index 4c856f419..3bcc45c0f 100644
--- a/packages/vue/src/chart/chart-tree/src/tree.ts
+++ b/packages/vue/src/chart/chart-tree/src/tree.ts
@@ -1,4 +1,4 @@
-import { isObject, itemLabel, itemContent } from '@opentiny/vue-huicharts-core'
+import { isObject, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const getTreeLegend = (args) => {
   const { dimension, rows } = args
diff --git a/packages/vue/src/chart/chart-waterfall/package.json b/packages/vue/src/chart/chart-waterfall/package.json
index 319920abd..0b6f799bd 100644
--- a/packages/vue/src/chart/chart-waterfall/package.json
+++ b/packages/vue/src/chart/chart-waterfall/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-waterfall",
+  "name": "@opentiny/vue-chart-waterfall",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
diff --git a/packages/vue/src/chart/chart-waterfall/src/chart-waterfall.vue b/packages/vue/src/chart/chart-waterfall/src/chart-waterfall.vue
index 434c46691..e974b9696 100644
--- a/packages/vue/src/chart/chart-waterfall/src/chart-waterfall.vue
+++ b/packages/vue/src/chart/chart-waterfall/src/chart-waterfall.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { waterfall } from './waterfall'
 import { t } from '@opentiny/vue-locale'
 import { $prefix } from '@opentiny/vue-common'
diff --git a/packages/vue/src/chart/chart-waterfall/src/waterfall.ts b/packages/vue/src/chart/chart-waterfall/src/waterfall.ts
index a22e30150..78044b564 100644
--- a/packages/vue/src/chart/chart-waterfall/src/waterfall.ts
+++ b/packages/vue/src/chart/chart-waterfall/src/waterfall.ts
@@ -11,7 +11,7 @@
  * labelMap  坐标轴名称映射, 设置别名
  */
 
-import { itemLabel, itemContent, getFormatted } from '@opentiny/vue-huicharts-core'
+import { itemLabel, itemContent, getFormatted } from '@opentiny/vue-chart-core'
 
 const getWaterfallTooltip = (dataType, digit) => {
   const formatter = (items) => {
diff --git a/packages/vue/src/chart/chart-wordcloud/package.json b/packages/vue/src/chart/chart-wordcloud/package.json
index bc717b6b0..ece1db2f3 100644
--- a/packages/vue/src/chart/chart-wordcloud/package.json
+++ b/packages/vue/src/chart/chart-wordcloud/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts-wordcloud",
+  "name": "@opentiny/vue-chart-wordcloud",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-core": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
     "echarts-wordcloud": "2.0.0",
     "@opentiny/vue-common": "workspace:~"
   },
diff --git a/packages/vue/src/chart/chart-wordcloud/src/chart-wordcloud.vue b/packages/vue/src/chart/chart-wordcloud/src/chart-wordcloud.vue
index bd94c205b..575d9b109 100644
--- a/packages/vue/src/chart/chart-wordcloud/src/chart-wordcloud.vue
+++ b/packages/vue/src/chart/chart-wordcloud/src/chart-wordcloud.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 import { $prefix } from '@opentiny/vue-common'
 import { wordcloud } from './wordcloud'
 import 'echarts-wordcloud'
diff --git a/packages/vue/src/chart/chart-wordcloud/src/wordcloud.ts b/packages/vue/src/chart/chart-wordcloud/src/wordcloud.ts
index 5ce4ff2f3..7d23ffe85 100644
--- a/packages/vue/src/chart/chart-wordcloud/src/wordcloud.ts
+++ b/packages/vue/src/chart/chart-wordcloud/src/wordcloud.ts
@@ -7,7 +7,7 @@
  * color	词云图字体颜色	Array[String], String, Function	默认为 "rgb(Math.round(Math.random * 160), Math.round(Math.random * 160), Math.round(Math.random * 160))"
  */
 
-import { itemLabel, itemContent } from '@opentiny/vue-huicharts-core'
+import { itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const getTooltip = (args) => {
   const { tooltipFormatter } = args
diff --git a/packages/vue/src/chart/package.json b/packages/vue/src/chart/package.json
index 4df732580..60f32076d 100644
--- a/packages/vue/src/chart/package.json
+++ b/packages/vue/src/chart/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-huicharts",
+  "name": "@opentiny/vue-chart",
   "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
@@ -21,29 +21,29 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-huicharts-bar": "workspace:~",
-    "@opentiny/vue-huicharts-core": "workspace:~",
-    "@opentiny/vue-huicharts-histogram": "workspace:~",
-    "@opentiny/vue-huicharts-line": "workspace:~",
-    "@opentiny/vue-huicharts-pie": "workspace:~",
-    "@opentiny/vue-huicharts-radar": "workspace:~",
-    "@opentiny/vue-huicharts-ring": "workspace:~",
-    "@opentiny/vue-huicharts-waterfall": "workspace:~",
-    "@opentiny/vue-huicharts-funnel": "workspace:~",
-    "@opentiny/vue-huicharts-gauge": "workspace:~",
-    "@opentiny/vue-huicharts-scatter": "workspace:~",
-    "@opentiny/vue-huicharts-tree": "workspace:~",
-    "@opentiny/vue-huicharts-sankey": "workspace:~",
-    "@opentiny/vue-huicharts-candle": "workspace:~",
-    "@opentiny/vue-huicharts-heatmap": "workspace:~",
-    "@opentiny/vue-huicharts-liquidfill": "workspace:~",
-    "@opentiny/vue-huicharts-wordcloud": "workspace:~",
-    "@opentiny/vue-huicharts-map": "workspace:~",
-    "@opentiny/vue-huicharts-boxplot": "workspace:~",
-    "@opentiny/vue-huicharts-amap": "workspace:~",
-    "@opentiny/vue-huicharts-bmap": "workspace:~",
-    "@opentiny/vue-huicharts-graph": "workspace:~",
-    "@opentiny/vue-huicharts-sunburst": "workspace:~",
+    "@opentiny/vue-chart-bar": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
+    "@opentiny/vue-chart-histogram": "workspace:~",
+    "@opentiny/vue-chart-line": "workspace:~",
+    "@opentiny/vue-chart-pie": "workspace:~",
+    "@opentiny/vue-chart-radar": "workspace:~",
+    "@opentiny/vue-chart-ring": "workspace:~",
+    "@opentiny/vue-chart-waterfall": "workspace:~",
+    "@opentiny/vue-chart-funnel": "workspace:~",
+    "@opentiny/vue-chart-gauge": "workspace:~",
+    "@opentiny/vue-chart-scatter": "workspace:~",
+    "@opentiny/vue-chart-tree": "workspace:~",
+    "@opentiny/vue-chart-sankey": "workspace:~",
+    "@opentiny/vue-chart-candle": "workspace:~",
+    "@opentiny/vue-chart-heatmap": "workspace:~",
+    "@opentiny/vue-chart-liquidfill": "workspace:~",
+    "@opentiny/vue-chart-wordcloud": "workspace:~",
+    "@opentiny/vue-chart-map": "workspace:~",
+    "@opentiny/vue-chart-boxplot": "workspace:~",
+    "@opentiny/vue-autonavi-map": "workspace:~",
+    "@opentiny/vue-baidu-map": "workspace:~",
+    "@opentiny/vue-chart-graph": "workspace:~",
+    "@opentiny/vue-chart-sunburst": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
diff --git a/packages/vue/src/chart/src/index.ts b/packages/vue/src/chart/src/index.ts
index c0e365293..1c373de73 100644
--- a/packages/vue/src/chart/src/index.ts
+++ b/packages/vue/src/chart/src/index.ts
@@ -1,29 +1,29 @@
-import { ChartRing } from '@opentiny/vue-huicharts-ring'
-import { ChartPie } from '@opentiny/vue-huicharts-pie'
-import { ChartBar } from '@opentiny/vue-huicharts-bar'
-import { ChartHistogram } from '@opentiny/vue-huicharts-histogram'
-import { ChartRadar } from '@opentiny/vue-huicharts-radar'
-import { ChartLine } from '@opentiny/vue-huicharts-line'
+import { ChartRing } from '@opentiny/vue-chart-ring'
+import { ChartPie } from '@opentiny/vue-chart-pie'
+import { ChartBar } from '@opentiny/vue-chart-bar'
+import { ChartHistogram } from '@opentiny/vue-chart-histogram'
+import { ChartRadar } from '@opentiny/vue-chart-radar'
+import { ChartLine } from '@opentiny/vue-chart-line'
 
-import { AutonaviMap } from '@opentiny/vue-huicharts-amap'
-import { BaiduMap } from '@opentiny/vue-huicharts-bmap'
-import { ChartBoxplot } from '@opentiny/vue-huicharts-boxplot'
-import { ChartCandle } from '@opentiny/vue-huicharts-candle'
-import { ChartFunnel } from '@opentiny/vue-huicharts-funnel'
-import { ChartGauge } from '@opentiny/vue-huicharts-gauge'
-import { ChartGraph } from '@opentiny/vue-huicharts-graph'
-import { ChartHeatmap } from '@opentiny/vue-huicharts-heatmap'
-import { ChartLiquidfill } from '@opentiny/vue-huicharts-liquidfill'
-import { ChartMap } from '@opentiny/vue-huicharts-map'
+import { AutonaviMap } from '@opentiny/vue-autonavi-map'
+import { BaiduMap } from '@opentiny/vue-baidu-map'
+import { ChartBoxplot } from '@opentiny/vue-chart-boxplot'
+import { ChartCandle } from '@opentiny/vue-chart-candle'
+import { ChartFunnel } from '@opentiny/vue-chart-funnel'
+import { ChartGauge } from '@opentiny/vue-chart-gauge'
+import { ChartGraph } from '@opentiny/vue-chart-graph'
+import { ChartHeatmap } from '@opentiny/vue-chart-heatmap'
+import { ChartLiquidfill } from '@opentiny/vue-chart-liquidfill'
+import { ChartMap } from '@opentiny/vue-chart-map'
 
-import { ChartSankey } from '@opentiny/vue-huicharts-sankey'
-import { ChartScatter } from '@opentiny/vue-huicharts-scatter'
-import { ChartSunburst } from '@opentiny/vue-huicharts-sunburst'
-import { ChartTree } from '@opentiny/vue-huicharts-tree'
-import { ChartWaterfall } from '@opentiny/vue-huicharts-waterfall'
-import { ChartWordcloud } from '@opentiny/vue-huicharts-wordcloud'
+import { ChartSankey } from '@opentiny/vue-chart-sankey'
+import { ChartScatter } from '@opentiny/vue-chart-scatter'
+import { ChartSunburst } from '@opentiny/vue-chart-sunburst'
+import { ChartTree } from '@opentiny/vue-chart-tree'
+import { ChartWaterfall } from '@opentiny/vue-chart-waterfall'
+import { ChartWordcloud } from '@opentiny/vue-chart-wordcloud'
 
-import Core from '@opentiny/vue-huicharts-core'
+import Core from '@opentiny/vue-chart-core'
 
 import { $prefix, defineComponent, h } from '@opentiny/vue-common'
 
diff --git a/tsconfig.solid.json b/tsconfig.solid.json
index cd7e82b0a..f8c5e211d 100644
--- a/tsconfig.solid.json
+++ b/tsconfig.solid.json
@@ -5,36 +5,16 @@
     "noImplicitAny": false,
     "baseUrl": ".",
     "paths": {
-      "@opentiny/vue-huicharts-amap": [
-        "packages/vue/src/chart/autonavi-map"
-      ],
-      "@opentiny/vue-huicharts-bmap": [
-        "packages/vue/src/chart/baidu-map"
-      ],
-      "@opentiny/vue-huicharts-*": [
-        "packages/vue/src/chart/chart-*"
-      ],
-      "@opentiny/vue-*": [
-        "packages/vue-*",
-        "packages/vue/src/*"
-      ],
-      "@opentiny/vue-renderless/types*": [
-        "packages/renderless/types*"
-      ],
-      "@opentiny/vue-renderless*": [
-        "packages/renderless/src*"
-      ],
-      "virtual:common/adapter/vue": [
-        "packages/vue-common/src/adapter/vue3/index.ts"
-      ],
-      "virtual:locale/vue": [
-        "packages/vue-locale/src/vue3/index.ts"
-      ]
+      "@opentiny/vue-autonavi-map": ["packages/vue/src/chart/autonavi-map"],
+      "@opentiny/vue-baidu-map": ["packages/vue/src/chart/baidu-map"],
+      "@opentiny/vue-chart-*": ["packages/vue/src/chart/chart-*"],
+      "@opentiny/vue-*": ["packages/vue-*", "packages/vue/src/*"],
+      "@opentiny/vue-renderless/types*": ["packages/renderless/types*"],
+      "@opentiny/vue-renderless*": ["packages/renderless/src*"],
+      "virtual:common/adapter/vue": ["packages/vue-common/src/adapter/vue3/index.ts"],
+      "virtual:locale/vue": ["packages/vue-locale/src/vue3/index.ts"]
     },
-    "types": [
-      "node",
-      "vite/client"
-    ]
+    "types": ["node", "vite/client"]
   },
   "vueCompilerOptions": {
     "target": 3
@@ -46,9 +26,5 @@
     "examples/vue3/shims-app.d.ts",
     "examples/vue3/shims-vue.d.ts"
   ],
-  "exclude": [
-    "**/node_modules",
-    "**/dist*",
-    "**/*.md"
-  ]
-}
\ No newline at end of file
+  "exclude": ["**/node_modules", "**/dist*", "**/*.md"]
+}
diff --git a/tsconfig.vue2.7.json b/tsconfig.vue2.7.json
index e89137591..44e008795 100644
--- a/tsconfig.vue2.7.json
+++ b/tsconfig.vue2.7.json
@@ -5,36 +5,16 @@
     "noImplicitAny": false,
     "baseUrl": ".",
     "paths": {
-      "@opentiny/vue-huicharts-amap": [
-        "packages/vue/src/chart/autonavi-map"
-      ],
-      "@opentiny/vue-huicharts-bmap": [
-        "packages/vue/src/chart/baidu-map"
-      ],
-      "@opentiny/vue-huicharts-*": [
-        "packages/vue/src/chart/chart-*"
-      ],
-      "@opentiny/vue-*": [
-        "packages/vue-*",
-        "packages/vue/src/*"
-      ],
-      "@opentiny/vue-renderless/types*": [
-        "packages/renderless/types*"
-      ],
-      "@opentiny/vue-renderless*": [
-        "packages/renderless/src*"
-      ],
-      "virtual:common/adapter/vue": [
-        "packages/vue-common/src/adapter/vue2.7/index.ts"
-      ],
-      "virtual:locale/vue": [
-        "packages/vue-locale/src/vue2.7/index.ts"
-      ]
+      "@opentiny/vue-autonavi-map": ["packages/vue/src/chart/autonavi-map"],
+      "@opentiny/vue-baidu-map": ["packages/vue/src/chart/baidu-map"],
+      "@opentiny/vue-chart-*": ["packages/vue/src/chart/chart-*"],
+      "@opentiny/vue-*": ["packages/vue-*", "packages/vue/src/*"],
+      "@opentiny/vue-renderless/types*": ["packages/renderless/types*"],
+      "@opentiny/vue-renderless*": ["packages/renderless/src*"],
+      "virtual:common/adapter/vue": ["packages/vue-common/src/adapter/vue2.7/index.ts"],
+      "virtual:locale/vue": ["packages/vue-locale/src/vue2.7/index.ts"]
     },
-    "types": [
-      "node",
-      "vite/client"
-    ]
+    "types": ["node", "vite/client"]
   },
   "vueCompilerOptions": {
     "target": 2.7
@@ -46,9 +26,5 @@
     "examples/vue2.7/shims-app.d.ts",
     "examples/vue2.7/shims-vue.d.ts"
   ],
-  "exclude": [
-    "**/node_modules",
-    "**/dist*",
-    "**/*.md"
-  ]
-}
\ No newline at end of file
+  "exclude": ["**/node_modules", "**/dist*", "**/*.md"]
+}
diff --git a/tsconfig.vue2.json b/tsconfig.vue2.json
index 8346d2726..75a77145d 100644
--- a/tsconfig.vue2.json
+++ b/tsconfig.vue2.json
@@ -5,36 +5,16 @@
     "noImplicitAny": false,
     "baseUrl": ".",
     "paths": {
-      "@opentiny/vue-huicharts-amap": [
-        "packages/vue/src/chart/autonavi-map"
-      ],
-      "@opentiny/vue-huicharts-bmap": [
-        "packages/vue/src/chart/baidu-map"
-      ],
-      "@opentiny/vue-huicharts-*": [
-        "packages/vue/src/chart/chart-*"
-      ],
-      "@opentiny/vue-*": [
-        "packages/vue-*",
-        "packages/vue/src/*"
-      ],
-      "@opentiny/vue-renderless/types*": [
-        "packages/renderless/types*"
-      ],
-      "@opentiny/vue-renderless*": [
-        "packages/renderless/src*"
-      ],
-      "virtual:common/adapter/vue": [
-        "packages/vue-common/src/adapter/vue2/index.ts"
-      ],
-      "virtual:locale/vue": [
-        "packages/vue-locale/src/vue2/index.ts"
-      ]
+      "@opentiny/vue-autonavi-map": ["packages/vue/src/chart/autonavi-map"],
+      "@opentiny/vue-baidu-map": ["packages/vue/src/chart/baidu-map"],
+      "@opentiny/vue-chart-*": ["packages/vue/src/chart/chart-*"],
+      "@opentiny/vue-*": ["packages/vue-*", "packages/vue/src/*"],
+      "@opentiny/vue-renderless/types*": ["packages/renderless/types*"],
+      "@opentiny/vue-renderless*": ["packages/renderless/src*"],
+      "virtual:common/adapter/vue": ["packages/vue-common/src/adapter/vue2/index.ts"],
+      "virtual:locale/vue": ["packages/vue-locale/src/vue2/index.ts"]
     },
-    "types": [
-      "node",
-      "vite/client"
-    ]
+    "types": ["node", "vite/client"]
   },
   "vueCompilerOptions": {
     "target": 2
@@ -46,9 +26,5 @@
     "examples/vue2/shims-app.d.ts",
     "examples/vue2/shims-vue.d.ts"
   ],
-  "exclude": [
-    "**/node_modules",
-    "**/dist*",
-    "**/*.md"
-  ]
-}
\ No newline at end of file
+  "exclude": ["**/node_modules", "**/dist*", "**/*.md"]
+}
diff --git a/tsconfig.vue3.json b/tsconfig.vue3.json
index cd7e82b0a..f8c5e211d 100644
--- a/tsconfig.vue3.json
+++ b/tsconfig.vue3.json
@@ -5,36 +5,16 @@
     "noImplicitAny": false,
     "baseUrl": ".",
     "paths": {
-      "@opentiny/vue-huicharts-amap": [
-        "packages/vue/src/chart/autonavi-map"
-      ],
-      "@opentiny/vue-huicharts-bmap": [
-        "packages/vue/src/chart/baidu-map"
-      ],
-      "@opentiny/vue-huicharts-*": [
-        "packages/vue/src/chart/chart-*"
-      ],
-      "@opentiny/vue-*": [
-        "packages/vue-*",
-        "packages/vue/src/*"
-      ],
-      "@opentiny/vue-renderless/types*": [
-        "packages/renderless/types*"
-      ],
-      "@opentiny/vue-renderless*": [
-        "packages/renderless/src*"
-      ],
-      "virtual:common/adapter/vue": [
-        "packages/vue-common/src/adapter/vue3/index.ts"
-      ],
-      "virtual:locale/vue": [
-        "packages/vue-locale/src/vue3/index.ts"
-      ]
+      "@opentiny/vue-autonavi-map": ["packages/vue/src/chart/autonavi-map"],
+      "@opentiny/vue-baidu-map": ["packages/vue/src/chart/baidu-map"],
+      "@opentiny/vue-chart-*": ["packages/vue/src/chart/chart-*"],
+      "@opentiny/vue-*": ["packages/vue-*", "packages/vue/src/*"],
+      "@opentiny/vue-renderless/types*": ["packages/renderless/types*"],
+      "@opentiny/vue-renderless*": ["packages/renderless/src*"],
+      "virtual:common/adapter/vue": ["packages/vue-common/src/adapter/vue3/index.ts"],
+      "virtual:locale/vue": ["packages/vue-locale/src/vue3/index.ts"]
     },
-    "types": [
-      "node",
-      "vite/client"
-    ]
+    "types": ["node", "vite/client"]
   },
   "vueCompilerOptions": {
     "target": 3
@@ -46,9 +26,5 @@
     "examples/vue3/shims-app.d.ts",
     "examples/vue3/shims-vue.d.ts"
   ],
-  "exclude": [
-    "**/node_modules",
-    "**/dist*",
-    "**/*.md"
-  ]
-}
\ No newline at end of file
+  "exclude": ["**/node_modules", "**/dist*", "**/*.md"]
+}