[Docs]: 新增文档 「图表介绍」

[interstellarmt]

任务介绍

此 ISSUE 为 AntV 开源共建计划（AntV Open Source Contribution Plan，简称 AntV OSCP）Phase3 - 文档季的任务 ISSUE，欢迎社区开发者参与共建~

• 更多任务，可查看 GitHub Project - 2025 AntV OSCP Season of Docs。

This ISSUE is one of the tasks of the AntV Open Source Contribution Plan (referred to as AntV OSCP) Pharse3 - Season of Docs . Welcome to join us in building it together!

• For more tasks, you can check the GitHub Project - 2025 AntV OSCP Season of Docs.

新增文档 「图表介绍」

任务介绍

• 任务名称：新增文档 「图表介绍」文档
• 技术方向：g2 / docs
• 任务难度：新手友好 🌟
• 单个文档（包括中文、英文）可获得积分：20分

任务列表

领取任务后需要在 7 天内完成～超时会被释放哦

• [x] 弧长连接图 @afkdsghk211331
• [x] 面积图 @Eomnational
• [x] 柱状图 @interstellarmt
• [x] 双向柱状图 @X-x-start
• [x] 箱形图 @pengcai6
• [x] 气泡图 @Eomnational
• [x] 带气泡的地图 @pengcai6
• [x] 子弹图 @pengcai6
• [x] 和弦图 @pengcai6
• [x] 分级统计地图 @pengcai6
• [x] 色块图 @Eomnational
• [x] 等高线 @pengcai6
• [ ] 分布曲线图 @bT0nG
• [x] 环图 @pengcai6
• [ ] 点描法地图 @afkdsghk211331
• [x] 漏斗图 @Eomnational
• [x] 仪表盘 @Eomnational
• [x] 热力图 @Eomnational
• [x] 直方图 @Eomnational
• [x] K线图 @pengcai6
• [x] 卡吉图 @pengcai6
• [ ] 折线图 @Eomnational
• [x] 马赛克图 @pengcai6
• [x] 分组柱状图 @pengcai6
• [ ] 饼图 @Eomnational
• [x] 雷达图 @X-x-start
• [x] 玉珏图 @pengcai6
• [ ] 回归曲线图 @bT0nG
• [x] 南丁格尔玫瑰图 @pengcai6
• [x] 桑基图 @Eomnational
• [ ] 散点图 @Eomnational
• [ ] 螺旋图 @Eomnational
• [ ] 堆叠面积图 @fzr365
• [ ] 堆叠柱状图 @fzr365
• [ ] 茎叶图 @fzr365
• [ ] 矩形树图 @fzr365
• [ ] 韦恩图 @fzr365
• [ ] 词云图 @Eomnational
• [x] 平行坐标系图 @interstellarmt
• [ ] 小提琴图 @interstellarmt
• [ ] 旭日图
• [ ] 打包图
• [ ] 甘特图
• [ ] 瀑布图

详细要求

• 文档规范：

  • 参考文档预览：https://github.com/antvis/G2/blob/v5/site/docs/charts/bar.zh.md

  • 代码规范：

    • 示例代码统一使用 spec 语法。即 chart.options({})，可以在图表示例页面完成切换。
    • 示例代码统一用 js | ob { autoMount: true }新语法包裹，示例详见参考文档。避免闭包语法污染图表定义
    • 文档代码编写地址：site/docs/charts
    • 相似图表和分类部分组件内部已经实现，只用声明组件，然后在md文档参数里补全 category 和 similar 。

  • 内容规范：

    • 文档包括中文和英文文档，英文文档里的路由记得加上/en/前缀。。
    • 内容可以参考 网页预览，代码地址
    • 图表基础知识和举例、相似图表可以参考图之典。
    • 截图部分建议用G2 5.0代码的截图，代码示例部分需要用G2 5.0的语法实现，如果G2 5.0不支持，可以空缺代码示例，保留图片，仅做图表介绍页面。
    • 文档参数中需要包括title, order, screenshot, category, similar。
    • 文档需包括【XXX的简介】【XXX的构成】【XXX的应用场景】【XXX的扩展】【XXX与其他图表的对比】【相似图表】【分类】。
    • 英文文档的小标题统一：

## Introduction to Bar Charts

**Other Names**

## Components of a Bar Chart

## Use Cases of Bar Charts

### Suitable Use Cases

### Unsuitable Use Cases

## Comparing Bar Charts to Other Charts

### Bar Charts, [Line Charts](/en/charts/line), and [Pie Charts](/en/charts/pie)

### Bar Charts and Nightingale Charts (Rose Diagrams)

## Similar Charts

## Categories

