From ca149a3837b533a0c1a84d98cb33dcced9efcdab Mon Sep 17 00:00:00 2001 From: xiaoiver Date: Sat, 6 May 2023 17:43:23 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=A6=82=E4=BD=95=E5=9C=A8=20UMD=20?= =?UTF-8?q?=E4=B8=8B=E4=BD=BF=E7=94=A8=E9=9D=9E=E5=86=85=E7=BD=AE=E6=B8=B2?= =?UTF-8?q?=E6=9F=93=E5=99=A8=20(#4948)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/docs/spec/plugin/renderer.zh.md | 43 ++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/site/docs/spec/plugin/renderer.zh.md b/site/docs/spec/plugin/renderer.zh.md index 088c6a28d6..f959a60c9e 100644 --- a/site/docs/spec/plugin/renderer.zh.md +++ b/site/docs/spec/plugin/renderer.zh.md @@ -49,3 +49,46 @@ G 渲染器的使用都是使用： | 属性 | 描述 | 类型 | 默认值 | | ------- | ------------------------------ | ---------- | ---------------------- | | targets | 选择渲染环境，并按顺序自动降级 | `string[]` | `['webgl2', 'webgl1']` | + +### UMD 使用方式 + +当需要替换掉内置的 Canvas 渲染器，例如改换成 SVG 时，需要引入特定版本的 G2 UMD 文件。 + +[在线示例](https://codepen.io/xiaoiver/pen/zYmpbNJ) + +首先引入 `@antv/g` 和 `@antv/g-svg` 的 UMD 版本： + +```html + + +``` + +然后引入剔除了 `@antv/g` 和 `@antv/g-svg` 的 G2 UMD 版本，我们称之为 lite 版： + +```html + +``` + +在命名空间 `window.G.SVG` 下找到 `Renderer` 并实例化： + +```js +const { Chart } = window.G2; + +const chart = new Chart({ + container: 'container', + theme: 'classic', + renderer: new window.G.SVG.Renderer(), // 传入 SVG Renderer +}); +``` + +提供 lite 版主要考虑到： + +- 剔除了 `@antv/g` 和内置的 `@antv/g-canvas` 渲染器之后，便于按需替换其他渲染器，不会存在冗余的内置渲染器 +- 和其他使用 `@antv/g` 的包使用时，可以共享同一份核心和渲染器代码，节省总体的包体积大小，例如： + +```html + + + + +```