diff --git a/docs/api/plot-api.zh.md b/docs/api/plot-api.zh.md index f83c5ad804..69e7d2bb77 100644 --- a/docs/api/plot-api.zh.md +++ b/docs/api/plot-api.zh.md @@ -18,13 +18,13 @@ import { Line } from '@antv/g2plot'; const line = new Line(container', options); // 1. `container`： 图表渲染的 DOM 容器 id 或者 HTMLElement 实例 -// 2. `options`： 图表配置数据，不同的图表功能请参考[各图表配置项](./plots/line) +// 2. `options`： 图表配置数据，不同的图表功能请参考[基础图表 API] ``` 创建好的图表实例，都具有两个公开属性： - - container: HTMLElement： 图表渲染的 DOM 容器。 - - options: PlotOptions： 图表当前的所有全量配置项 options，是有用户传入，以及图表内置的默认配置项合并之后结果。 + - container `HTMLElement`: 图表渲染的 DOM 容器。 + - options `PlotOptions`: 图表当前的所有全量配置项 options，是有用户传入，以及图表内置的默认配置项合并之后结果。 对于 API，分别罗列图表实例的所有 API 方法。如果按照功能分类，主要可以分成为：生命周期函数、事件、状态量 等 API @@ -42,7 +42,7 @@ plot.render(); plot.update(options: Partial); ``` -通过这个方法，可以增量的更新图表配置，方法会自动将传入的增量配置合并到当前的配置项中，并自动掉调用 `render` 方法，无需手动调用。 +通过这个方法，可以增量的更新图表配置，方法会自动将传入的增量配置合并到当前的配置项中，并自动调用 `render` 方法，无需手动调用。 ### 4. changeData diff --git a/docs/api/plots/radar.en.md b/docs/api/plots/radar.en.md index dcc8b38aca..e4ba66f0fd 100644 --- a/docs/api/plots/radar.en.md +++ b/docs/api/plots/radar.en.md @@ -116,8 +116,8 @@ radarPlot.render(); | 细分配置 | 类型 | 功能描述 | | -------- | --------- | ---------- | | smooth | _boolean_ | 是否平滑 | -| color | `_string | string[] | Function_` | 填充面积颜色，也可以支持回调的方式设置，回调参数为 `color: (x, y, series) => string` | -| style | `\_object | Function\_` | 填充面积样式，也可以支持回调的方式设置，回调参数为 `style: (x, y, series) => object` | +| color | _string \| string[] \| Function_ | 填充面积颜色，也可以支持回调的方式设置，回调参数为 `color: (x, y, series) => string` | +| style | _object \| Function_ | 填充面积样式，也可以支持回调的方式设置，回调参数为 `style: (x, y, series) => object` | 使用示例： diff --git a/docs/api/plots/radar.zh.md b/docs/api/plots/radar.zh.md index 082e492845..909635c193 100644 --- a/docs/api/plots/radar.zh.md +++ b/docs/api/plots/radar.zh.md @@ -116,8 +116,8 @@ radarPlot.render(); | 细分配置 | 类型 | 功能描述 | | -------- | --------- | ---------- | | smooth | _boolean_ | 是否平滑 | -| color | \_string | string[] | Function\_ | 填充面积颜色，也可以支持回调的方式设置，回调参数为 `color: (x, y, series) => string` | -| style | \_object | Function\_ | 填充面积样式，也可以支持回调的方式设置，回调参数为 `style: (x, y, series) => object` | +| color | _string \| string[] \| Function_ | 填充面积颜色，也可以支持回调的方式设置，回调参数为 `color: (x, y, series) => string` | +| style | _object \| Function_ | 填充面积样式，也可以支持回调的方式设置，回调参数为 `style: (x, y, series) => object` | 使用示例： diff --git a/docs/common/interactions.zh.md b/docs/common/interactions.zh.md index 9382032f80..214fc757c7 100644 --- a/docs/common/interactions.zh.md +++ b/docs/common/interactions.zh.md @@ -5,7 +5,7 @@ 在 G2Plot 中，透传了 G2 的交互语法，同时也内置了一些与具体 plot 绑定的交互。 使用方式： -```plain +```ts // 开启「鼠标移入图表元素（柱状图的柱子、点图的点等）时触发 active」的交互 interactions: [{ type: 'element-active' }] @@ -15,12 +15,12 @@ interactions: [{ type: 'element-active' }, { type: 'brush' }] #### 移除交互 -```plain +```ts plot.chart.removeInteraction('interaction-type'); ``` 使用示例： -```plain +```ts // 移除 图例筛选 交互 plot.chart.removeInteraction('legend-filter'); ``` diff --git a/docs/common/label.en.md b/docs/common/label.en.md index 9993e48afb..3b46dd811c 100644 --- a/docs/common/label.en.md +++ b/docs/common/label.en.md @@ -2,22 +2,22 @@ | 属性名 | 类型 | 介绍 | | ------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------ | -| type | string | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染（饼图 label 支持 `inner|outer|spider`）| -| offset | number | label 的偏移量 | -| offsetX | number | label 相对于数据点在 X 方向的偏移距离 | -| offsetY | number | label 相对于数据点在 Y 方向的偏移距离 | -| content | string \| IGroup \| IShape \| GeometryLabelContentCallback | 展示的文本内容，如果不声明则按照参与映射的第一字段的值进行显示 | +| type | _string_ | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染（饼图 label 支持 `inner|outer|spider`）| +| offset | _number_ | label 的偏移量 | +| offsetX | _number_ | label 相对于数据点在 X 方向的偏移距离 | +| offsetY | _number_ | label 相对于数据点在 Y 方向的偏移距离 | +| content | _string \| IGroup \| IShape \| GeometryLabelContentCallback_ | 展示的文本内容，如果不声明则按照参与映射的第一字段的值进行显示 | | style | object | label 文本图形属性样式 | -| autoRotate | string | 是否自动旋转，默认 true | -| rotate | number | 文本旋转角度 | -| labelLine | null \| boolean \|object | 用于设置文本连接线的样式属性，null 表示不展示。 | -| labelEmit | boolean | 只对极坐标下的文本生效，表示文本是否按照角度进行放射状显示，true 表示开启，false 表示关闭 | -| layout | 'overlap' \| 'fixedOverlap' \| 'limitInShape' | 文本布局类型，支持多种布局函数组合使用。 | -| position | 'top' \| 'bottom' \| 'middle' \| 'left' \| 'right' | 指定当前 label 与当前图形的相对位置 | -| animate | boolean \| AnimateOption | 动画配置。 | -| formatter | Function | 格式化函数 | -| autoHide | boolean | 是否自动隐藏，默认 false | - | +| autoRotate | _string_ | 是否自动旋转，默认 true | +| rotate | _number_ | 文本旋转角度 | +| labelLine | _null \| _boolean_ \|object_ | 用于设置文本连接线的样式属性，null 表示不展示。 | +| labelEmit | _boolean_ | 只对极坐标下的文本生效，表示文本是否按照角度进行放射状显示，true 表示开启，false 表示关闭 | +| layout | _'overlap' \| 'fixedOverlap' \| 'limitInShape'_ | 文本布局类型，支持多种布局函数组合使用。 | +| position | _'top' \| 'bottom' \| 'middle' \| 'left' \| 'right'_ | 指定当前 label 与当前图形的相对位置 | +| animate | _boolean \| AnimateOption_ | 动画配置。 | +| formatter | _Function_ | 格式化函数 | +| autoHide | _boolean_ | 是否自动隐藏，默认 false | + | 示例代码： diff --git a/docs/common/label.zh.md b/docs/common/label.zh.md index 8aeebfaede..3b46dd811c 100644 --- a/docs/common/label.zh.md +++ b/docs/common/label.zh.md @@ -2,21 +2,21 @@ | 属性名 | 类型 | 介绍 | | ------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------ | -| type | string | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染（饼图 label 支持 `inner|outer|spider`）| -| offset | number | label 的偏移量 | -| offsetX | number | label 相对于数据点在 X 方向的偏移距离 | -| offsetY | number | label 相对于数据点在 Y 方向的偏移距离 | -| content | string \| IGroup \| IShape \| GeometryLabelContentCallback | 展示的文本内容，如果不声明则按照参与映射的第一字段的值进行显示 | +| type | _string_ | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染（饼图 label 支持 `inner|outer|spider`）| +| offset | _number_ | label 的偏移量 | +| offsetX | _number_ | label 相对于数据点在 X 方向的偏移距离 | +| offsetY | _number_ | label 相对于数据点在 Y 方向的偏移距离 | +| content | _string \| IGroup \| IShape \| GeometryLabelContentCallback_ | 展示的文本内容，如果不声明则按照参与映射的第一字段的值进行显示 | | style | object | label 文本图形属性样式 | -| autoRotate | string | 是否自动旋转，默认 true | -| rotate | number | 文本旋转角度 | -| labelLine | null \| boolean \|object | 用于设置文本连接线的样式属性，null 表示不展示。 | -| labelEmit | boolean | 只对极坐标下的文本生效，表示文本是否按照角度进行放射状显示，true 表示开启，false 表示关闭 | -| layout | 'overlap' \| 'fixedOverlap' \| 'limitInShape' | 文本布局类型，支持多种布局函数组合使用。 | -| position | 'top' \| 'bottom' \| 'middle' \| 'left' \| 'right' | 指定当前 label 与当前图形的相对位置 | -| animate | boolean \| AnimateOption | 动画配置。 | -| formatter | Function | 格式化函数 | -| autoHide | boolean | 是否自动隐藏，默认 false | +| autoRotate | _string_ | 是否自动旋转，默认 true | +| rotate | _number_ | 文本旋转角度 | +| labelLine | _null \| _boolean_ \|object_ | 用于设置文本连接线的样式属性，null 表示不展示。 | +| labelEmit | _boolean_ | 只对极坐标下的文本生效，表示文本是否按照角度进行放射状显示，true 表示开启，false 表示关闭 | +| layout | _'overlap' \| 'fixedOverlap' \| 'limitInShape'_ | 文本布局类型，支持多种布局函数组合使用。 | +| position | _'top' \| 'bottom' \| 'middle' \| 'left' \| 'right'_ | 指定当前 label 与当前图形的相对位置 | +| animate | _boolean \| AnimateOption_ | 动画配置。 | +| formatter | _Function_ | 格式化函数 | +| autoHide | _boolean_ | 是否自动隐藏，默认 false | | 示例代码： diff --git a/docs/common/line-style.en.md b/docs/common/line-style.en.md index 22f80926dc..ee57c21e68 100644 --- a/docs/common/line-style.en.md +++ b/docs/common/line-style.en.md @@ -2,15 +2,15 @@ | Attr | Type | Description | | ------------- | --------------- | ------------------------------------------------------------------------------------------------------ | -| stroke | string | color of the line | -| lineWidth | number | width of the line | +| stroke | _string_ | color of the line | +| lineWidth | _number_ | width of the line | | lineDash | [number,number] | configure dashed line, the first parameter is the length of each segment, the second parameter is the gap between segment. When lineDash is set to [0,0], there is no effect. | -| opacity | number | opacity | -| shadowColor | string | shadow color | -| shadowBlur | number | Gaussian blur coefficient | -| shadowOffsetX | number | configure horizontal distance between shadow and line | -| shadowOffsetY | number | configure vertical distance between shadow and line | -| cursor | string | mouse style, same as the mouse style of CSS, default value : 'default' | +| opacity | _number_ | opacity | +| shadowColor | _string_ | shadow color | +| shadowBlur | _number_ | Gaussian blur coefficient | +| shadowOffsetX | _number_ | configure horizontal distance between shadow and line | +| shadowOffsetY | _number_ | configure vertical distance between shadow and line | +| cursor | _string_ | mouse style, same as the mouse style of CSS, default value : 'default' | Example： diff --git a/docs/common/line-style.zh.md b/docs/common/line-style.zh.md index 335e77ceb9..acbc19cb48 100644 --- a/docs/common/line-style.zh.md +++ b/docs/common/line-style.zh.md @@ -2,15 +2,15 @@ | 属性名 | 类型 | 介绍 | | ------------- | --------------- | ------------------------------------------------------------------------------------------------------ | -| stroke | string | 线的颜色 | -| lineWidth | number | 线宽 | +| stroke | _string_ | 线的颜色 | +| lineWidth | _number_ | 线宽 | | lineDash | [number,number] | 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。 | -| opacity | number | 透明度 | -| shadowColor | string | 阴影颜色 | -| shadowBlur | number | 高斯模糊系数 | -| shadowOffsetX | number | 设置阴影距图形的水平距离 | -| shadowOffsetY | number | 设置阴影距图形的垂直距离 | -| cursor | string | 鼠标样式。同 css 的鼠标样式,默认 'default'。 | +| opacity | _number_ | 透明度 | +| shadowColor | _string_ | 阴影颜色 | +| shadowBlur | _number_ | 高斯模糊系数 | +| shadowOffsetX | _number_ | 设置阴影距图形的水平距离 | +| shadowOffsetY | _number_ | 设置阴影距图形的垂直距离 | +| cursor | _string_ | 鼠标样式。同 css 的鼠标样式,默认 'default'。 | 示例代码： diff --git a/docs/common/point-style.en.md b/docs/common/point-style.en.md index ae148046ff..d02e401959 100644 --- a/docs/common/point-style.en.md +++ b/docs/common/point-style.en.md @@ -1,6 +1,6 @@ | 细分配置 | 类型 | 功能描述 | | -------- | -------- | ---------- | -| color | \_string \| string[] \| Function\_ | 数据点颜色，也可以支持回调的方式设置，回调参数为 `color: (x, y, series) => string` | -| shape | \_string \| Function\_ | 数据点形状，也可以支持回调的方式设置，回调参数为 `shape: (x, y, series) => string` | -| size | \_number \| Function\_ | 数据点大小，也可以支持回调的方式设置，回调参数为 `size: (x, y, series) => number` | -| style | \_object \| Function\_ | 数据点样式，也可以支持回调的方式设置，回调参数为 `style: (x, y, series) => object` | +| color | _string \| string[] \| Function_ | 数据点颜色，也可以支持回调的方式设置，回调参数为 `color: (x, y, series) => string` | +| shape | _string \| Function\_ | 数据点形状，也可以支持回调的方式设置，回调参数为 `shape: (x, y, series) => string` | +| size | _number \| Function_ | 数据点大小，也可以支持回调的方式设置，回调参数为 `size: (x, y, series) => number` | +| style | _object \| Function_ | 数据点样式，也可以支持回调的方式设置，回调参数为 `style: (x, y, series) => object` | diff --git a/docs/common/point-style.zh.md b/docs/common/point-style.zh.md index ae148046ff..d672272a65 100644 --- a/docs/common/point-style.zh.md +++ b/docs/common/point-style.zh.md @@ -1,6 +1,6 @@ | 细分配置 | 类型 | 功能描述 | | -------- | -------- | ---------- | -| color | \_string \| string[] \| Function\_ | 数据点颜色，也可以支持回调的方式设置，回调参数为 `color: (x, y, series) => string` | -| shape | \_string \| Function\_ | 数据点形状，也可以支持回调的方式设置，回调参数为 `shape: (x, y, series) => string` | -| size | \_number \| Function\_ | 数据点大小，也可以支持回调的方式设置，回调参数为 `size: (x, y, series) => number` | -| style | \_object \| Function\_ | 数据点样式，也可以支持回调的方式设置，回调参数为 `style: (x, y, series) => object` | +| color | _string \| string[] \| Function_ | 数据点颜色，也可以支持回调的方式设置，回调参数为 `color: (x, y, series) => string` | +| shape | _string \| Function_ | 数据点形状，也可以支持回调的方式设置，回调参数为 `shape: (x, y, series) => string` | +| size | _number \| Function_ | 数据点大小，也可以支持回调的方式设置，回调参数为 `size: (x, y, series) => number` | +| style | _object \| Function_ | 数据点样式，也可以支持回调的方式设置，回调参数为 `style: (x, y, series) => object` | diff --git a/docs/common/shape-style.en.md b/docs/common/shape-style.en.md index 8fb4092cfd..6e2645e227 100644 --- a/docs/common/shape-style.en.md +++ b/docs/common/shape-style.en.md @@ -2,19 +2,19 @@ | Attr | Type | Description | | ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | -| fill | string | Fill color of the shape | -| fillOpacity | number | Fill opacity of the shape | -| stroke | string | Stroke color of the shape | -| lineWidth | number | The width of the stroke of the shape | +| fill | _string_ | Fill color of the shape | +| fillOpacity | _number_ | Fill opacity of the shape | +| stroke | _string_ | Stroke color of the shape | +| lineWidth | _number_ | The width of the stroke of the shape | | lineDash | [number,number] | Configure dashed line stroke. The first parameter is the length of each segment, and the second parameter is the gap between segment. When lineDash is set to [0,0], there is no effect. | -| lineOpacity | number | Opacity of the stroke | -| opacity | number | Opacity of the shape | -| shadowColor | string | Shadow color of the shape | -| strokeOpacity | number | Stroke opacity of the shape | -| shadowBlur | number | Gaussian blur coefficient of the shadow | -| shadowOffsetX | number | Configure horizontal distance between shadow and shape | -| shadowOffsetY | number | Configure vertical distance between shadow and shape | -| cursor | string | Mouse style, same as the mouse style of CSS, default value : 'default' | +| lineOpacity | _number_ | Opacity of the stroke | +| opacity | _number_ | Opacity of the shape | +| shadowColor | _string_ | Shadow color of the shape | +| strokeOpacity | _number_ | Stroke opacity of the shape | +| shadowBlur | _number_ | Gaussian blur coefficient of the shadow | +| shadowOffsetX | _number_ | Configure horizontal distance between shadow and shape | +| shadowOffsetY | _number_ | Configure vertical distance between shadow and shape | +| cursor | _string_ | Mouse style, same as the mouse style of CSS, default value : 'default' | Example： diff --git a/docs/common/shape-style.zh.md b/docs/common/shape-style.zh.md index ca9428264e..0f3f6e2887 100644 --- a/docs/common/shape-style.zh.md +++ b/docs/common/shape-style.zh.md @@ -2,19 +2,19 @@ | 属性名 | 类型 | 介绍 | | ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | -| fill | string | 图形的填充色 | -| fillOpacity | number | 图形的填充透明度 | -| stroke | string | 图形的描边 | -| lineWidth | number | 图形描边的宽度 | +| fill | _string_ | 图形的填充色 | +| fillOpacity | _number_ | 图形的填充透明度 | +| stroke | _string_ | 图形的描边 | +| lineWidth | _number_ | 图形描边的宽度 | | lineDash | [number,number] | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。 | -| lineOpacity | number | 描边透明度 | -| opacity | number | 图形的整体透明度 | -| shadowColor | string | 图形阴影颜色 | -| strokeOpacity | number | 图形边框透明度 | -| shadowBlur | number | 图形阴影的高斯模糊系数 | -| shadowOffsetX | number | 设置阴影距图形的水平距离 | -| shadowOffsetY | number | 设置阴影距图形的垂直距离 | -| cursor | string | 鼠标样式。同 css 的鼠标样式，默认 'default'。 | +| lineOpacity | _number_ | 描边透明度 | +| opacity | _number_ | 图形的整体透明度 | +| shadowColor | _string_ | 图形阴影颜色 | +| strokeOpacity | _number_ | 图形边框透明度 | +| shadowBlur | _number_ | 图形阴影的高斯模糊系数 | +| shadowOffsetX | _number_ | 设置阴影距图形的水平距离 | +| shadowOffsetY | _number_ | 设置阴影距图形的垂直距离 | +| cursor | _string_ | 鼠标样式。同 css 的鼠标样式，默认 'default'。 | 示例代码： diff --git a/docs/common/text-style.en.md b/docs/common/text-style.en.md index d2fa85892e..b6f4886dfa 100644 --- a/docs/common/text-style.en.md +++ b/docs/common/text-style.en.md @@ -2,23 +2,23 @@ | 属性名 | 类型 | 介绍 | | ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | -| fontSize | number | 文字大小 | -| fontFamily | string | 文字字体 | -| fontWeight | number | 字体粗细 | -| lineHeight | number | 文字的行高 | -| textAlign | string | 设置文本内容的当前对齐方式, 支持的属性：`center` \| `end` \| `left` \| `right` \| `start`，默认值为`start` | -| fill | string | 文字的填充色 | -| fillOpacity | number | 文字的填充透明度 | -| stroke | string | 文字的描边 | -| lineWidth | number | 文字描边的宽度 | +| fontSize | _number_ | 文字大小 | +| fontFamily | _string_ | 文字字体 | +| fontWeight | _number_ | 字体粗细 | +| lineHeight | _number_ | 文字的行高 | +| textAlign | _string_ | 设置文本内容的当前对齐方式, 支持的属性：`center` \| `end` \| `left` \| `right` \| `start`，默认值为`start` | +| fill | _string_ | 文字的填充色 | +| fillOpacity | _number_ | 文字的填充透明度 | +| stroke | _string_ | 文字的描边 | +| lineWidth | _number_ | 文字描边的宽度 | | lineDash | [number,number] | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。 | -| lineOpacity | number | 描边透明度 | -| opacity | number | 文字的整体透明度 | -| shadowColor | string | 文字阴影颜色 | -| shadowBlur | number | 文字阴影的高斯模糊系数 | -| shadowOffsetX | number | 设置阴影距文字的水平距离 | -| shadowOffsetY | number | 设置阴影距文字的垂直距离 | -| cursor | string | 鼠标样式。同 css 的鼠标样式,默认 'default'。 | +| lineOpacity | _number_ | 描边透明度 | +| opacity | _number_ | 文字的整体透明度 | +| shadowColor | _string_ | 文字阴影颜色 | +| shadowBlur | _number_ | 文字阴影的高斯模糊系数 | +| shadowOffsetX | _number_ | 设置阴影距文字的水平距离 | +| shadowOffsetY | _number_ | 设置阴影距文字的垂直距离 | +| cursor | _string_ | 鼠标样式。同 css 的鼠标样式,默认 'default'。 | 示例代码，以 label.style 配置为例： diff --git a/docs/common/text-style.zh.md b/docs/common/text-style.zh.md index d2fa85892e..b6f4886dfa 100644 --- a/docs/common/text-style.zh.md +++ b/docs/common/text-style.zh.md @@ -2,23 +2,23 @@ | 属性名 | 类型 | 介绍 | | ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | -| fontSize | number | 文字大小 | -| fontFamily | string | 文字字体 | -| fontWeight | number | 字体粗细 | -| lineHeight | number | 文字的行高 | -| textAlign | string | 设置文本内容的当前对齐方式, 支持的属性：`center` \| `end` \| `left` \| `right` \| `start`，默认值为`start` | -| fill | string | 文字的填充色 | -| fillOpacity | number | 文字的填充透明度 | -| stroke | string | 文字的描边 | -| lineWidth | number | 文字描边的宽度 | +| fontSize | _number_ | 文字大小 | +| fontFamily | _string_ | 文字字体 | +| fontWeight | _number_ | 字体粗细 | +| lineHeight | _number_ | 文字的行高 | +| textAlign | _string_ | 设置文本内容的当前对齐方式, 支持的属性：`center` \| `end` \| `left` \| `right` \| `start`，默认值为`start` | +| fill | _string_ | 文字的填充色 | +| fillOpacity | _number_ | 文字的填充透明度 | +| stroke | _string_ | 文字的描边 | +| lineWidth | _number_ | 文字描边的宽度 | | lineDash | [number,number] | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。 | -| lineOpacity | number | 描边透明度 | -| opacity | number | 文字的整体透明度 | -| shadowColor | string | 文字阴影颜色 | -| shadowBlur | number | 文字阴影的高斯模糊系数 | -| shadowOffsetX | number | 设置阴影距文字的水平距离 | -| shadowOffsetY | number | 设置阴影距文字的垂直距离 | -| cursor | string | 鼠标样式。同 css 的鼠标样式,默认 'default'。 | +| lineOpacity | _number_ | 描边透明度 | +| opacity | _number_ | 文字的整体透明度 | +| shadowColor | _string_ | 文字阴影颜色 | +| shadowBlur | _number_ | 文字阴影的高斯模糊系数 | +| shadowOffsetX | _number_ | 设置阴影距文字的水平距离 | +| shadowOffsetY | _number_ | 设置阴影距文字的垂直距离 | +| cursor | _string_ | 鼠标样式。同 css 的鼠标样式,默认 'default'。 | 示例代码，以 label.style 配置为例： diff --git a/docs/common/theme.zh.md b/docs/common/theme.zh.md index 650ae99a92..5c432ab183 100644 --- a/docs/common/theme.zh.md +++ b/docs/common/theme.zh.md @@ -2,7 +2,7 @@ 目前默认的内置主要要两套：`default` 和 `dark` -```plain +```ts { theme: 'default', // 'dark', } @@ -16,24 +16,24 @@ | 主题属性 | 类型 | 描述 | | --- | --- | ---| -| defaultColor | string | 主题色 | -| padding | number | number[] | -| fontFamily | string | 图表字体 | -| colors10 | string[] | 分类颜色色板，分类个数小于 10 时使用 | -| colors20 | string[] | 分类颜色色板，分类个数大于 10 时使用 | -| columnWidthRatio | number | 一般柱状图宽度占比，0 - 1 范围数值 -| maxColumnWidth | number | 柱状图最大宽度，像素值 | -| minColumnWidth| number | 柱状图最小宽度，像素值 | -| roseWidthRatio | number | 玫瑰图占比，0 - 1 范围数值 | +| defaultColor | _string_| 主题色 | +| padding | _number_ | number[] | +| fontFamily | _string_ | 图表字体 | +| colors10 | _string[]_ | 分类颜色色板，分类个数小于 10 时使用 | +| colors20 |_string[]_ | 分类颜色色板，分类个数大于 10 时使用 | +| columnWidthRatio | _number_ | 一般柱状图宽度占比，0 - 1 范围数值 +| maxColumnWidth | _number_ | 柱状图最大宽度，像素值 | +| minColumnWidth| _number_ | 柱状图最小宽度，像素值 | +| roseWidthRatio | _number_ | 玫瑰图占比，0 - 1 范围数值 | | multiplePieWidthRatio | number | 多层饼图/环图占比，0 - 1 范围数值 | -| geometries | object | 配置每个 Geometry 下每个 shape 的样式，包括默认样式以及各个状态下的样式 | -| components | object | 配置坐标轴，图例，tooltip, annotation 的主题样式 | -| labels | object | 配置 Geometry 下 label 的主题样式 | -| innerLabels | object | 配置 Geometry 下展示在图形内部的 labels 的主题样式 | -| pieLabels | object | 配置饼图 labels 的主题样式 | +| geometries | _object_ | 配置每个 Geometry 下每个 shape 的样式，包括默认样式以及各个状态下的样式 | +| components | _object_ | 配置坐标轴，图例，tooltip, annotation 的主题样式 | +| labels | _object_ | 配置 Geometry 下 label 的主题样式 | +| innerLabels | _object_ | 配置 Geometry 下展示在图形内部的 labels 的主题样式 | +| pieLabels | _object_ | 配置饼图 labels 的主题样式 | 使用方式： -```plain +```ts { theme: { colors10: ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89', '#E19348', '#F383A2', '#247FEA'] @@ -44,7 +44,7 @@ #### 更新主题 使用方式： -```plain +```ts // 示例1: plot.update({ theme: 'dark' }); @@ -56,7 +56,7 @@ plot.update({ theme: { defaultColor: '#FF6B3B' } }) 另外，还可以通过 G2 提供了自定义主题机制来定义全新的主题结构，以允许用户切换、定义图表主题。 -```plain +```ts import { Pie, G2 } from '@antv/g2plot'; // Step 1: 注册主题 diff --git a/docs/common/tooltip.en.md b/docs/common/tooltip.en.md index 42314030f0..2fa37bfbed 100644 --- a/docs/common/tooltip.en.md +++ b/docs/common/tooltip.en.md @@ -92,7 +92,7 @@ true 表示合并当前点对应的所有数据并展示，false 表示只展示 | 细分配置项名称 | 类型 | 功能描述 | | -------------- | ------------------ | ------------------ | -| padding | number \| number[] | 文本背景周围的留白 | +| padding | _number \| number[]_ | 文本背景周围的留白 | | style | _shapeStyle_ | 线的配置项 | **_shapeStyle_** diff --git a/docs/common/tooltip.zh.md b/docs/common/tooltip.zh.md index 0f7b539fdf..5c08a9444a 100644 --- a/docs/common/tooltip.zh.md +++ b/docs/common/tooltip.zh.md @@ -74,7 +74,7 @@ true 表示合并当前点对应的所有数据并展示，false 表示只展示 | 细分配置项名称 | 类型 | 功能描述 | | -------------- | ---------------------- | ------------------------------------------------------------------- | -| type | \_`x` \| `y` \| `xy`\_ | crosshairs 的类型: `x` 表示 x 轴上的辅助线，`y` 表示 y 轴上的辅助项 | +| type | _`x` \| `y` \| `xy`_ | crosshairs 的类型: `x` 表示 x 轴上的辅助线，`y` 表示 y 轴上的辅助项 | | line | _lineStyle_ | 线的配置项 | | text | _textStyle_ | 辅助线文本配置，支持回调 | | textBackground | _textBackgroundStyle_ | 辅助线文本背景配置 | @@ -92,7 +92,7 @@ true 表示合并当前点对应的所有数据并展示，false 表示只展示 | 细分配置项名称 | 类型 | 功能描述 | | -------------- | ------------------ | ------------------ | -| padding | number \| number[] | 文本背景周围的留白 | +| padding | _number \| number[]_ | 文本背景周围的留白 | | style | _shapeStyle_ | 线的配置项 | **_shapeStyle_** diff --git a/docs/manual/getting-started.zh.md b/docs/manual/getting-started.zh.md index 9801cf0398..a0ebdbc581 100644 --- a/docs/manual/getting-started.zh.md +++ b/docs/manual/getting-started.zh.md @@ -163,4 +163,4 @@ line.render(); 示例 -通过上面由浅入深的教程，你应该已经基本了解 G2Plot 的使用方法了，不过这远远不是终点，G2Plot 还有很多有趣的配置和特性等待你的尝试和探索。更多基础功能请参考[各图表配置项](./plots/line)。 +通过上面由浅入深的教程，你应该已经基本了解 G2Plot 的使用方法了，不过这远远不是终点，G2Plot 还有很多有趣的配置和特性等待你的尝试和探索。更多基础功能请参考[各图表配置项](../api/plots/line)。 diff --git a/docs/manual/upgrade.en.md b/docs/manual/upgrade.en.md index af7c287d5c..e4f2216a77 100644 --- a/docs/manual/upgrade.en.md +++ b/docs/manual/upgrade.en.md @@ -11,7 +11,7 @@ G2Plot 2.0 is under continuous development. Up to now, we have completed the dev | Chart name | Description | Example | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | -| Bubble | 改用 Scatter 实现， 修改图表名称即可。 | [Scatter](../../examples/scatter/basic) | +| Bubble | 改用 Scatter 实现， 修改图表名称即可。 | [Scatter](../../examples/scatter/bubble#quadrant) | | StackedColumn | 改用 Column 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`。 | [Column](../../examples/column/stacked) | | GroupedColumn | 改用 Column 实现。
删除 groupField 配置，改为 seriesField，需要指定 `isGroup: true`。 | [Column](../../examples/column/grouped) | | PercentStackedColumn | 改用 Column 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`、`isPercent: true`。 | [Column](../../examples/column/percent) | @@ -54,10 +54,10 @@ G2Plot 2.0 is compatible with most of the chart functions and configuration item | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | Scatter | pointSize: 不再支持，改用 size。
shape: 去掉默认类型 circle，需要显性设置。
trendline: 不再支持，改用 regressionLine，删除 showConfidence、confidenceStyle 配置，新增 algorithm 配置 | - | | Rose | categoryField: 不再支持，改用 xField。
radiusField: 不再支持，改用 yField。
colorField: 不再支持，改用 seriesField。 | - | -| Bullet | 改动较大，详细参考 [Bullet](../../examples/bullet/basic) | - | +| Bullet | 改动较大，详细参考 [Bullet](../../examples/progress-plots/bullet) | - | | WordCloud | maskImage: 不再支持， 改用 imageMask。
wordStyle 选项中的 gridSize 改为 padding。
data 不再做限制，但需要指定 wordField、weightField。 | - | | TinyArea、TinyColumn、 TinyLine | 删除 xField 、yField。
data 类型由 object[] 变为 number[]。 | - | -| Gauge | 删除 color 、 min 、 max。
删除 value , 改用 percent。
删除 pivot 改用 indicator。
更新 range ，详细参考[Gauge](../../examples/gauge/basic#complex) | 示例 | +| Gauge | 删除 color 、 min 、 max。
删除 value , 改用 percent。
删除 pivot 改用 indicator。
更新 range ，详细参考[Gauge](../../examples/progress-plots/gauge#basic) | 示例 | | Radar | 删除 radiusAxis ，改用 yAxis。
删除 angleField ， 改用 xField。
删除 radiusField ， 改用 yField。 | - | | Liquid | 删除 min 、max。
删除 value ，改用 percent。
更新 statistic。 | 示例 | diff --git a/docs/manual/upgrade.zh.md b/docs/manual/upgrade.zh.md index fb030466ef..72556bd027 100644 --- a/docs/manual/upgrade.zh.md +++ b/docs/manual/upgrade.zh.md @@ -11,7 +11,7 @@ G2Plot 2.0 持续开发中，截止目前，我们已经完成了 P0 、P1 级 | 图表名称 | 描述 | 示例 | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | -| Bubble | 改用 Scatter 实现， 修改图表名称即可。 | [Scatter](../../examples/scatter/basic) | +| Bubble | 改用 Scatter 实现， 修改图表名称即可。 | [Scatter](../../examples/scatter/bubble#quadrant) | | StackedColumn | 改用 Column 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`。 | [Column](../../examples/column/stacked) | | GroupedColumn | 改用 Column 实现。
删除 groupField 配置，改为 seriesField，需要指定 `isGroup: true`。 | [Column](../../examples/column/grouped) | | PercentStackedColumn | 改用 Column 实现。
删除 stackField 配置，改为 seriesField，需要指定 `isStack: true`、`isPercent: true`。 | [Column](../../examples/column/percent) | @@ -54,10 +54,10 @@ G2Plot 2.0 兼容大部分的 1.x 版本图表功能和配置项，详情如下 | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | Scatter | pointSize: 不再支持，改用 size。
shape: 去掉默认类型 circle，需要显性设置。
trendline: 不再支持，改用 regressionLine，删除 showConfidence、confidenceStyle 配置，新增 algorithm 配置 | - | | Rose | categoryField: 不再支持，改用 xField。
radiusField: 不再支持，改用 yField。
colorField: 不再支持，改用 seriesField。 | - | -| Bullet | 改动较大，详细参考 [Bullet](../../examples/bullet/basic) | - | +| Bullet | 改动较大，详细参考 [Bullet](../../examples/progress-plots/bullet) | - | | WordCloud | maskImage: 不再支持， 改用 imageMask。
wordStyle 选项中的 gridSize 改为 padding。
data 不再做限制，但需要指定 wordField、weightField。 | - | | TinyArea、TinyColumn、 TinyLine | 删除 xField 、yField。
data 类型由 object[] 变为 number[]。 | - | -| Gauge | 删除 color 、 min 、 max。
删除 value , 改用 percent。
删除 pivot 改用 indicator。
更新 range ，详细参考[Gauge](../../examples/gauge/basic#complex) | 示例 | +| Gauge | 删除 color 、 min 、 max。
删除 value , 改用 percent。
删除 pivot 改用 indicator。
更新 range ，详细参考[Gauge](../../examples/progress-plots/gauge) | 示例 | | Radar | 删除 radiusAxis ，改用 yAxis。
删除 angleField ， 改用 xField。
删除 radiusField ， 改用 yField。 | - | | Liquid | 删除 min 、max。
删除 value ，改用 percent。
更新 statistic。 | 示例 | diff --git a/package.json b/package.json index 0abeee2019..c1c889bdee 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ }, "devDependencies": { "@antv/data-set": "^0.11.5", - "@antv/gatsby-theme-antv": "1.0.2", + "@antv/gatsby-theme-antv": "^1.0.4", "@babel/core": "^7.10.4", "@babel/plugin-transform-runtime": "^7.11.5", "@babel/preset-env": "^7.10.4", diff --git a/site/pages/index.less b/site/pages/index.less index 6642ab25a1..6fdd1542d0 100644 --- a/site/pages/index.less +++ b/site/pages/index.less @@ -21,3 +21,36 @@ div[class^='PlayGround-module--exampleContainerWrapper'] { margin-top: 0!important; } } + +// 自定义 G2Plot 官网样式 +pre[class*="language-"]{ + margin: 0.6em 0 0.8em; + padding: 0.6em 1em; + font-size: 90%; +} + +code.language-sign, +pre.language-sign { + background: #e6f7ff !important; +} + +description code.language-text { + color: #3c43d1; +} + +code.language-text { + padding: 2px 4px; + color: #8085e8; + font-size: 90%; + background-color: #f5f5f5 !important; + border: none; + border-radius: 4px; +} + +:not(pre) > code[class*="language-"] { + padding: 1px 4px; +} + +[class*="markdown-module--markdown--"] table { + margin: 0.5em 0 24px 0 !important; +} \ No newline at end of file