G2 可视化库快速入门指南

G2 可视化库快速入门指南

G2📊 A concise and progressive visualization grammar.项目地址:https://gitcode.com/gh_mirrors/g2/G2

1. 项目目录结构及介绍

在 https://github.com/antvis/G2.git 中下载或克隆 G2 的源代码后，你会看到以下主要的目录结构：

G2/
├── dist/                    # 构建后的发布文件
├── docs/                    # 文档相关文件
├── examples/                # 示例代码
│   ├── basic/               # 基础图表示例
│   └── advanced/           # 高级功能示例
├── lib/                     # 源码目录
│   ├── chart/               # 图表核心模块
│   ├── geometry/            # 几何标记模块
│   ├── scale/               # 度量模块
│   ├── coord/               # 坐标系模块
│   └── ...                  # 其他模块
├── packages/                # 打包配置
├── scripts/                 # 构建脚本
├── test/                    # 测试文件
└── ...

• dist: 包含构建后的库文件，供生产环境使用。
• docs: 存放项目的文档。
• examples: 提供丰富的示例代码，帮助理解如何使用 G2。
• lib: G2 的核心源码，包括各种模块。
• packages: 相关包的配置文件，如 Lerna 用来管理多包仓库。
• scripts: 构建和开发的脚本工具。
• test: 单元测试和集成测试文件。

2. 项目的启动文件介绍

G2 的源码并不像传统的单页应用那样有一个明显的入口文件，因为它是作为一个图形库被设计的。要运行示例或者本地开发，你需要先进行构建。

首先确保全局安装了 Node.js 和 npm。然后，在项目根目录下执行以下命令来初始化和构建项目：

$ npm install    # 安装依赖
$ npm run dev    # 启动本地开发服务器（提供例子预览）

这将启动一个本地开发服务，并且监视源文件的变化。你可以通过浏览器访问 http://localhost:8000/ 来查看示例。

对于实际开发，你可能需要参考 examples 下的代码，结合自己项目的需求来导入 G2 并创建图表。

3. 项目的配置文件介绍

G2 项目中有一些关键的配置文件，它们定义了项目的行为和构建规则：

• package.json: 项目的基本信息，包括版本、作者、依赖等，同时也包含了可执行的脚本，如 npm run dev。
• lerna.json: Lerna 的配置文件，Lerna 用于管理和构建多包仓库。
• scripts/: 这里包含构建和打包脚本，比如 build.js, dev-server.js 等，具体任务可以通过阅读代码了解。
• tsconfig.json: TypeScript 的配置文件，定义了编译选项和源文件路径。
• rollup.config.js: Rollup 用于打包的配置，它决定了最终库的结构和导出方式。

如果要自定义构建流程，可以修改这些配置文件以满足特定需求。例如，你可以通过调整 rollup.config.js 来改变打包的设置，或在 scripts/dev-server.js 修改本地开发服务器的配置。

希望这篇教程对理解和使用 G2 可视化库有所帮助。如有更多疑问，欢迎查阅 G2 的官方文档。

G2📊 A concise and progressive visualization grammar.项目地址:https://gitcode.com/gh_mirrors/g2/G2