chore: update docs

docs/assets/examples/menu.json

@@ -15,20 +15,6 @@
             "en": "Basic Appear Animation Config"
           }
         },
-        {
-          "path": "disappear-animation-dissolve-config",
-          "title": {
-            "zh": "溶解效果退场动画配置",
-            "en": "Disappear Dissolve Animation Config"
-          }
-        },
-        {
-          "path": "disappear-animation-glitch-config",
-          "title": {
-            "zh": "故障效果退场动画配置",
-            "en": "Disappear Glitch Animation Config"
-          }
-        },
         {
           "path": "bar-oneByOne-group",
           "title": {

docs/assets/guide/menu.json

@@ -470,6 +470,13 @@
                 "zh": "3d 漏斗图",
                 "en": "3D Funnel Chart"
               }
+            },
+            {
+              "path": "Candlestick",
+              "title": {
+                "zh": "蜡烛图",
+                "en": "Candlestick Chart"
+              }
             }
           ]
         },

docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Area.md

@@ -8,7 +8,7 @@
 
 ## 图表构成
 
-面积图由点图元、线图元、坐标轴及其他组件构成。  
+面积图由点图元、线图元、坐标轴及其他组件构成。
 ![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/b42a7699efcd4dfa8b8aa3a04.png)
 
 点图元、线图元为面积图的基本要素，相关的绘制配置必不可少:

docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Bar.md

@@ -34,6 +34,20 @@
 ## 快速上手
 
 ```javascript livedemo
+/**
+ * 自2.0.0版本后，3d图表从vchart-extension中引入
+ *
+ * import { registerBar3dChart } from '@visactor/vchart-extension';
+ *
+ * registerBar3dChart();
+ */
+
+/** --Remove the following code when using in business-- */
+if (VChartExtension.registerBar3dChart) {
+  VChartExtension.registerBar3dChart();
+}
+/** --Remove the above code when using in business-- */
+
 const spec = {
   type: 'bar3d',
   data: [
@@ -76,6 +90,9 @@ const vchart = new VChart(spec, {
   }
 });
 vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
 ```
 
 其他配置参考[柱状图]()

docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Funnel.md

@@ -34,6 +34,20 @@
 ## 快速上手
 
 ```javascript livedemo
+/**
+ * 自2.0.0版本后，3d图表从vchart-extension中引入
+ *
+ * import { registerFunnel3dChart } from '@visactor/vchart-extension';
+ *
+ * registerFunnel3dChart();
+ */
+
+/** --Remove the following code when using in business-- */
+if (VChartExtension.registerFunnel3dChart) {
+  VChartExtension.registerFunnel3dChart();
+}
+/** --Remove the above code when using in business-- */
+
 const spec = {
   padding: {
     top: 30
@@ -68,19 +82,9 @@ const spec = {
       ]
     }
   ],
-  funnel3d: {
-    style: {
-      // stroke: 'red',
-      // strokeWidth: 1,
-      face: [false, false, true, false, true, false]
-    }
-  },
   label: {
     visible: true,
     support3d: true
-    // style: {
-    //   stroke: false
-    // }
   },
   maxSize: 400,
   minSize: 50,
@@ -94,10 +98,17 @@ const vchart = new VChart(spec, {
   dom: CONTAINER_ID,
   disableDirtyBounds: true,
   options3d: {
-    enable: true
+    enable: true,
+    center: {
+      dx: 100,
+      dy: 100
+    }
   }
 });
 vchart.renderSync();
+
+// Just for the convenience of console debugging, do not copy
+window['vchart'] = vchart;
 ```
 
 其他配置参考[漏斗图]()

docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_WordCloud.md

