diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json index cf10075575..244e36025a 100644 --- a/docs/assets/examples/menu.json +++ b/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": { diff --git a/docs/assets/guide/menu.json b/docs/assets/guide/menu.json index c1f6704d46..88169cd389 100644 --- a/docs/assets/guide/menu.json +++ b/docs/assets/guide/menu.json @@ -470,6 +470,13 @@ "zh": "3d 漏斗图", "en": "3D Funnel Chart" } + }, + { + "path": "Candlestick", + "title": { + "zh": "蜡烛图", + "en": "Candlestick Chart" + } } ] }, diff --git a/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Area.md b/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Area.md index 3c9ad579fd..c62f1ac07b 100644 --- a/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Area.md +++ b/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) 点图元、线图元为面积图的基本要素，相关的绘制配置必不可少: diff --git a/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Bar.md b/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Bar.md index 3856c818c0..63d99eb66c 100644 --- a/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Bar.md +++ b/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; ``` 其他配置参考[柱状图]() diff --git a/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Funnel.md b/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Funnel.md index eb60fa7810..44b9f2428d 100644 --- a/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_Funnel.md +++ b/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; ``` 其他配置参考[漏斗图]() diff --git a/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_WordCloud.md b/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_WordCloud.md index f489fa5727..1be9eb768e 100644 --- a/docs/assets/guide/zh/tutorial_docs/Chart_Types/3d_WordCloud.md +++ b/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`, diff --git a/docs/assets/guide/zh/tutorial_docs/Chart_Types/candlestick.md b/docs/assets/guide/zh/tutorial_docs/Chart_Types/candlestick.md new file mode 100644 index 0000000000..26425e6c8f --- /dev/null +++ b/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 + + + +``` + +## 相关配置项 + +```js +export interface ICandlestickSeriesSpec + extends Omit, + IAnimationSpec { + type: 'candlestick'; + /** + * 时间轴字段 + */ + xField: string | string[]; + /** + * 开盘价字段 + */ + openField?: string; + /** + * 最高价字段 + */ + highField?: string; + /** + * 最低价字段 + */ + lowField?: string; + /** + * 收盘价字段 + */ + closeField?: string; + /** + * 上涨蜡烛图颜色 + */ + rising?: IMarkSpec; + /** + * 下跌蜡烛图颜色 + */ + falling?: IMarkSpec; + /** + * 平盘蜡烛图颜色 + */ + doji?: IMarkSpec; + /** + * 蜡烛图标记配置 + */ + candlestick?: IMarkSpec; +} + +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. **组合图表**：可以与成交量柱状图组合，提供更全面的市场分析视图