diff --git a/docs/api/advanced/dive-into-theme.en.md b/docs/api/advanced/dive-into-theme.en.md index 39ff9675d3..34f04ce3b8 100644 --- a/docs/api/advanced/dive-into-theme.en.md +++ b/docs/api/advanced/dive-into-theme.en.md @@ -3,113 +3,4 @@ title: 主题配置项详解 order: 7 --- -## 基础配置 - -- 主题色： defaultColor -- 字体：fontFamily -- 图表内边距：padding，默认 'auto' 自动计算 - -## 图形属性映射 - -- 色板：colors -- 形状：shapes，定义每个几何标记对应的 shapes 列表 -- 大小: sizes，映射的图形大小范围 - -## 图形样式 - -因为 G2 的图形是由 Geometry + Shape 组成的: - -| **geometry 类型** | **shape 类型** | **解释** | -| :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -| point | - 'circle'- 'square'- 'bowtie'- 'diamond'- 'hexagon'- 'triangle'- 'triangle-down'- 'hollow-circle'- 'hollow-square'- 'hollow-bowtie'- 'hollow-diamond'- 'hollow-hexagon'- 'hollow-triangle'- 'hollow-triangle-down'- 'cross'- 'tick'- 'plus'- 'hyphen'- 'line' | hollow 开头的图形都是空心的。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*SOzoR4n967MAAAAAAAAAAABkARQnAQ)![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*AyLUTY60MDkAAAAAAAAAAABkARQnAQ) | -| line | - 'line'- 'dot'- 'dash'- 'smooth'- 'hv'- 'vh'- 'hvh'- 'vhv' | 'hv', 'vh', 'hvh', 'vhv' 用于绘制阶梯线图。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*yMFrQKD52WcAAAAAAAAAAABkARQnAQ) | -| area | - 'area'- 'smooth'- 'line'- 'smooth-line' | 'area' 和 'smooth-line' 是填充内容的区域图，其他图表是空心的线图。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*nX8vR4cShMYAAAAAAAAAAABkARQnAQ) | -| interval | - 'rect'- 'hollow-rect'- 'line'- 'tick'- 'funnel'- 'pyramid' | 'hollow-rect' 是空心的矩形，'line' 和 'tick' 都是线段，'funnel' 用于绘制漏斗图；'pyramid' 用于绘制金字塔图。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*0H-zQrrV7YcAAAAAAAAAAABkARQnAQ) | -| polygon | - 'polygon' | polygon：多边形。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*QgsPTLQ3eLUAAAAAAAAAAABkARQnAQ) | -| schema | - 'box'- 'candle' | 目前仅支持箱须图('box')、K 线图('candle')。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*olU9QYwnMgMAAAAAAAAAAABkARQnAQ)![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*JX_ISqY-UIAAAAAAAAAAAABkARQnAQ) | -| edge | - 'line'- 'vhv'- 'smooth'- 'arc' | vhv：直角折线，arc：弧线，分为笛卡尔坐标系、极坐标系、带权重和不带权重四种情况。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*UOxHSKuGsBwAAAAAAAAAAABkARQnAQ) | - -所以在配置图形样式时，需要以 Geometry 名称 + Shape 名称为 token，进行样式定义，目前主题开放的配置可用于定义图形的默认显示样式，active 的样式，inactive 的样式以及 selected 的样式。 - -> 以上配置定义的是 interval 这个几何标记下 rect 形状在各个状态下的样式。通常我们只需要为各个 Geometry 设置一个或者两个样式（填充或者描边的样式）即可，Geometry 下的各个 shapes 复用即可，除非某个 shape 样式特殊。 - -## 图表组件 - -所有的图表组件样式，定义在 `components`  属性下。 - -### 坐标轴 - -G2 的坐标轴根据坐标系类型的不同进行了类型划分，但是每种类型下的配置属性是相同的。 - -1. 对于直角坐标系，我们提供了上、下、左、右四个方向的坐标轴配置。 -1. 对于极坐标系，我们提供了半径轴和圆弧轴的两个坐标轴的配置。 - -![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*QwP6RI0M2n8AAAAAAAAAAABkARQnAQ)每个坐标轴可配置的属性如下： - -| 属性名 | 描述 | -| ----------- | ------------------------------------------------------------------------------------------- | -| title | 坐标轴标题，可以控制：1. 是否展示 1. 标题的显示位置 1. 标题文本的样式 | -| label | 坐标轴文本，可以控制：1. 是否展示 1. 是否自动隐藏或者自动旋转 1. 文本的样式 | -| line | 坐标轴线，可以控制：1. 是否展示 1. 线的样式 | -| grid | 网格线，可以控制：1. 是否展示 1. 网格线的样式 | -| tickLine | 坐标轴刻度线，可以控制：1. 是否展示 1. 刻度线的长度 1. 刻度线的样式 1. 刻度线是否和文本对齐 | -| subTickLine | 坐标轴自刻度线，可以控制：1. 是否展示 1. 刻度线的样式 | - -### 图例 - -G2 中图例分为连续图例和分类图例两种，同样主题中也为这两种类型的图例提供了配置。 - -- 分类图例，针对分类图例，可以配置如下属性： - -![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*7ka8SLG1io8AAAAAAAAAAABkARQnAQ) - -| 属性名 | 描述 | -| -------- | ------------------------------------------------- | -| title | 图例标题，可以控制：1. 是否展示 1. 标题文本的样式 | -| marker | 图例项 marker，可以控制：1. 形状 1. 样式 | -| itemName | 图例项文本，可以控制：1. 文本样式 1. 间距 | - -- 连续图例，针对连续图例，可以配置一下属性： - -![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*-1IJRJbBJxYAAAAAAAAAAABkARQnAQ) - -| 属性名 | 描述 | -| ------- | ------------------------------------------------- | -| title | 图例标题，可以控制：1. 是否展示 1. 标题文本的样式 | -| track | _选择范围的色块样式_ | -| rail | _图例滑轨（背景）的样式配置项_ | -| label | _文本的样式配置_ | -| handler | _滑块的样式配置_ | - -### Tooltip - -针对 tooltip，主题开放的配置为： - -1. marker 的样式 -1. crosshairs 的样式 -1. tooltip 整个内容框的样式配置 - -![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*HW-WRqzZT3MAAAAAAAAAAABkARQnAQ) - -### Annotation  - -G2 在主题中提供了以下 7 种 Annotation 的样式配置： - -| Annotation 类型 | 描述 | 样式 | -| --------------- | ------------------------ | --------------------------------------------------------------------------------------------------- | -| arc | 弧线 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*p6NSQau2HloAAAAAAAAAAABkARQnAQ) | -| line | 辅助线，带文本 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*ob5ARp0Fk_cAAAAAAAAAAABkARQnAQ) | -| text | 标注文本 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*7xDjT7Q3B_IAAAAAAAAAAABkARQnAQ) | -| region  | 辅助区域 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*IpEdQaAmGDoAAAAAAAAAAABkARQnAQ) | -| dataMarker | 带点、线及文本的图形标记 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*ycZ0R4cueL0AAAAAAAAAAABkARQnAQ) | -| dataRegion | 带区域及文本的图形标记 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*9qcrRp5rWdcAAAAAAAAAAABkARQnAQ) | - -### Labels - -图形标签，在 G2 主题中，分为以下三类： - -| 类型 | 描述 | | -| ----------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | -| labels | 通用 labels，可以配置文本的距离及样式 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*eMhjSatkIikAAAAAAAAAAABkARQnAQ) | -| innerLabels | 显示在图形内部的文本，可以配置文本的距离及样式 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*kL3SRJKtuO0AAAAAAAAAAABkARQnAQ) | -| pieLabels | 饼图文本的样式，可以配置文本的距离、样式以及文本连接线的样式 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*3GGPQZ66bggAAAAAAAAAAABkARQnAQ) | +`markdown:docs/api/advanced/dive-into-theme.zh.md` diff --git a/docs/api/advanced/dive-into-theme.zh.md b/docs/api/advanced/dive-into-theme.zh.md index 39ff9675d3..cdc71fdf75 100644 --- a/docs/api/advanced/dive-into-theme.zh.md +++ b/docs/api/advanced/dive-into-theme.zh.md @@ -37,7 +37,7 @@ order: 7 所有的图表组件样式，定义在 `components`  属性下。 -### 坐标轴 +### 坐标轴 - Axis G2 的坐标轴根据坐标系类型的不同进行了类型划分，但是每种类型下的配置属性是相同的。 @@ -55,7 +55,7 @@ G2 的坐标轴根据坐标系类型的不同进行了类型划分，但是每 | tickLine | 坐标轴刻度线，可以控制：1. 是否展示 1. 刻度线的长度 1. 刻度线的样式 1. 刻度线是否和文本对齐 | | subTickLine | 坐标轴自刻度线，可以控制：1. 是否展示 1. 刻度线的样式 | -### 图例 +### 图例 - Legend G2 中图例分为连续图例和分类图例两种，同样主题中也为这两种类型的图例提供了配置。 @@ -65,9 +65,11 @@ G2 中图例分为连续图例和分类图例两种，同样主题中也为这 | 属性名 | 描述 | | -------- | ------------------------------------------------- | -| title | 图例标题，可以控制：1. 是否展示 1. 标题文本的样式 | -| marker | 图例项 marker，可以控制：1. 形状 1. 样式 | -| itemName | 图例项文本，可以控制：1. 文本样式 1. 间距 | +| title | 图例标题，可以控制：1. 是否展示 2. 标题文本的样式 | +| marker | 图例项 marker，可以控制：1. 形状 2. 样式 | +| itemName | 图例项文本，可以控制：1. 文本样式 2. 间距 | +| itemValue | 图例项文本值，可以控制：1. 文本样式 2. 间距（同 itemName） | +| pageNavigator | 图例分页器，可以控制：1. 分页器箭头 marker 2. 分页器指示文本 | - 连续图例，针对连续图例，可以配置一下属性： @@ -81,7 +83,7 @@ G2 中图例分为连续图例和分类图例两种，同样主题中也为这 | label | _文本的样式配置_ | | handler | _滑块的样式配置_ | -### Tooltip +### 提示信息 - Tooltip 针对 tooltip，主题开放的配置为： @@ -91,7 +93,7 @@ G2 中图例分为连续图例和分类图例两种，同样主题中也为这 ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*HW-WRqzZT3MAAAAAAAAAAABkARQnAQ) -### Annotation  +### 图形标注 - Annotation  G2 在主题中提供了以下 7 种 Annotation 的样式配置： @@ -104,7 +106,7 @@ G2 在主题中提供了以下 7 种 Annotation 的样式配置： | dataMarker | 带点、线及文本的图形标记 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*ycZ0R4cueL0AAAAAAAAAAABkARQnAQ) | | dataRegion | 带区域及文本的图形标记 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*9qcrRp5rWdcAAAAAAAAAAABkARQnAQ) | -### Labels +### 文本标签 - Labels 图形标签，在 G2 主题中，分为以下三类： diff --git a/docs/api/general/legend.zh.md b/docs/api/general/legend.zh.md index 398025cb2c..138f1d115b 100644 --- a/docs/api/general/legend.zh.md +++ b/docs/api/general/legend.zh.md @@ -65,10 +65,10 @@ _legendOption_ 配置如下： 背景框配置项。_LegendBackgroundCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| ------- | ------------------- | ------ | -------------- | -| padding | number \| number[] | - | 背景的留白 | -| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs)| - | 背景样式配置项 | +| 参数名 | 类型 | 默认值 | 描述 | +| ------- | -------------------------------------------- | ------ | -------------- | +| padding | number \| number[] | - | 背景的留白 | +| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs) | - | 背景样式配置项 | ### legendOption.flipPage @@ -76,16 +76,51 @@ _legendOption_ 配置如下： 适用于 分类图例，当图例项过多时是否进行分页。 +### legendOption.pageNavigator + + _LegendPageNavigatorCfg_ **optional** + +适用于 分类图例，对图例分页器进行主题样式设置。_LegendPageNavigatorCfg_ 配置如下： + +| 参数名 | 类型 | 默认值 | 描述 | +| ------ | --------------------- | ------ | -------------- | +| marker | _PageNavigatorMarker_ | - | 分页器指示箭头配置项 | +| text | _PageNavigatorText_ | - | 分页器指示文本配置项 | + +示例： + +```ts +pageNavigator: { + marker: { + style: { + // 非激活，不可点击态时的填充色设置 + inactiveFill: '#000', + inactiveOpacity: 0.45, + // 默认填充色设置 + fill: '#000', + opacity: 0.8, + size: 12, + }, + }, + text: { + style: { + fill: '#ccc', + fontSize: 8, + }, + }, +}, +``` + ### legendOption.handler _ContinueLegendHandlerCfg_ **optional** 适用于 连续图例，滑块的配置项。_ContinueLegendHandlerCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| ------ | ------------------- | ------ | -------------- | -| size | number | - | 滑块的大小 | -| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs)| - | 滑块的样式设置 | +| 参数名 | 类型 | 默认值 | 描述 | +| ------ | -------------------------------------------- | ------ | -------------- | +| size | number | - | 滑块的大小 | +| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs) | - | 滑块的样式设置 | ### legendOption.itemHeight @@ -107,7 +142,7 @@ _legendOption_ 配置如下： | 参数名 | 类型 | 是否必选 | 默认值 | 描述 | | --------- | ------------------------------------------------------- | -------- | ------ | -------------------------------- | -| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs) | | - | 文本样式配置项 | +| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs) | | - | 文本样式配置项 | | spacing | number | | - | 图例项 marker 同后面 name 的间距 | | formatter | `(text: string, item: ListItem, index: number) => any;` | | | 格式化函数 | @@ -125,7 +160,7 @@ _legendOption_ 配置如下： | 参数名 | 类型 | 是否必选 | 默认值 | 描述 | | ---------- | ------------------------------------------------------- | -------- | ------- | -------------------------------------------------- | -| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs) | | - | 文本样式配置项 | +| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs) | | - | 文本样式配置项 | | alignRight | boolean | | `false` | 是否右对齐，默认为 false，仅当设置图例项宽度时生效 | | formatter | `(text: string, item: ListItem, index: number) => any;` | | | 格式化函数 | @@ -149,11 +184,11 @@ _legendOption_ 配置如下： 适用于 连续图例，文本的配置项。_ContinueLegendLabelCfg_ 配置如下： -| 参数名 | 类型 | 是否必选 | 默认值 | 描述 | -| ------- | ------------------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------- | -| align | string | | - | 文本同滑轨的对齐方式
- rail ： 同滑轨对齐，在滑轨的两端
- top, bottom: 图例水平布局时有效
- left, right: 图例垂直布局时有效 | -| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs)| | - | 文本样式配置项 | -| spacing | number | | - | 文本同滑轨的距离 | +| 参数名 | 类型 | 是否必选 | 默认值 | 描述 | +| ------- | -------------------------------------------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------- | +| align | string | | - | 文本同滑轨的对齐方式
- rail ： 同滑轨对齐，在滑轨的两端
- top, bottom: 图例水平布局时有效
- left, right: 图例垂直布局时有效 | +| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs) | | - | 文本样式配置项 | +| spacing | number | | - | 文本同滑轨的距离 | ### legendOption.marker @@ -205,12 +240,12 @@ _legendOption_ 配置如下： 适用于 分类图例，图例滑轨（背景）的样式配置项。_ContinueLegendRailCfg_ 配置如下： -| 参数名 | 类型 | 是否必选 | 默认值 | 描述 | -| ------------- | ------------------- | -------- | ------ | -------------------------------------------------------------------------------- | -| type | string | | - | rail 的类型，color, size | -| size | number | | - | 滑轨的宽度 | -| defaultLength | number | | - | 滑轨的默认长度，，当限制了 maxWidth,maxHeight 时，不会使用这个属性会自动计算长度 | -| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs)| | - | 滑轨的样式 | +| 参数名 | 类型 | 是否必选 | 默认值 | 描述 | +| ------------- | -------------------------------------------- | -------- | ------ | -------------------------------------------------------------------------------- | +| type | string | | - | rail 的类型，color, size | +| size | number | | - | 滑轨的宽度 | +| defaultLength | number | | - | 滑轨的默认长度，，当限制了 maxWidth,maxHeight 时，不会使用这个属性会自动计算长度 | +| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs) | | - | 滑轨的样式 | ### legendOption.reversed @@ -230,10 +265,10 @@ _legendOption_ 配置如下： 图例标题配置，默认不展示。_G2LegendTitleCfg_ 配置如下： -| 参数名 | 类型 | 是否必选 | 默认值 | 描述 | -| ------- | ------------------- | -------- | ------ | ------------------ | -| spacing | number | | - | 标题同图例项的间距 | -| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs)| | - | 文本样式配置项 | +| 参数名 | 类型 | 是否必选 | 默认值 | 描述 | +| ------- | -------------------------------------------- | -------- | ------ | ------------------ | +| spacing | number | | - | 标题同图例项的间距 | +| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs) | | - | 文本样式配置项 | ### legendOption.track @@ -241,9 +276,9 @@ _legendOption_ 配置如下： 适用于 连续图例，选择范围的色块样式配置项。_ContinueLegendTrackCfg_ 配置如下： -| 参数名 | 类型 | 是否必选 | 默认值 | 描述 | -| ------ | ------------------- | -------- | ------ | -------------- | -| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs)| | - | 选定范围的样式 | +| 参数名 | 类型 | 是否必选 | 默认值 | 描述 | +| ------ | -------------------------------------------- | -------- | ------ | -------------- | +| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs) | | - | 选定范围的样式 | ### legendOption.values diff --git a/src/interface.ts b/src/interface.ts index e05a083e00..2154648dbf 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1910,7 +1910,7 @@ export interface StyleSheet { /** 图例分页器文本颜色 */ legendPageNavigatorTextFillColor: string; /** 图例分页器文本字体大小 */ - legendPageNavigatorTextFontSize: string; + legendPageNavigatorTextFontSize: number; /** 连续图例滑块填充色 */ sliderRailFillColor?: string;