@@ -26,6 +26,20 @@
 代码演示
 
 ```javascript livedemo
+/**
+ * 自2.0.0版本后，3d图表从vchart-extension中引入
+ *
+ * import { registerWordCloud3dChart } from '@visactor/vchart-extension';
+ *
+ * registerWordCloud3dChart();
+ */
+
+/** --Remove the following code when using in business-- */
+if (VChartExtension.registerWordCloud3dChart) {
+  VChartExtension.registerWordCloud3dChart();
+}
+/** --Remove the above code when using in business-- */
+
 const spec = {
   type: 'wordCloud3d',
   maskShape: `https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/log.jpeg`,

docs/assets/guide/zh/tutorial_docs/Chart_Types/candlestick.md

@@ -0,0 +1,159 @@
+# 扩展图表：蜡烛图
+
+蜡烛图（K 线图）是金融领域常用的图表类型，用于展示一段时间内的价格走势，包括开盘价、最高价、最低价和收盘价四个关键价格点。
+
+VChart 提供了蜡烛图扩展组件，支持灵活的样式配置和交互功能，能够满足各种金融数据可视化需求。
+
+![img](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/candlestick/candlestick-basic.png)
+
+## 如何使用扩展图表
+
+蜡烛图需要手动注册后才能使用，注册和使用方式如下：
+
+```js
+import VChart from '@visactor/vchart';
+import { registerCandlestickChart } from '@visactor/vchart-extension';
+
+const spec = {
+  type: 'candlestick'
+  //  your spec
+};
+registerCandlestickChart();
+
+const vchart = new VChart(spec, { dom: 'chart' });
+vchart.renderSync();
+```
+
+如果是通过 cdn 引入的方式，注册方式如下：
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@visactor/vchart-extension/build/index.min.js"></script>
+<script>
+  const spec = {
+    type: 'candlestick'
+
+    //  your spec
+  };
+  VChartExtension.registerCandlestickChart();
+
+  const vchart = new VChart.default(spec, { dom: 'chart' });
+  vchart.renderSync();
+</script>
+```
+
+## 相关配置项
+
+```js
+export interface ICandlestickSeriesSpec
+  extends Omit<ICartesianSeriesSpec, 'xField' | 'yField' | 'direction'>,
+    IAnimationSpec<SeriesMarkNameEnum.boxPlot, string> {
+  type: 'candlestick';
+  /**
+   * 时间轴字段
+   */
+  xField: string | string[];
+  /**
+   * 开盘价字段
+   */
+  openField?: string;
+  /**
+   * 最高价字段
+   */
+  highField?: string;
+  /**
+   * 最低价字段
+   */
+  lowField?: string;
+  /**
+   * 收盘价字段
+   */
+  closeField?: string;
+  /**
+   * 上涨蜡烛图颜色
+   */
+  rising?: IMarkSpec<ICandlestickMarkSpec>;
+  /**
+   * 下跌蜡烛图颜色
+   */
+  falling?: IMarkSpec<ICandlestickMarkSpec>;
+  /**
+   * 平盘蜡烛图颜色
+   */
+  doji?: IMarkSpec<ICandlestickMarkSpec>;
+  /**
+   * 蜡烛图标记配置
+   */
+  candlestick?: IMarkSpec<ICandlestickMarkSpec>;
+}
+
+export interface ICandlestickMarkSpec extends ICommonSpec {
+  /**
+   * 盒子宽度
+   */
+  boxWidth?: number;
+  /**
+   * 盒子填充颜色，为空则不填充
+   */
+  boxFill?: string | ((datum: Datum) => string);
+  /**
+   * 最低价
+   */
+  low?: (datum: Datum) => number;
+  /**
+   * 收盘价
+   */
+  close?: (datum: Datum) => number;
+  /**
+   * 开盘价
+   */
+  open?: (datum: Datum) => number;
+  /**
+   * 最高价
+   */
+  high?: (datum: Datum) => number;
+}
+```
+
+## 蜡烛图示例
+
+- [基础蜡烛图](/vchart/demo/candlestick-charts/candlestick-basic)
+- [蜡烛与均线组合用法](/vchart/demo/candlestick-charts/candlestick-with-MA)
+
+## 配置详解
+
+### 数据字段配置
+
+蜡烛图需要配置以下数据字段：
+
+- `xField`: 时间轴字段，用于展示时间维度
+- `openField`: 开盘价字段
+- `highField`: 最高价字段
+- `lowField`: 最低价字段
+- `closeField`: 收盘价字段
+
+### 样式配置
+
+蜡烛图支持三种状态的样式配置：
+
+- `rising`: 上涨状态（收盘价 > 开盘价）的样式配置
+- `falling`: 下跌状态（收盘价 < 开盘价）的样式配置
+- `doji`: 平盘状态（收盘价 = 开盘价）的样式配置
+
+每种状态都可以配置以下样式属性：
+
+- `boxWidth`: 蜡烛图盒子的宽度
+- `boxFill`: 盒子的填充颜色
+- `stroke`: 边框颜色
+- `lineWidth`: 边框宽度
+
+### 动画配置
+
+蜡烛图内置了入场和出场动画，可以通过 `animation` 配置自定义动画效果。默认动画为 `candlestickScaleIn` 和 `candlestickScaleOut`。
+
+## 最佳实践
+
+1. **数据准备**：确保数据包含完整的时间、开盘价、最高价、最低价和收盘价字段
+2. **颜色配置**：建议上涨使用红色、下跌使用绿色，符合国内市场习惯
+3. **响应式设计**：在小屏幕设备上，可以适当减小 `boxWidth` 以避免蜡烛图重叠
+4. **组合图表**：可以与成交量柱状图组合，提供更全面的市场分析视图