- 截图和代码示例可以在图表示例里查找，如果需要上传截图，可以加入OSCP群， 我们会帮助上传。

能力要求

- 对 G2 有一定了解，能阅读 G2 源码，编写示例。

执行路径

1. 认领任务

选择感兴趣的且没有 Assignee 的任务，按格式回复，该任务 assign 给你后即为成功认领~

• 认领回复格式：【@GitHub ID + Give it to me + Chart Name】
• eg：【@interstellarmt Give it to me 柱状图】

2. 做任务

1. clone g2 代码

git clone https://github.com/antvis/G2.git

2. 拉取所有线上分支

git fetch

3. 切换到 v5 分支

git checkout v5

4. 安装依赖

pnpm install

5. 进入 site 包

cd site

6. 安装 site 依赖

pnpm install

7. 本地启动 site 站点

pnpm run start

8. 优化文档并预览效果

3. 提交 PR

请保证文档语意通顺、格式正确、代码示例完整且能够正确编译，否则该 PR 将不会被 review 和 merge，此 issue 将被重新释放。

1. 提交 Pull Request，等待 Code Review

• PR 标题参考 docs: 任务名称 ，如 docs: 改造「核心概念 - 标记（Mark）-wordCloud」文档 ，并关联 OSCP 标签，以便快速进入 PR review 阶段。
• PR 与对应任务 ISSUE 进行关联，方式：在 PR 正文中，通过 - #任务 ISSUE 号 即可实现关联，eg：

2. 根据（多次） Code Review 建议修改

3 等待合并入 v5 分支后，积分生效

[Eomnational]

@Eomnational Give it to me 面积图 直方图 饼图 色块图 折线图 散点图 词云图

[pengcai6]

@pengcai6 Give it to me K线图 卡吉图 马赛克图 分组柱状图 玉珏图 南丁格尔玫瑰图

[X-x-start]

Give it to me 雷达图 分组柱状图

[interstellarmt]

Give it to me 雷达图 分组柱状图

分组柱状图被认领啦，要不换一个～

[pengcai6]

@pengcai6 Give it to me 环图

[Eomnational]

@Eomnational Give it to me 漏斗图 仪表盘 漏斗图

[fzr365]

@fzr365 Give it to me 层叠柱状图 茎叶图 矩形树图 韦恩图

[Eomnational]

@Eomnational Give it to me 气泡图 螺旋图 桑基图

[X-x-start]

@X-x-start Give it to me 双向柱状图

[pengcai6]

@pengcai6 Give it to me 箱形图 气泡图

[pengcai6]

@pengcai6 Give it to me带气泡的地图 子弹图 和弦图 分级统计地图

[Eomnational]

@Eomnational Give it to me 热力图

[fzr365]

@fzr365 Give it to me 层叠面积图

[pengcai6]

@pengcai6 Give it to me 等高线

[bT0nG]

@bT0nG Give it to me 分布曲线图 回归曲线图

[interstellarmt]

新的 OB 代码块写法是为了图表代码里面不会额外添加挂载容器和闭包的无关代码，可以参考这个 PR 预览效果之前需要升级一下 @antv/dumi-theme-antv 到 0.7.5，不然会报错～

[afkdsghk211331]

@afkdsghk211331 Give it to me 弧长连接图

[afkdsghk211331]

@afkdsghk211331 Give it to me 点描法地图

[interstellarmt]

关于图表基础知识和相似图表介绍的部分可以参考一下 http://www.tuzhidian.com/ 相似图表部分只要在上面图表介绍的list里都可以引用， similar 的名称和 对应图表的md文件名称和 https://github.com/antvis/old-site/tree/b1a1c0ccc9f5fa37be9b1e689bc9707eb03857bf/vis/doc/chart/details 保持统一，减少后期修改工作量

[interstellarmt]

英文文档的结构统一如下所示：

## Introduction to Bar Charts

**Other Names**

## Components of a Bar Chart

## Use Cases of Bar Charts

### Suitable Use Cases

### Unsuitable Use Cases

## Comparing Bar Charts to Other Charts

### Bar Charts, [Line Charts](/en/charts/line), and [Pie Charts](/en/charts/pie)

### Bar Charts and Nightingale Charts (Rose Diagrams)

## Similar Charts

## Categories

避免因为不同人翻译之后的单词不一致。

[interstellarmt]

这次活动的结算会以 5.30 前 merge 的 PR 为统计范围，后续 merge 的 PR 虽然也会被相应积分奖励，但不会计入排行榜。如果大家想冲击排行榜，尽量在 530 前完成 PR 合并哈~🎉

[X-x-start]

这是来自QQ邮箱的假期自动回复邮件。   您好，你的邮件我已经收到。