diff --git a/docs/manual/advanced/responsive.en.md b/docs/manual/advanced/responsive.en.md
new file mode 100644
index 0000000000..2ce14e57e5
--- /dev/null
+++ b/docs/manual/advanced/responsive.en.md
@@ -0,0 +1,204 @@
+---
+title: 响应式图表
+order: 0
+---
+
+## 概述
+
+响应式图表 (responsive plot) 的目的是为了保证图表在任何数据和显示尺寸下的基本可读性问题。
+
+在现实的图表应用场景中，一个棘手的难题是图表的展示空间往往并不足够显示图表的数据量。我们的业务数据可能呈现多种形态，不一定是理想数据；同时图表的使用场景也经常是在一个上下文语境中，比如在文本中插入的图表、中台系统、dashboard 等，这决定了图表未必能获得理想的展示空间。
+
+图表数据量和展示空间的矛盾会造成图表布局错乱、组件遮挡图形、组件各部分相互重叠等问题。下图是两个典型案例：
+
+
+
+这种非常典型的信息密度 (information density) 过载现象正是 G2Plot 响应式模块所要解决的问题 — 当信息密度过高时，对图表辅助信息进行抽稀，保证图表主要信息的展示，以使图表的信息密度达到合理平衡。
+
+这种非常典型的信息密度 (information density) 过载现象正是 G2Plot 响应式模块所要解决的问题 — 当信息密度过高时，对图表辅助信息进行抽稀，保证图表主要信息的展示，以使图表的信息密度达到合理平衡。
+
+g2plot 响应式方案由三块组成：constraints（约束条件）、rules（响应规则） 和 responsiveTheme（响应式主题）。基本思路是：首先定义图表合理信息密度的衡量标准 (constraints)，然后去判断图表各组成部分是否满足该标准，如果不满足标准，则对图表应用响应规则 (rules）。这个过程是 iterative 的，如果不满足约束条件，响应规则会被依次执行下去。
+
+一个约束条件 (constraint) 对应一组响应规则 (rules)，多个约束组构成一个完整的响应式方案 — resonsiveTheme。
+
+
+
+## Constraint （约束条件）
+
+可以将 constraint（约束条件） 理解为一个判断方法，定义某图表组成部分的信息密度衡量标准，并判断该部分是否符合该标准。
+
+下面的例子中声明了一个 axis（坐标轴）的约束条件，该条件判断坐标轴 label 之间的间距是否大于 4 像素。
+
+```js
+axis: {
+ constraint:{
+ name: 'elementDist',
+ option:{
+ value: 4,
+ },
+ },
+},
+```
+
+### 约束库
+
+g2plot 内置了一套常用的 constraint library，目前响应式模块还在试验和打磨阶段，该库将会持续更新：
+
+| constraint name | option | type | usage | intro |
+| --------------------- | ------------- | ------- | ------- | -------------------------- |
+| elementDist | value: Number | chain | compare | 两元素之间的距离 |
+| elementDistVertical | value: Number | chain | compare | 两元素之间的纵向距离 |
+| elementDistHorizontal | value: Number | chain | compare | 两元素之间的横向距离 |
+| elementWidth | ratio: Number | padding | compare | 元素的宽度占母级元素的比例 |
+| elementCollision | | group | compare | 两元素是否发生碰撞 |
+| columnWidth | ratio: Number | padding | assign | 柱形宽度 |
+| ringThickness | ratio: Number | padding | assign | 环形宽度 |
+| minRingThickness | value: Number | padding | assign | 最小环形宽度 |
+
+> 注 1：type 的含义
+>
+> - chain 类型的 constraint 定义的是一列有序 node，前后两 node 之间的约束关系
+> - padding 类型的 constraint 定义的是有子母级关系的两个 nodes 之间的约束关系
+> - group 类型的 constraint 定义的一列 nodes，node 与 node 之间的两两约束关系，label 与 label 之间的碰撞检测就属于 group 类型
+>
+> 注 2：usage 的含义
+>
+> - compare：判断方法，出参为 boolean
+> - assign：赋值方法
+
+### 注册自定义约束条件
+
+g2plot 允许用户注册自己的约束条件，允许覆盖现有约束库中的条件。
+
+```js
+function myConstraint(parameters, cfg?) {}
+
+plot.registerConstraint(name, {
+ type: 'padding',
+ usage: 'compare',
+ method: myConstraint,
+});
+```
+
+## Rules （响应规则）
+
+响应规则是当 constraint（约束条件）不满足的时候，对图表组件的优化策略。一个 constraint 可能对应着多个优化策略，这些优化策略将按配置的顺序执行。
+
+### 规则库
+
+g2plot 内置了一套常用的 rule library，目前响应式模块还在试验和打磨阶段，该库将会持续更新：
+
+| rule name | option | intro |
+| ------------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| textWrapper | lineNumber: Number | 文本折行，可设置每行字数或折几行 |
+| textRotation | degree: Number | 文本旋转，可设置旋转角度 |
+| textAbbrevaite | abbreviateBy: string | 文本省略，可设置省略头部、尾部或中间 |
+| textHide | | 文本消失 |
+| digitAbbraviate | unit: 'k' | 'm' | 'b' | 't' | 'auto'
decimal: number
formatter: Function | 数字省略，可设置格式化单位、保留小数点数，或自定义一个 formatter
如不设置格式化单位，则会自动应用 k - m - b- t 规则 |
+| dateTimeStringAbbraviate | keep: any[] | 时间文本周期显示，可设置保头保尾或保留任意一 index |
+| textAbbraviate | abbreviateBy?: 'start' | 'middle' | 'end' | 文本省略，可设置省略头部、省略中间、省略尾部 |
+| robustAbbraviate | unit: 'k' | 'm' | 'b' | 't' | 'auto'
decimal: number
formatter: Function
keep: any[] | 判断字符类型，应用 text / digit / dateTime abbreviate 方法 |
+| nodesSampling | keep: array | 抽样显示，可设置保头保尾或任意一个 index |
+| nodesSamplingByAbbraviate | | 配合 dateTimeAbbraviate 方法使用，抽样掉经过省略的文本，保留完整的文本。 |
+| nodeSamplingByChange | | 根据数据间的变化进行抽样，保留变化较大的点 |
+| nodeSamplingByState | state: {name: string,
exp: string }| function
| 根据状态量进行抽样，保留符合状态量的 node |
+| nodeJitter | | 元素在水平和垂直方向抖开 |
+| nodeJitterUpward | | 元素向上抖开并拉线 |
+| clearOverlapping | | 在一组元素中去除 overlap 的元素，当多个元素发生重叠时，只保留位于最高点的元素。此方法用于多折线数据点 label 的 overlapping。 |
+
+### 注册自定义响应规则
+
+g2plot 允许用户注册自己的响应规则，允许覆盖现有规则库中的规则。
+
+```js
+function myRule() {}
+plot.registerResponsiveRule(name, myRule);
+```
+
+
+
+## ResponsiveTheme
+
+多个 constraints 和 rules 的组合构成响应式图表的完整解决方案 — responsiveTheme（响应式主题）。G2Plot 内部提供一套默认好用的响应式主题，同时也向用户开放注册自己的响应式主题。
+
+### responsiveTheme 的结构
+
+一个完整的 responsiveTheme 的结构按图表构成进行组织，定义了图表内各组件的约束条件和该条件的响应规则。
+
+以柱状图为例，柱状图参与响应式的图表元素为图形 (column)、坐标轴 (axis)、图形标签 (label)，它的 responsiveTheme 结构如下：
+
+```js
+const responsiveTheme = {
+ axis: {
+ x: {
+ category: {
+ constraints: [],
+ rules: [],
+ },
+ },
+
+ y: {
+ linear: {
+ constraints: [],
+ rules: [],
+ },
+ },
+ },
+
+ label: {
+ constraints: [],
+ rules: [],
+ },
+
+ column: {
+ constraints: [],
+ },
+};
+```
+
+### 注册 responsiveTheme
+
+用户在注册自己的 responsiveTheme 时，可以自由的调用和组装 contraints 库和 rules 库中的方法。
+
+调用一个 constraint 方法：
+
+```js
+// 调用elementDist约束条件，并声明元素最小间距为8
+{
+ name: 'elementDist',
+ option: {
+ value: 8,
+ },
+}
+```
+
+调用一个 rule 方法：
+
+```js
+// 调用textAbbravaite响应规则，并声明省略文字的尾部
+{
+ name: 'textAbbrevaite',
+ option:{
+ abbraviateBy: 'end',
+ },
+}
+```
+
+组装：
+
+```js
+const lineTheme = {
+ label: {
+ constraints: [{
+ name: 'elementDist',
+ option:{
+ value: 8,
+ },
+ }],
+ rules: {
+ elementCollision: [{ name: 'nodesResamplingByChange' }, { name: 'clearOverlapping' }],
+ },
+ },
+});
+registerResponsiveTheme('line', lineTheme);
+```
diff --git a/docs/manual/advanced/responsive.zh.md b/docs/manual/advanced/responsive.zh.md
index 86e106323b..2ce14e57e5 100644
--- a/docs/manual/advanced/responsive.zh.md
+++ b/docs/manual/advanced/responsive.zh.md
@@ -29,15 +29,15 @@ g2plot 响应式方案由三块组成：constraints（约束条件）、rules（
下面的例子中声明了一个 axis（坐标轴）的约束条件，该条件判断坐标轴 label 之间的间距是否大于 4 像素。
-```
+```js
axis: {
constraint:{
name: 'elementDist',
option:{
- value: 4
- }
- }
-}
+ value: 4,
+ },
+ },
+},
```
### 约束库
@@ -70,7 +70,7 @@ g2plot 内置了一套常用的 constraint library，目前响应式模块还在
g2plot 允许用户注册自己的约束条件，允许覆盖现有约束库中的条件。
-```
+```js
function myConstraint(parameters, cfg?) {}
plot.registerConstraint(name, {
@@ -110,7 +110,7 @@ g2plot 内置了一套常用的 rule library，目前响应式模块还在试验
g2plot 允许用户注册自己的响应规则，允许覆盖现有规则库中的规则。
-```
+```js
function myRule() {}
plot.registerResponsiveRule(name, myRule);
```
@@ -127,7 +127,7 @@ plot.registerResponsiveRule(name, myRule);
以柱状图为例，柱状图参与响应式的图表元素为图形 (column)、坐标轴 (axis)、图形标签 (label)，它的 responsiveTheme 结构如下：
-```
+```js
const responsiveTheme = {
axis: {
x: {
@@ -162,38 +162,38 @@ const responsiveTheme = {
调用一个 constraint 方法：
-```
+```js
// 调用elementDist约束条件，并声明元素最小间距为8
{
name: 'elementDist',
option: {
- value: 8
- }
+ value: 8,
+ },
}
```
调用一个 rule 方法：
-```
+```js
// 调用textAbbravaite响应规则，并声明省略文字的尾部
{
name: 'textAbbrevaite',
option:{
- abbraviateBy: 'end'
- }
+ abbraviateBy: 'end',
+ },
}
```
组装：
-```
+```js
const lineTheme = {
label: {
constraints: [{
name: 'elementDist',
option:{
- value: 8
- }
+ value: 8,
+ },
}],
rules: {
elementCollision: [{ name: 'nodesResamplingByChange' }, { name: 'clearOverlapping' }],
diff --git a/docs/manual/advanced/state-and-charts-connetion.en.md b/docs/manual/advanced/state-and-charts-connetion.en.md
new file mode 100644
index 0000000000..70eac84404
--- /dev/null
+++ b/docs/manual/advanced/state-and-charts-connetion.en.md
@@ -0,0 +1,197 @@
+---
+title: 状态量与图表联动
+order: 1
+---
+
+## 状态量
+
+
+状态量被用于驱动图表内各元素元子级的 UI 状态变化。在 g2plot 中，元子级 UI 状态是可以枚举的，共有以下四种：
+
+- 图形 default 状态：`normal`
+- 图形高亮：`active`
+- 图形置灰：`disable`
+- 图形选中：`selected`
+
+UI 状态的变化是数据驱动的，能够响应状态量的图表元素记录所对应的数据，而状态量本身是一个数据判断条件。当图表元素对应的数据符合状态量的判断条件时，它的 UI 就会切换到状态量所对应的图形样式。
+
+## 状态量的使用
+
+### 快捷方法
+
+g2plot 提供了状态量变化的快捷方法：`setActive()` `setDisable()` `setSelected()` `setNormal()`
+
+#### setActive(condition,style?)
+
+`condition`: function | object 设置状态量的条件
+`condition: function` 通过回调函数设置状态量条件
+`condition: { name: string, exp: string | number }` 设置单值的状态量条件，name 一般为图表数据中的字段名称，exp 为单值数据
+`condition: { name: string, exp: function }` 设置多值的状态量，name 一般为图表数据中的字段名称，exp 为一个回调函数
+
+`style: object` 可选，设置状态量驱动的 UI 样式。如不配置，则会默认去取 theme 中的状态样式。
+
+代码示例：
+
+```js
+// 通过回调函数设置状态量
+plot.setActive((shapeData) => {
+ return shapeData.type !== 'a';
+});
+
+// 设置单值状态量
+plot.setActive({ name: 'type', exp: 'a' });
+
+// 设置多值状态量
+plot.setActive({
+ name: 'type',
+ exp: (value) => {
+ return value !== 'a';
+ },
+});
+
+// 设置状态量样式
+plot.setActive({ name: 'type', exp: 'a' }, { stroke: 'black', lineWidth: 2 });
+```
+
+#### setDisable(condition,style?)
+
+配置项与用法同 setActive。
+
+#### setSelected(condition,style?)
+
+配置项与用法同 setActive。
+
+#### setNormal(condition)
+
+清空状态样式，使图表元素回到 default 状态。g2plot 会记录图表元素的 default 样式，因此不需另外配置 style。
+
+用法同 setActive。
+
+### 初始化设置
+
+通过`defaultState`配置项配置图表初始化时的状态。
+
+#### defaultState: object
+
+`active: object`
+`condition: { name: string, exp: string | number | function }` 设置状态量条件
+`related: string[]` 设置同状态量联动的组件，如 axis、label、tooltip 等
+
+`disable: object` 用法同 active
+`selected: object` 用法同 active
+
+用法：
+
+```js
+defaultState: {
+ active: {
+ condition: {
+ name: 'value',
+ exp: 5,
+ },
+ related: ['axis','label'],
+ },
+
+ disable: {
+ condition: {
+ name: 'type',
+ exp: (d) => {
+ return d !== 'a';
+ },
+ },
+ related: ['tooltip','label','axis'],
+ },
+}
+```
+
+### 在图表主题中定义状态样式
+
+```js
+plot.registerTheme('line', {
+ lineStyle: {
+ normal: {} | Function,
+ active: {} | Function,
+ disable: {} | Function,
+ selected: {} | Function,
+ },
+});
+```
+
+## stateManager - 状态管理机
+
+stateManager 是一个可插拔的抽象中间层，主要负责三件事：
+
+1. 状态量的存储
+2. 状态量的更新和更新事件的分发
+3. 获取状态量。
+
+stateManager 可用于多个图表之间，以及图表与外部组件的联动。g2plot 提供`bindStateManager()`方法用以将 stateManager 实例绑定到图表。
+
+### stateManager 的创建与使用
+
+新建一个 stateManager 实例：
+
+```js
+import { StateManager } from '@antv/g2plot';
+
+const stateManager = new StateManager();
+```
+
+#### setState(name,exp)
+
+设置和更新状态量。
+
+`name: string` 状态量名字
+`exp: string | number | function` 状态量条件，可以设为一个值或回调函数
+
+#### getState(name)
+
+获取状态量。
+
+`name: string` 状态量名字
+
+#### getAllState()
+
+获取 stateManager 存储的当前所有状态量。
+
+#### clear()
+
+清空状态量。
+
+### 将 stateManager 绑定到图表
+
+图表支持 bindStateManager 方法，将一个 stateManager 实例绑定到图表，并传入相应的配置项。一个 stateManager 实例可以绑定到多个图表，从而支持多图表联动。
+
+#### bindStateManager(cfg)
+
+可配置属性如下：
+
+- `setState`: 更新状态量
+ `event:string`: 可选，指定 event 时，状态量的更新由事件驱动，如不指定，则直接更新 stateManager 中的状态量
+ `state`: 要更新的状态量 name 和 value，支持函数式
+ `state: function` 通过回调函数设置状态量条件
+ `state: { name: string, exp: string | number }` 设置单值的状态量条件，name 一般为图表数据中的字段名称，exp 为单值数据
+ `state: { name: string, exp: function }` 设置多值的状态量，name 一般为图表数据中的字段名称，exp 为一个回调函数
+
+- `onStateChange`: 状态量更新时如何响应
+ `name:string`: 状态量的名字
+ `callback: function`: 状态量更新后图表如何响应
+
+代码示例：
+
+```js
+plot.bindStateManager(manager, {
+ setState: [
+ {
+ event: 'column:click',
+ state: { name: 'xxx', exp } | () => {},
+ },
+ ],
+ onStateChange: [
+ {
+ name: 'xxx',
+ callback: () => {},
+ },
+ ],
+});
+```
diff --git a/docs/manual/advanced/state-and-charts-connetion.zh.md b/docs/manual/advanced/state-and-charts-connetion.zh.md
index 74f8c1e64c..70eac84404 100644
--- a/docs/manual/advanced/state-and-charts-connetion.zh.md
+++ b/docs/manual/advanced/state-and-charts-connetion.zh.md
@@ -32,7 +32,7 @@ g2plot 提供了状态量变化的快捷方法：`setActive()` `setDisable()`
代码示例：
-```
+```js
// 通过回调函数设置状态量
plot.setActive((shapeData) => {
return shapeData.type !== 'a';
@@ -82,30 +82,31 @@ plot.setActive({ name: 'type', exp: 'a' }, { stroke: 'black', lineWidth: 2 });
用法：
-```
-defaultState:{
- active:{
- condition:{
- name: 'value',
- exp: 5
- },
- related: ['axis','label']
+```js
+defaultState: {
+ active: {
+ condition: {
+ name: 'value',
+ exp: 5,
},
- disable:{
- condition: {
- name: 'type',
- exp: (d)=>{
- return d !== 'a';
- }
+ related: ['axis','label'],
+ },
+
+ disable: {
+ condition: {
+ name: 'type',
+ exp: (d) => {
+ return d !== 'a';
},
- related: ['tooltip','label','axis']
- }
+ },
+ related: ['tooltip','label','axis'],
+ },
}
```
### 在图表主题中定义状态样式
-```
+```js
plot.registerTheme('line', {
lineStyle: {
normal: {} | Function,
@@ -118,7 +119,11 @@ plot.registerTheme('line', {
## stateManager - 状态管理机
-stateManager 是一个可插拔的抽象中间层，主要负责三件事：(1). 状态量的存储 （2). 状态量的更新和更新事件的分发 （3). 获取状态量。
+stateManager 是一个可插拔的抽象中间层，主要负责三件事：
+
+1. 状态量的存储
+2. 状态量的更新和更新事件的分发
+3. 获取状态量。
stateManager 可用于多个图表之间，以及图表与外部组件的联动。g2plot 提供`bindStateManager()`方法用以将 stateManager 实例绑定到图表。
@@ -126,7 +131,7 @@ stateManager 可用于多个图表之间，以及图表与外部组件的联动
新建一个 stateManager 实例：
-```
+```js
import { StateManager } from '@antv/g2plot';
const stateManager = new StateManager();
@@ -174,19 +179,19 @@ const stateManager = new StateManager();
代码示例：
-```
-plot.bindStateManager(manager,{
- setState:[
+```js
+plot.bindStateManager(manager, {
+ setState: [
{
- event:'column:click',
- state: {name:'xxx',exp } || ()=>{}
- }
+ event: 'column:click',
+ state: { name: 'xxx', exp } | () => {},
+ },
],
onStateChange: [
{
- name:'xxx',
- callback:()=>{}
- }
- ]
+ name: 'xxx',
+ callback: () => {},
+ },
+ ],
});
```
diff --git a/docs/manual/general-config.en.md b/docs/manual/general-config.en.md
new file mode 100644
index 0000000000..a761c52739
--- /dev/null
+++ b/docs/manual/general-config.en.md
@@ -0,0 +1,157 @@
+---
+title: 图表通用配置
+order: 2
+---
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+## title
+
+**optional**, object 类型
+
+配置图表的标题，默认显示在图表左上角。
+
+> 请注意设置 title 将会压缩图表展示区域
+
+`visible`: `boolean` 是否显示标题
+`text`: `string` 标题文本
+`style`：`object` 标题样式，详见文本样式配置
+
+## description
+
+**optional**, object 类型
+
+配置图表的描述，description 显示在 title 下方，默认在图表左上角。
+
+> 请注意设置 description 将会压缩图表展示区域
+
+`visible`: `boolean` 是否显示描述
+`text`: `string` 描述文本
+`style`：`object` 描述样式，详见文本样式配置
+
+## width
+
+**optional**, number 类型
+
+图表宽度。
+
+如不进行配置，则默认采用 theme 中的宽度。
+
+## height
+
+**optional**, number 类型
+
+图表高度。
+
+如不进行配置，则默认采用 theme 中的高度。
+
+## forceFit
+
+**optional**, boolean 类型
+
+图表是否自适应容器宽高。
+
+## padding
+
+**optional**, number[] | string 类型
+
+图表内边距，是边框相对绘图区域的边距。坐标轴 (axis）和图例 (legend) 都显示在这一区域。
+
+目前支持以下两种配置方式：
+
+1. `padding: [10,10,10,10]`，顺序与 CSS 盒模型相同：上边距、右边距、下边距、左边距
+1. `padding: 'auto'`，此为默认配置，将会自动计算边距所占的空间
+
+## theme
+
+**optional**, object 类型
+
+图表主题，如不进行配置则默认使用 G2Plot 默认主题。详见 theme 文档。
+
+## tooltip
+
+**optional**, object 类型
+
+`visible: boolean` tooltip 是否可见
+`shared: boolean` 设置 tooltip 是否只展示单条数据
+`crosshairs`: 配置 tooltip 辅助线
`false`: 不显示辅助线
`type: 'x' | 'y' | 'cross'` 配置辅助线的形态
`style: object` 配置辅助线样式，详见图形属性
+`htmlContent: function`
自定义 tooltip，用户可以根据 htmlContent 方法返回的 title 和 items 两个参数定义 tooltip dom 节点的构成和显示方式。
+
+```js
+htmlContent: (title, items) => {
+ return '';
+};
+```
+
+此方法允许用户传入一个外部 dom 或 dom id 作为 tooltip 的容器。
+
+```js
+htmlContent: (title, items) => {
+ return dom | dom.id;
+};
+```
+
+## legend
+
+**optional**, object 类型
+
+`visible: boolean` 图例是否可见
+`position: string` 图例位置，以十二方位布局
+
+> 设置图例的显示位置，可设置的值为 12 个：`left-top`,`left-center`,`left-bottom`,`right-top`,`right-center`,`right-bottom`,`top-left`,`top-center`,`top-right`,`bottom-left`,`bottom-center`,`bottom-right`。
+
+`formatter: function` 对图例的显示信息进行格式化
+`offsetX: number` 图例在 position 的基础上再往 x 方向偏移量，单位 px
+`offsetY: number` 图例在 position 的基础上再往 y 方向偏移量，单位 px
+
+## events
+
+**optional**
+
+- 图表区域事件：
+ `onPlotClick: function` 图表区域点击事件
+ `onPlotDblClick: function` 图表区域双击事件
+ `onPlotMousemove: function` 图表区域鼠标移动事件
+ `onPlotContextmenu: function` 图表区域右键事件
+
+- 图例事件：
+ `onLabelClick: function` 图例点击事件
+ `onLabelDblClick: function` 图例双击事件
+ `onLabelMouseMove: function` 图例鼠标移动事件
+ `onLabelContextmenu: function` 图例右键事件
+
+## 通用方法
+
+### render()
+
+**reqiured**
+
+渲染图表。
+
+### updateConfig()
+
+**optional**
+
+更新图表配置项。
+
+```js
+plot.updateConfig({
+ width: 500,
+ height: 600,
+ legend: {
+ visible: false,
+ },
+});
+```
+
+### repaint()
+
+**optional**
+
+图表画布重绘。
+
+### destory()
+
+**optional**
+
+销毁图表。
diff --git a/docs/manual/general-config.zh.md b/docs/manual/general-config.zh.md
index e41db685a7..6469aba3ec 100644
--- a/docs/manual/general-config.zh.md
+++ b/docs/manual/general-config.zh.md
@@ -7,7 +7,7 @@ order: 2
## title
-**optional**
+**optional**, object 类型
配置图表的标题，默认显示在图表左上角。
@@ -19,7 +19,7 @@ order: 2
## description
-**optional**
+**optional**, object 类型
配置图表的描述，description 显示在 title 下方，默认在图表左上角。
@@ -29,58 +29,55 @@ order: 2
`text`: `string` 描述文本
`style`：`object` 描述样式，详见文本样式配置
-## width：number
+## width
-**optional**
+**optional**, number 类型
图表宽度。
如不进行配置，则默认采用 theme 中的宽度。
-## height：number
+## height
-**optional**
+**optional**, number 类型
图表高度。
如不进行配置，则默认采用 theme 中的高度。
-## forceFit: boolean
+## forceFit
-**optional**
+**optional**, boolean 类型
图表是否自适应容器宽高。
-## padding: number[] | string
+## padding
-**optional**
+**optional**, number[] | string 类型
+
+图表内边距，是边框相对绘图区域的边距。坐标轴 (axis）和图例 (legend) 都显示在这一区域。
-图表内边距，是边框相对绘图区域的边距。坐标轴 (axis）和图例 (legend) 都显示在这一区域。/>目前支持以下两种配置方式：
+目前支持以下两种配置方式：
1. `padding: [10,10,10,10]`，顺序与 CSS 盒模型相同：上边距、右边距、下边距、左边距
1. `padding: 'auto'`，此为默认配置，将会自动计算边距所占的空间
-## theme: object
+## theme
-**optional**
+**optional**, object 类型
图表主题，如不进行配置则默认使用 G2Plot 默认主题。详见 theme 文档。
## tooltip
-**optional**
+**optional**, object 类型
-`visible: boolean` tooltip 是否可见
+`visible: boolean` tooltip 是否可见
+`shared: boolean` 设置 tooltip 是否只展示单条数据
+`crosshairs`: 配置 tooltip 辅助线
`false`: 不显示辅助线
`type: 'x' | 'y' | 'cross'` 配置辅助线的形态
`style: object` 配置辅助线样式，详见图形属性
+`htmlContent: function`
自定义 tooltip，用户可以根据 htmlContent 方法返回的 title 和 items 两个参数定义 tooltip dom 节点的构成和显示方式。
-`shared: boolean` 设置 tooltip 是否只展示单条数据。
-
-`crosshairs`: 配置 tooltip 辅助线
`false`: 不显示辅助线
`type: 'x' | 'y' | 'cross'` 配置辅助线的形态
`style: object` 配置辅助线样式，详见图形属性
-
-`htmlContent: function`
-
-自定义 tooltip，用户可以根据 htmlContent 方法返回的 title 和 items 两个参数定义 tooltip dom 节点的构成和显示方式。
-
-```
+```js
htmlContent: (title, items) => {
return '';
};
@@ -88,7 +85,7 @@ htmlContent: (title, items) => {
此方法允许用户传入一个外部 dom 或 dom id 作为 tooltip 的容器。
-```
+```js
htmlContent: (title, items) => {
return dom | dom.id;
};
@@ -96,7 +93,7 @@ htmlContent: (title, items) => {
## legend
-**optional**
+**optional**, object 类型
`visible: boolean` 图例是否可见
`position: string` 图例位置，以十二方位布局
@@ -104,8 +101,8 @@ htmlContent: (title, items) => {
> 设置图例的显示位置，可设置的值为 12 个：`left-top`,`left-center`,`left-bottom`,`right-top`,`right-center`,`right-bottom`,`top-left`,`top-center`,`top-right`,`bottom-left`,`bottom-center`,`bottom-right`。
`formatter: function` 对图例的显示信息进行格式化
-`offsetX: number` 图例在 position 的基础上再往 x 方向偏移量，单位 px。/>
-`offsetY: number` 图例在 position 的基础上再往 y 方向偏移量，单位 px。
+`offsetX: number` 图例在 position 的基础上再往 x 方向偏移量，单位 px
+`offsetY: number` 图例在 position 的基础上再往 y 方向偏移量，单位 px
## axis
@@ -237,7 +234,7 @@ htmlContent: (title, items) => {
更新图表配置项。
-```
+```js
plot.updateConfig({
width: 500,
height: 600,
diff --git a/docs/manual/getting-started.en.md b/docs/manual/getting-started.en.md
new file mode 100644
index 0000000000..d14c19dff5
--- /dev/null
+++ b/docs/manual/getting-started.en.md
@@ -0,0 +1,271 @@
+---
+title: 快速上手
+order: 1
+---
+
+## 安装
+
+### 浏览器引入
+
+既可以通过将脚本下载到本地也可以直接引入在线资源。
+
+```html
+
+
+```
+
+```html
+
+
+```
+
+### 通过 npm 安装
+
+我们提供了 g2plot npm 包，通过下面的命令即可完成安装：
+
+```bash
+npm install @antv/g2plot --save
+```
+
+成功安装完成之后，即可使用 `import` 或 `require` 进行引用：
+
+```
+import g2plot from '@antv/g2plot';
+```
+
+## 快速试用
+
+在 g2plot 引入页面后，我们就已经做好了创建第一个图表的准备了。下面是以一个基础折线图为例开始我们的第一个图表创建。
+
+**step1**: 创建图表容器
+
+```html
+
+```
+
+**step2**: 引入数据。g2plot 的数据源格式是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
+
+```js
+const data = [
+ { year: '1991', value: 3 },
+ { year: '1992', value: 4 },
+ { year: '1993', value: 3.5 },
+ { year: '1994', value: 5 },
+ { year: '1995', value: 4.9 },
+ { year: '1996', value: 6 },
+ { year: '1997', value: 7 },
+ { year: '1998', value: 9 },
+ { year: '1999', value: 13 },
+];
+```
+
+**step3**: 创建并渲染图表
+
+```js
+const linePlot = new g2plot.Line('canvas', {
+ data,
+ xField: 'year',
+ yField: 'value',
+});
+
+linePlot.render();
+```
+
+最终结果：
+
+
+
+## 搭配图表组件
+
+在上一步生成的基础折线图，已经具备了图表的基础组件之一：坐标轴。接下来，我们来为图表加入四个组件：图表标题 (title)、图表描述 (description)、辅助数据点 (point) 和图形标签 (label)，使图表承载的信息更加丰富，更具有可读性：
+
+**step1**: 配置图表标题文本
+
+```js
+const linePlot = new g2plot.Line('canvas', {
+ // highlight-start
+ title: {
+ text: '这是一个基础折线图',
+ },
+ // highlight-end
+ data,
+ xField: 'year',
+ yField: 'value',
+});
+
+linePlot.render();
+```
+
+**step2**: 配置图表描述文本
+
+```js
+const linePlot = new g2plot.Line('canvas', {
+ title: {
+ text: '这是一个基础折线图',
+ },
+ // highlight-start
+ description: {
+ text: '折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式。',
+ },
+ // highlight-end
+ data,
+ xField: 'year',
+ yField: 'value',
+});
+linePlot.render();
+```
+
+**step3**: 显示辅助数据点
+
+```js
+const linePlot = new g2plot.Line('canvas', {
+ title: {
+ text: '这是一个基础折线图',
+ },
+ description: {
+ text: '折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式。',
+ },
+ data,
+ xField: 'year',
+ yField: 'value',
+ // highlight-start
+ point: {
+ visible: true,
+ },
+ // highlight-end
+});
+linePlot.render();
+```
+
+**step4**: 显示图形标签
+
+```js
+const linePlot = new g2plot.Line('canvas', {
+ title: {
+ text: '这是一个基础折线图',
+ },
+ description: {
+ text: '折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式。',
+ },
+ data,
+ xField: 'year',
+ yField: 'value',
+ point: {
+ visible: true,
+ },
+ // highlight-start
+ label: {
+ visible: true,
+ },
+ // highlight-end
+});
+linePlot.render();
+```
+
+最终结果：
+
+
+
+## 个性化设置
+
+现在图表的内容足够丰富了，但图表各元素的视觉样式采用的是图表默认主题的样式，还没有经过特别定制。图表主体中的文本元素也没有进行格式化。下面我们来对图表进行一些个性化配置，我们将配置折线的颜色、更改辅助数据点的样式、为 y 轴标签加上单位：
+
+**step1**: 配置折线颜色，来个冷色到暖色的大变身
+
+```js
+const linePlot = new g2plot.Line('canvas', {
+ title: {
+ text: '这是一个基础折线图',
+ },
+ description: {
+ text: '折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式。',
+ },
+ data,
+ xField: 'year',
+ yField: 'value',
+ color: '#FE740C', // highlight-line
+ point: {
+ visible: true,
+ },
+ label: {
+ visible: true,
+ },
+});
+
+linePlot.render();
+```
+
+**step2**: 更改辅助数据点大小及样式
+
+```js
+const linePlot = new g2plot.Line('canvas', {
+ title: {
+ text: '这是一个基础折线图',
+ },
+ description: {
+ text: '折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式。',
+ },
+ data,
+ xField: 'year',
+ yField: 'value',
+ color: '#FE740C',
+ // highlight-start
+ point: {
+ visible: true,
+ size: 5,
+ style: {
+ fill: '#7979F5',
+ lineWidth: 2,
+ fillOpacity: 0.6,
+ },
+ },
+ // highlight-end
+ label: {
+ visible: true,
+ },
+});
+linePlot.render();
+```
+
+**step3**: 格式化 y 轴标签加单位
+
+```js
+const linePlot = new g2plot.Line('canvas', {
+ title: {
+ text: '这是一个基础折线图',
+ },
+ description: {
+ text: '折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式。',
+ },
+ data,
+ xField: 'year',
+ yField: 'value',
+ color: '#FE740C',
+ point: {
+ visible: true,
+ size: 5,
+ style: {
+ fill: '#7979F5',
+ lineWidth: 2,
+ fillOpacity: 0.6,
+ },
+ },
+ // highlight-start
+ yAxis: {
+ formatter: (v) => {
+ return v + 'k';
+ },
+ },
+ // highlight-end
+ label: {
+ visible: true,
+ },
+});
+linePlot.render();
+```
+
+最终结果：
+
+
+
+经过上面由浅至深的三步教程，你应该已经基本了解 g2plot 的使用方法了，不过这远远不是终点，g2plot 还有很多有趣的配置和特性等待你的尝试和探索。更多基础功能请参考[图表通用配置](../manual/general-config)及[各图表配置项](../manual/plots/line)，一些尚在实验阶段的高级功能请移步[高级功能](../manual/advanced/responsive)。
diff --git a/docs/manual/getting-started.zh.md b/docs/manual/getting-started.zh.md
index 0d6d717be2..d14c19dff5 100644
--- a/docs/manual/getting-started.zh.md
+++ b/docs/manual/getting-started.zh.md
@@ -45,7 +45,7 @@ import g2plot from '@antv/g2plot';
**step2**: 引入数据。g2plot 的数据源格式是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
-```
+```js
const data = [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
@@ -61,7 +61,7 @@ const data = [
**step3**: 创建并渲染图表
-```
+```js
const linePlot = new g2plot.Line('canvas', {
data,
xField: 'year',
@@ -81,11 +81,13 @@ linePlot.render();
**step1**: 配置图表标题文本
-```
+```js
const linePlot = new g2plot.Line('canvas', {
+ // highlight-start
title: {
text: '这是一个基础折线图',
},
+ // highlight-end
data,
xField: 'year',
yField: 'value',
@@ -96,14 +98,16 @@ linePlot.render();
**step2**: 配置图表描述文本
-```
+```js
const linePlot = new g2plot.Line('canvas', {
title: {
text: '这是一个基础折线图',
},
+ // highlight-start
description: {
text: '折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式。',
},
+ // highlight-end
data,
xField: 'year',
yField: 'value',
@@ -113,7 +117,7 @@ linePlot.render();
**step3**: 显示辅助数据点
-```
+```js
const linePlot = new g2plot.Line('canvas', {
title: {
text: '这是一个基础折线图',
@@ -124,16 +128,18 @@ const linePlot = new g2plot.Line('canvas', {
data,
xField: 'year',
yField: 'value',
+ // highlight-start
point: {
visible: true,
},
+ // highlight-end
});
linePlot.render();
```
**step4**: 显示图形标签
-```
+```js
const linePlot = new g2plot.Line('canvas', {
title: {
text: '这是一个基础折线图',
@@ -147,9 +153,11 @@ const linePlot = new g2plot.Line('canvas', {
point: {
visible: true,
},
+ // highlight-start
label: {
visible: true,
},
+ // highlight-end
});
linePlot.render();
```
@@ -164,7 +172,7 @@ linePlot.render();
**step1**: 配置折线颜色，来个冷色到暖色的大变身
-```
+```js
const linePlot = new g2plot.Line('canvas', {
title: {
text: '这是一个基础折线图',
@@ -175,7 +183,7 @@ const linePlot = new g2plot.Line('canvas', {
data,
xField: 'year',
yField: 'value',
- color: '#FE740C',
+ color: '#FE740C', // highlight-line
point: {
visible: true,
},
@@ -189,7 +197,7 @@ linePlot.render();
**step2**: 更改辅助数据点大小及样式
-```
+```js
const linePlot = new g2plot.Line('canvas', {
title: {
text: '这是一个基础折线图',
@@ -201,6 +209,7 @@ const linePlot = new g2plot.Line('canvas', {
xField: 'year',
yField: 'value',
color: '#FE740C',
+ // highlight-start
point: {
visible: true,
size: 5,
@@ -210,6 +219,7 @@ const linePlot = new g2plot.Line('canvas', {
fillOpacity: 0.6,
},
},
+ // highlight-end
label: {
visible: true,
},
@@ -219,7 +229,7 @@ linePlot.render();
**step3**: 格式化 y 轴标签加单位
-```
+```js
const linePlot = new g2plot.Line('canvas', {
title: {
text: '这是一个基础折线图',
@@ -240,11 +250,13 @@ const linePlot = new g2plot.Line('canvas', {
fillOpacity: 0.6,
},
},
+ // highlight-start
yAxis: {
formatter: (v) => {
return v + 'k';
},
},
+ // highlight-end
label: {
visible: true,
},
@@ -256,4 +268,4 @@ linePlot.render();
-经过上面由浅至深的三步教程，你应该已经基本了解 g2plot 的使用方法了，不过这远远不是终点，g2plot 还有很多有趣的配置和特性等待你的尝试和探索。更多基础功能请参考[图表通用配置](../manual/general-config)及[各图表配置项](../plots/column)，一些尚在实验阶段的高级功能请移步[高级功能](../advanced/responsive)。
+经过上面由浅至深的三步教程，你应该已经基本了解 g2plot 的使用方法了，不过这远远不是终点，g2plot 还有很多有趣的配置和特性等待你的尝试和探索。更多基础功能请参考[图表通用配置](../manual/general-config)及[各图表配置项](../manual/plots/line)，一些尚在实验阶段的高级功能请移步[高级功能](../manual/advanced/responsive)。
diff --git a/docs/manual/introduction.en.md b/docs/manual/introduction.en.md
new file mode 100644
index 0000000000..cbb41cf67f
--- /dev/null
+++ b/docs/manual/introduction.en.md
@@ -0,0 +1,70 @@
+---
+title: 简介
+order: 0
+redirect_from:
+ - /en/docs/manual
+---
+
+g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。
+
+## 特性
+
+- 📦 开箱即用、默认好用的高质量统计图表
+
+- 🎨 提炼自企业级产品的视觉语言和设计规范
+
+- 📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
+
+- 🔳 图层化设计方法：在 g2plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性
+
+
+
+## 安装
+
+```bash
+$ npm install @antv/g2plot
+```
+
+## 使用
+
+
+
+```html
+
+```
+
+```js
+import g2plot from '@antv/g2plot';
+
+const data = [
+ { year: '1951 年', sales: 38 },
+ { year: '1952 年', sales: 52 },
+ { year: '1956 年', sales: 61 },
+ { year: '1957 年', sales: 145 },
+ { year: '1958 年', sales: 48 },
+];
+
+const barPlot = new g2plot.Bar('c1', {
+ data,
+ xField: 'sales',
+ yField: 'year',
+ colorField: 'year',
+});
+
+barPlot.render();
+```
+
+## 开发
+
+```bash
+$ npm install
+
+# run test case
+$ npm run test-live
+
+# build watching file changes and run demos
+$ npm run dev
+
+# run demos
+$ npm run demos
+```
diff --git a/docs/manual/introduction.zh.md b/docs/manual/introduction.zh.md
index cb0949fd11..453267a7e6 100644
--- a/docs/manual/introduction.zh.md
+++ b/docs/manual/introduction.zh.md
@@ -3,7 +3,6 @@ title: 简介
order: 0
redirect_from:
- /zh/docs/manual
- - /en/docs/manual
---
g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。
@@ -19,14 +18,10 @@ g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的
- 🔳 图层化设计方法：在 g2plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性
-
-
-(src as img)="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*mkcRToWJGlIAAAAAAAAAAABkARQnAQ" width="500">(/p> as )
-
## 安装
-```
+```bash
$ npm install @antv/g2plot
```
@@ -38,7 +33,7 @@ $ npm install @antv/g2plot
```
-```
+```js
import g2plot from '@antv/g2plot';
const data = [
diff --git a/docs/manual/plots/area.en.md b/docs/manual/plots/area.en.md
new file mode 100644
index 0000000000..53da463940
--- /dev/null
+++ b/docs/manual/plots/area.en.md
@@ -0,0 +1,194 @@
+---
+title: Area - 面积图
+order: 1
+---
+
+
+
+## 图表故事
+
+面积图又叫区域图。它是在折线图的基础之上形成的，它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充，这样一个填充区域我们叫做面积，颜色的填充可以更好的突出趋势信息。
+
+面积图用于强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。他们最常用于表现趋势和关系，而不是传达特定的值。
+
+## 数据类型
+
+折线图适合的数据类型为一个**连续字段**（时间）和一个**离散字段**（数值）。在下面这个例子中，`time`为连续数据字段，`value`为离散数据字段。
+
+```js
+const data = [
+ { time: '2000', value: 100 },
+ { time: '2001', value: 60 },
+ { time: '2002', value: 30 },
+];
+```
+
+在进行图表绘制的时候，连续字段将映射到折线形状在 x 方向上的信息，而离散字段将映射到折线形状在 y 方向上的信息。/>在上面的示例数据中再加入一个**分类字段**`type`，折线将根据该分类字段分为两根，两根折线在 x 方向（时间）的信息是完全一致的，通常用作同一时间区间内两个变量发展趋势的对比。
+
+```js
+const data = [
+ { time: '2000', value: 100, type: 'a' },
+ { time: '2001', value: 60, type: 'a' },
+ { time: '2002', value: 30, type: 'a' },
+ { time: '2000', value: 70, type: 'b' },
+ { time: '2001', value: 120, type: 'b' },
+ { time: '2002', value: 40, type: 'b' },
+];
+```
+
+## 图表用法
+
+- **Dont's**
+ - 避免面积数量过多，且在视觉样式上无法区分主次
+ - 谨慎使用曲线面积图
+
+* **Do**
+ - 多面积时，考虑堆叠面积图而不是重叠面积图。
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### data
+
+**required**
+
+数据源为对象集合，例如：`[{ segment: '分类一'，value: 20 }, { segment: '分类二'，value: 20 }]`。
+
+### xField
+
+**required**, string 类型
+
+面积形状在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。
+
+### yField
+
+**required**, string 类型
+
+面积形状在 y 方向对应的数据字段名，一般对应一个离散字段。
+
+### color
+
+**optional**, string[] | function 类型
+
+指定折线颜色。如不进行配置则采用 theme 中的配色。
+
+### areaStyle
+
+**optional**, object | function 类型
+
+配置面积样式。
+
+`strokeStyle: string` 面积的边框颜色
+`opacity: number` 透明度
+`lineWidth: number` 面积区域边框线的线宽
+`lineDash: number[]` 面积区域边框线的虚线配置
+
+另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+
+### line
+
+**optional**, object 类型
+
+配置面积图上线，起到辅助阅读的作用。分组及颜色映射方式与面积图形保持一致。
+
+`visible: boolean` 是否显示数据线
+`opacity: number` 透明度
+`color: string` 颜色
+`size: number` 线宽
+`style: object | function` 线图形样式，另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象
+
+### point
+
+**optional**, object 类型
+
+配置面积图上的数据点，起到辅助阅读的作用。分组及颜色映射方式与面积图形保持一致。
+
+`visible: boolean` 是否显示数据点
+`shape: string` 数据点形状
+`size: number` 数据点大小
+`style: object | function` 数据点图形样式，另外该属性还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象
+
+### tooltip
+
+**optional** 见[通用图表配置](../general-config#tooltip)。
+
+### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+### label
+
+**optional**
+
+`visible: boolean` 图形标签是否显示
+`formatter: function` 对 label 的显示文本进行格式化
+`offsetX: number` 在 label 位置的基础上再往 x 方向的偏移量
+`offsetY: number` 在 label 位置的基础上再往 y 方向的偏移量
+`style: object` 配置 label 文本
+
+### events
+
+**optional**
+
+- 图形事件
+ `onAreaClick: function` 区域点击事件
+ `onAreaDblclick: function` 区域双击事件
+ `onAreaMousemove: function` 区域鼠标移动事件
+ `onAreaMouseenter: function` 区域鼠标进入事件
+ `onAreaMouseleave: function` 区域鼠标移出事件
+ `onAreaMousedown: function` 区域鼠标点击事件
+ `onAreaMouseup: function` 区域鼠标抬起事件
+ `onAreaContextmenu: function` 右键事件
+
+ 如配置了区域图上的数据点：
+
+ `onPointClick: function` 数据点点击事件
+ `onPointDblClick: function` 数据点双击事件
+ `onPointMousemove: function` 数据点鼠标移动事件
+ `onPointMouseenter: function` 数据点鼠标进入事件
+ `onPointMouseleave: function` 数据点鼠标移出事件
+ `onPointMousedown: function` 数据点鼠标点击事件
+ `onPointMouseup: function` 数据点鼠标抬起事件
+ `onPointContextmenu: function` 数据点右键事件
+
+ 如配置了区域图上的折线：
+
+ `onLineClick: function` 折线点击事件
+ `onLineDblClick: function` 折线双击事件
+ `onLineMousemove: function` 折线鼠标移动事件
+ `onLineMouseenter: function` 折线鼠标进入事件
+ `onLineMouseleave: function` 折线鼠标移出事件
+ `onLineMousedown: function` 折线鼠标点击事件
+ `onLineMouseup: function` 折线鼠标抬起事件
+ `onLineContextmenu: function` 折线右键事件
+
+- 其他事件类型见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/area.zh.md b/docs/manual/plots/area.zh.md
index 31bd6fae47..6c9c31cab9 100644
--- a/docs/manual/plots/area.zh.md
+++ b/docs/manual/plots/area.zh.md
@@ -7,7 +7,7 @@ order: 1
## 图表故事
-面积图又叫区域图。 它是在折线图的基础之上形成的，它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充，这样一个填充区域我们叫做面积，颜色的填充可以更好的突出趋势信息。
+面积图又叫区域图。它是在折线图的基础之上形成的，它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充，这样一个填充区域我们叫做面积，颜色的填充可以更好的突出趋势信息。
面积图用于强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。他们最常用于表现趋势和关系，而不是传达特定的值。
@@ -15,7 +15,7 @@ order: 1
折线图适合的数据类型为一个**连续字段**（时间）和一个**离散字段**（数值）。在下面这个例子中，`time`为连续数据字段，`value`为离散数据字段。
-```
+```js
const data = [
{ time: '2000', value: 100 },
{ time: '2001', value: 60 },
@@ -25,7 +25,7 @@ const data = [
在进行图表绘制的时候，连续字段将映射到折线形状在 x 方向上的信息，而离散字段将映射到折线形状在 y 方向上的信息。/>在上面的示例数据中再加入一个**分类字段**`type`，折线将根据该分类字段分为两根，两根折线在 x 方向（时间）的信息是完全一致的，通常用作同一时间区间内两个变量发展趋势的对比。
-```
+```js
const data = [
{ time: '2000', value: 100, type: 'a' },
{ time: '2001', value: 60, type: 'a' },
@@ -77,33 +77,33 @@ const data = [
**optional** 见[通用图表配置](../general-config#theme)。
-### data: collection
+### data
**required**
数据源为对象集合，例如：`[{ segment: '分类一'，value: 20 }, { segment: '分类二'，value: 20 }]`。
-### xField: string
+### xField
-**required**
+**required**, string 类型
面积形状在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。
-### yField: string
+### yField
-**required**
+**required**, string 类型
面积形状在 y 方向对应的数据字段名，一般对应一个离散字段。
-### color: string[] | function
+### color
-**optional**
+**optional**, string[] | function 类型
指定折线颜色。如不进行配置则采用 theme 中的配色。
-### areaStyle: object | function
+### areaStyle
-**optional**
+**optional**, object | function 类型
配置面积样式。
@@ -114,9 +114,9 @@ const data = [
另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
-### line: object
+### line
-**optional**
+**optional**, object 类型
配置面积图上线，起到辅助阅读的作用。分组及颜色映射方式与面积图形保持一致。
@@ -124,11 +124,11 @@ const data = [
`opacity: number` 透明度
`color: string` 颜色
`size: number` 线宽
-`style: object | function` 线图形样式，另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+`style: object | function` 线图形样式，另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象
-### point: object
+### point
-**optional**
+**optional**, object 类型
配置面积图上的数据点，起到辅助阅读的作用。分组及颜色映射方式与面积图形保持一致。
diff --git a/docs/manual/plots/bar.en.md b/docs/manual/plots/bar.en.md
new file mode 100644
index 0000000000..bf65b7fe4b
--- /dev/null
+++ b/docs/manual/plots/bar.en.md
@@ -0,0 +1,147 @@
+---
+title: Bar - 基础条形图
+order: 6
+---
+
+
+
+## 图表故事
+
+条形图即是横向柱状图，相比基础柱状图，条形图的分类文本可以横向排布，因此适合用于分类较多的场景。
+
+## 数据类型
+
+条形图适合的数据类型为一个**分类字段**（类型）和一个**离散字段**（数值）。在下面这个例子中，`type`为分类数据字段，`value`为离散数据字段。
+
+```js
+const data = [
+ { type: 'a', value: 100 },
+ { type: 'b', value: 60 },
+ { type: 'c', value: 30 },
+];
+```
+
+图表绘制时，每一个分类对应一根柱子，映射到 y 轴，而分类数值对应柱子的长度，映射到 x 轴。
+
+## 图表用法
+
+- **Dont's**
+ - 尽量避免在基础条形图中使用颜色映射。
+ - x 轴不以 0 值为起点，将有可能导致条形图显示错误的比例关系。
+
+* **Do**
+ - 如果分类之间的序列关系 (ranking) 有意义且不是时间周期，可以考虑将数据进行排序。
+ - 如果需要关注具体数据，可以考虑移除坐标轴，显示图形标签，使用户的注意力更加聚焦。
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### data
+
+**required**
+
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
+
+### xField
+
+**required**, string 类型
+
+条形在 x 方向长度映射对应的数据字段名，一般对应一个离散字段。
+
+### yField
+
+**required**, string 类型
+
+条形在 y 方向位置映射所对应的数据字段名，一般对应一个分类字段。
+
+### colorField
+
+**optional**, string 类型
+
+条形颜色映射对应的数据字段名。
+
+### color
+
+**optional**, string | string[] | function 类型
+
+指定条形颜色。如不进行配置则采用 theme 中的配色。
+
+### barSize: number
+
+**optional**, number 类型
+
+设置条形的高度为一个固定值。
+
+### barStyle
+
+**optional**, object | function 类型
+
+配置条形样式。
+
+`fill: string` 填充颜色
+`stroke: string` 描边颜色
+`lineWidth: number` 描边宽度
+`lineDash: number[]` 描边虚线显示
+`opacity: number` 透明度
+
+另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+
+### tooltip
+
+**optional** 见[通用图表配置](../general-config#tooltip)。
+
+### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+### label
+
+**optional**
+
+`visible: boolean` 图形标签是否显示
+`position: 'top' | 'middle' | 'bottom'` 图形标签相对于柱形的位置
+`formatter: function` 对 label 的显示文本进行格式化。
+`offsetX: number` 在 label 位置的基础上再往 x 方向的偏移量。
+`offsetY: number` 在 label 位置的基础上再往 y 方向的偏移量。
+`style: object` 配置 label 文本
+
+### events
+
+**optional**
+
+- 图形事件
+ `onBarClick: function` 条形点击事件
+ `onBarDblClick: function` 条形双击事件
+ `onBarMousemove: function` 条形鼠标移动事件
+ `onBarContextmenu: function` 条形右键事件
+
+- 其他事件类型见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/bar.zh.md b/docs/manual/plots/bar.zh.md
index 1119e36ac6..68405975bb 100644
--- a/docs/manual/plots/bar.zh.md
+++ b/docs/manual/plots/bar.zh.md
@@ -13,7 +13,7 @@ order: 6
条形图适合的数据类型为一个**分类字段**（类型）和一个**离散字段**（数值）。在下面这个例子中，`type`为分类数据字段，`value`为离散数据字段。
-```
+```js
const data = [
{ type: 'a', value: 100 },
{ type: 'b', value: 60 },
@@ -65,45 +65,45 @@ const data = [
**optional** 见[通用图表配置](../general-config#theme)。
-### data: collection
+### data
**required**
-数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
-### xField: string
+### xField
-**required**
+**required**, string 类型
条形在 x 方向长度映射对应的数据字段名，一般对应一个离散字段。
-### yField: string
+### yField
-**required**
+**required**, string 类型
条形在 y 方向位置映射所对应的数据字段名，一般对应一个分类字段。
-### colorField: string
+### colorField
-**optional**
+**optional**, string 类型
条形颜色映射对应的数据字段名。
-### color: string | string[] | function
+### color
-**optional**
+**optional**, string | string[] | function 类型
指定条形颜色。如不进行配置则采用 theme 中的配色。
### barSize: number
-**optional**
+**optional**, number 类型
设置条形的高度为一个固定值。
-### barStyle: object | function
+### barStyle
-**optional**
+**optional**, object | function 类型
配置条形样式。
diff --git a/docs/manual/plots/column.en.md b/docs/manual/plots/column.en.md
new file mode 100644
index 0000000000..b06993e1f1
--- /dev/null
+++ b/docs/manual/plots/column.en.md
@@ -0,0 +1,147 @@
+---
+title: Column - 基础柱状图
+order: 3
+---
+
+
+
+## 图表故事
+
+柱状图用于描述分类数据之间的对比，如果我们把时间周期，如周、月、年，也理解为一种分类数据 (time category)，那么柱状图也可以用于描述时间周期之间的数值比较。
+
+## 数据类型
+
+基础柱状图适合的数据类型为一个**分类字段**（类型）和一个**离散字段**（数值）。在下面这个例子中，`type`为分类数据字段，`value`为离散数据字段。
+
+```js
+const data = [
+ { type: 'a', value: 100 },
+ { type: 'b', value: 60 },
+ { type: 'c', value: 30 },
+];
+```
+
+图表绘制时，每一个分类对应一根柱子，映射到 x 轴，而分类数值对应柱子的高度，映射到 y 轴。
+
+## 图表用法
+
+- **Dont's**
+ - 尽量避免在基础柱状图中使用颜色映射。
+ - y 轴不以 0 值为起点，将有可能导致柱状图显示错误的比例关系。
+
+* **Do**
+ - 如果分类之间的序列关系 (ranking) 有意义且不是时间周期，可以考虑将数据进行排序。
+ - 如果需要关注具体数据，可以考虑移除坐标轴，显示图形标签，使用户的注意力更加聚焦。
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### data
+
+**required**
+
+数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
+
+### xField
+
+**required**, string 类型
+
+柱形在 x 方向位置映射对应的数据字段名，一般对应一个分类字段。
+
+### yField
+
+**required**, string 类型
+
+柱形在 y 方向高度映射所对应的数据字段名，一般对应一个离散字段。
+
+### colorField
+
+**optional**, string 类型
+
+柱形颜色映射对应的数据字段名。
+
+### color
+
+**optional**, string | string[] | function 类型
+
+指定柱形颜色。如不进行配置则采用 theme 中的配色。
+
+### columnSize
+
+**optional**, number 类型
+
+设置柱形的宽度为一个固定值。
+
+### columnStyle
+
+**optional**, object | function 类型
+
+配置柱形样式。
+
+`fill: string` 填充颜色
+`stroke: string` 描边颜色
+`lineWidth: number` 描边宽度
+`lineDash: number[]` 描边虚线显示
+`opacity: number` 透明度
+
+另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+
+### tooltip
+
+**optional** 见[通用图表配置](../general-config#tooltip)。
+
+### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+### label
+
+**optional**
+
+`visible: boolean` 图形标签是否显示
+`position: 'top' | 'middle' | 'bottom'` 图形标签相对于柱形的位置
+`formatter: function` 对 label 的显示文本进行格式化。
+`offsetX: number` 在 label 位置的基础上再往 x 方向的偏移量。
+`offsetY: number` 在 label 位置的基础上再往 y 方向的偏移量。
+`style: object` 配置 label 文本
+
+### events
+
+**optional**
+
+- 图形事件
+ `onColumnClick: function` 柱形点击事件
+ `onColumnDblClick: function` 柱形双击事件
+ `onColumnMousemove: function` 柱形鼠标移动事件
+ `onColumnContextmenu: function` 柱形右键事件
+
+- 其他事件类型见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/column.zh.md b/docs/manual/plots/column.zh.md
index 3849c2eb41..b607180b64 100644
--- a/docs/manual/plots/column.zh.md
+++ b/docs/manual/plots/column.zh.md
@@ -13,7 +13,7 @@ order: 3
基础柱状图适合的数据类型为一个**分类字段**（类型）和一个**离散字段**（数值）。在下面这个例子中，`type`为分类数据字段，`value`为离散数据字段。
-```
+```js
const data = [
{ type: 'a', value: 100 },
{ type: 'b', value: 60 },
@@ -65,45 +65,45 @@ const data = [
**optional** 见[通用图表配置](../general-config#theme)。
-### data: collection
+### data
**required**
数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
-### xField: string
+### xField
-**required**
+**required**, string 类型
柱形在 x 方向位置映射对应的数据字段名，一般对应一个分类字段。
-### yField: string
+### yField
-**required**
+**required**, string 类型
柱形在 y 方向高度映射所对应的数据字段名，一般对应一个离散字段。
-### colorField: string
+### colorField
-**optional**
+**optional**, string 类型
柱形颜色映射对应的数据字段名。
-### color: string | string[] | function
+### color
-**optional**
+**optional**, string | string[] | function 类型
指定柱形颜色。如不进行配置则采用 theme 中的配色。
-### columnSize: number
+### columnSize
-**optional**
+**optional**, number 类型
设置柱形的宽度为一个固定值。
-### columnStyle: object | function
+### columnStyle
-**optional**
+**optional**, object | function 类型
配置柱形样式。
@@ -137,7 +137,7 @@ const data = [
`visible: boolean` 图形标签是否显示
`position: 'top' | 'middle' | 'bottom'` 图形标签相对于柱形的位置
-`formatter: function` 对 label 的显示文本进行格式化。/>
+`formatter: function` 对 label 的显示文本进行格式化。
`offsetX: number` 在 label 位置的基础上再往 x 方向的偏移量。
`offsetY: number` 在 label 位置的基础上再往 y 方向的偏移量。
`style: object` 配置 label 文本
diff --git a/docs/manual/plots/gauge.en.md b/docs/manual/plots/gauge.en.md
new file mode 100644
index 0000000000..439350a5e0
--- /dev/null
+++ b/docs/manual/plots/gauge.en.md
@@ -0,0 +1,100 @@
+---
+title: Gauge 仪表盘
+order: 12
+---
+
+
+
+## 图表故事
+
+仪表盘 (Gauge) 是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值。仪表盘图表就像汽车的速度表一样，有一个圆形的表盘及相应的刻度，有一个指针指向当前数值。目前很多的管理报表或报告上都是用这种图表，以直观的表现出某个指标的进度或实际情况。
+
+仪表盘的好处在于它能跟人们的常识结合，使大家马上能理解看什么、怎么看。拟物化的方式使图标变得更友好更`人性化`，正确使用可以提升用户体验。仪表盘的圆形结构，可以更有效的`利用空间`。
+
+为了视觉上的不拥挤且符合常识，我们建议指针的数量不超过 **3** 根。
+
+## 数据类型
+
+仪表盘适合的数据类型为一个 `numder` 类型
+
+## 图表用法
+
+- Dont's
+ - 如果有多个数据要展示，建议拆成多个仪表盘展示
+ - 数据之间差异极小或者非一个量级数据对比
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### data
+
+**required**, number 类型
+
+数据源为对象集合，数据类型为 number。
+
+### min
+
+**optional**, number 类型
+
+仪表盘刻度最小值。默认为 0。
+
+### max
+
+**optional**, number 类型
+
+仪表盘刻度最大值。默认为 1。
+
+### range
+
+**optional**, number[] 类型
+
+仪表的色条范围区间，数组的前后两项组成的元组将对应一个颜色区间，例如：[0, 40, 60, 100]。
+
+### label
+
+**optional**, number 类型
+
+当 label 为 boolean 值时，为指示文字标签是否显示；
+
+当 label 为一个 function 时，则该函数的两个入参分别是将要显示的数值 value，以及经过了格式化函数后的 formatted，该函数返回 html 字符串。
+
+### formatter
+
+**optional**, number 类型
+
+显示文字标签时对数值文本进行格式化的函数。该函数的入参为原本显示的数值。
+
+示例如下：
+
+```js
+format = (value) => `${value}%`;
+```
diff --git a/docs/manual/plots/gauge.zh.md b/docs/manual/plots/gauge.zh.md
index c2cbf5f8cd..96b112e62c 100644
--- a/docs/manual/plots/gauge.zh.md
+++ b/docs/manual/plots/gauge.zh.md
@@ -11,11 +11,11 @@ order: 12
仪表盘的好处在于它能跟人们的常识结合，使大家马上能理解看什么、怎么看。拟物化的方式使图标变得更友好更`人性化`，正确使用可以提升用户体验。仪表盘的圆形结构，可以更有效的`利用空间`。
-为了视觉上的不拥挤且符合常识，我们建议指针的数量不超过 **3** 根。
+为了视觉上的不拥挤且符合常识，我们建议指针的数量不超过 **3** 根。
## 数据类型
-仪表盘适合的数据类型为一个`numder`类型
+仪表盘适合的数据类型为一个 `numder` 类型
## 图表用法
@@ -55,44 +55,44 @@ order: 12
**optional** 见[通用图表配置](../general-config#theme)。
-### data:number
+### data
-**required**
+**required**, number 类型
数据源为对象集合，数据类型为 number。
-### min:number
+### min
-**optional**
+**optional**, number 类型
仪表盘刻度最小值。默认为 0。
-### max:number
+### max
-**optional**
+**optional**, number 类型
仪表盘刻度最大值。默认为 1。
-### range:number[]
+### range
-**optional**
+**optional**, number[] 类型
仪表的色条范围区间，数组的前后两项组成的元组将对应一个颜色区间，例如：[0, 40, 60, 100]。
### statistic:function
-**optional**
+**optional**, number 类型
配置指标卡。该函数的两个入参分别是将要显示的数值 value，以及经过了格式化函数后的 formatted，该函数返回 html 字符串。
-### formatter:number
+### formatter
-**optional**
+**optional**, number 类型
显示文字标签时对数值文本进行格式化的函数。该函数的入参为原本显示的数值。
示例如下：
-```
+```js
format = (value) => `${value}%`;
```
diff --git a/docs/manual/plots/group-bar.en.md b/docs/manual/plots/group-bar.en.md
new file mode 100644
index 0000000000..e0f45fb998
--- /dev/null
+++ b/docs/manual/plots/group-bar.en.md
@@ -0,0 +1,157 @@
+---
+title: Group-Bar 分组条形图
+order: 8
+---
+
+
+
+## 图表故事
+
+分组条形图是基础条形图的扩展形式，适合于在同一个轴上展示不同维度下相同分类的数据。相比于堆叠条形图，分组条形图更适合进行不同维度下同一分类的横向数值的比较，但缺点是无法直观的看到各维度总和的对比。
+
+分组条形图和堆叠条形图是一对“矛盾”，一方的缺点恰恰是另一方的优点，可以根据具体场景选择使用。
+
+## 数据类型
+
+分组柱状图适合的数据类型为两个**分类字段**（分类字段、分组字段）和一个**连续字段**（数值）。在下面这个例子中，`type` 为分类数据字段，`quarter` 为分组数据字段，`value` 为离散数据字段。
+
+```js
+const data = [
+ { type: 'a', quarter: 'Q1', value: 100 },
+ { type: 'a', quarter: 'Q2', value: 70 },
+ { type: 'a', quarter: 'Q3', value: 20 },
+ { type: 'b', quarter: 'Q1', value: 10 },
+ { type: 'b', quarter: 'Q2', value: 50 },
+ { type: 'b', quarter: 'Q3', value: 40 },
+ { type: 'c', quarter: 'Q1', value: 30 },
+ { type: 'c', quarter: 'Q2', value: 50 },
+ { type: 'c', quarter: 'Q3', value: 20 },
+];
+```
+
+图表绘制时，每一个分类对应一组条形，映射到 y 轴，而分组字段决定一组条形的分布情况，而连续字段决定条形的长度，映射到 x 轴。
+
+## 图表用法
+
+- **Dont's**
+
+ - 分类数目过多，这将使数据变得难以比较
+ - x 轴不以 0 值为起点，将有可能导致错误的比例关系
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### 特殊配置
+
+#### groupField
+
+**reqiured**, string 类型
+
+数据集中的分组字段名，通过该字段的值，条形将会被分为多个组，通过颜色进行区分。
+
+---
+
+### 通用图表配置
+
+#### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+#### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+#### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+#### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+#### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+#### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+#### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### tooltip
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+---
+
+### 与基础条形图相同的配置
+
+#### data
+
+**required**
+
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
+
+#### xField
+
+**required**, string 类型
+
+条形在 x 方向长度映射对应的数据字段名，一般对应一个离散字段。
+
+#### yField
+
+**required**, string 类型
+
+条形在 y 方向位置映射所对应的数据字段名，一般对应一个分类字段。
+
+#### colorField
+
+**optional**, string 类型
+
+条形颜色映射对应的数据字段名。
+
+#### color
+
+**optional**, string | string[] | function 类型
+
+指定条形颜色。如不进行配置则采用 theme 中的配色。
+
+#### barSize: number
+
+**optional**, number 类型
+
+设置条形的高度为一个固定值。
+
+#### barStyle
+
+**optional**, object | function 类型
+
+配置条形样式。
+
+`fill: string` 填充颜色
+`stroke: string` 描边颜色
+`lineWidth: number` 描边宽度
+`lineDash: number[]` 描边虚线显示
+`opacity: number` 透明度
+
+另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+
+#### events
+
+**optional**
+
+- 图形事件
+ `onBarClick: function` 条形点击事件
+ `onBarDblClick: function` 条形双击事件
+ `onBarMousemove: function` 条形鼠标移动事件
+ `onBarContextmenu: function` 条形右键事件
+
+- 其他事件类型见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/group-bar.zh.md b/docs/manual/plots/group-bar.zh.md
index e885b6392b..4ff093e297 100644
--- a/docs/manual/plots/group-bar.zh.md
+++ b/docs/manual/plots/group-bar.zh.md
@@ -13,9 +13,9 @@ order: 8
## 数据类型
-分组柱状图适合的数据类型为两个**分类字段**（分类字段、分组字段）和一个**连续字段**（数值）。在下面这个例子中，`type`为分类数据字段，`quarter`为分组数据字段，`value`为离散数据字段。
+分组柱状图适合的数据类型为两个**分类字段**（分类字段、分组字段）和一个**连续字段**（数值）。在下面这个例子中，`type` 为分类数据字段，`quarter` 为分组数据字段，`value` 为离散数据字段。
-```
+```js
const data = [
{ type: 'a', quarter: 'Q1', value: 100 },
{ type: 'a', quarter: 'Q2', value: 70 },
@@ -44,9 +44,9 @@ const data = [
### 特殊配置
-#### groupField: string
+#### groupField
-**reqiured**
+**reqiured**, string 类型
数据集中的分组字段名，通过该字段的值，条形将会被分为多个组，通过颜色进行区分。
@@ -102,45 +102,45 @@ const data = [
### 与基础条形图相同的配置
-#### data: collection
+#### data
**required**
-数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
-#### xField: string
+#### xField
-**required**
+**required**, string 类型
条形在 x 方向长度映射对应的数据字段名，一般对应一个离散字段。
-#### yField: string
+#### yField
-**required**
+**required**, string 类型
条形在 y 方向位置映射所对应的数据字段名，一般对应一个分类字段。
-#### colorField: string
+#### colorField
-**optional**
+**optional**, string 类型
条形颜色映射对应的数据字段名。
-#### color: string | string[] | function
+#### color
-**optional**
+**optional**, string | string[] | function 类型
指定条形颜色。如不进行配置则采用 theme 中的配色。
#### barSize: number
-**optional**
+**optional**, number 类型
设置条形的高度为一个固定值。
-#### barStyle: object | function
+#### barStyle
-**optional**
+**optional**, object | function 类型
配置条形样式。
diff --git a/docs/manual/plots/group-column.en.md b/docs/manual/plots/group-column.en.md
new file mode 100644
index 0000000000..befc8a296c
--- /dev/null
+++ b/docs/manual/plots/group-column.en.md
@@ -0,0 +1,131 @@
+---
+title: Grouped-Column 分组柱状图
+order: 5
+---
+
+
+
+## 图表故事
+
+分组柱状图是柱状图的扩展形式，适合于在同一个轴上展示不同维度下相同分类的数据。相比于堆叠柱状图，分组柱状图更适合进行不同维度下同一分类的横向数值的比较，但缺点是无法直观的看到各维度总和的对比。
+
+分组柱状图和堆叠柱状图是一对“矛盾”，一方的缺点恰恰是另一方的优点，可以根据具体场景选择使用。
+
+## 数据类型
+
+分组柱状图适合的数据类型为两个**分类字段**（分类字段、分组字段）和一个**连续字段**（数值）。在下面这个例子中，`type`为分类数据字段，`quarter`为分组数据字段，`value`为离散数据字段。
+
+```js
+const data = [
+ { type: 'a', quarter: 'Q1', value: 100 },
+ { type: 'a', quarter: 'Q2', value: 70 },
+ { type: 'a', quarter: 'Q3', value: 20 },
+ { type: 'b', quarter: 'Q1', value: 10 },
+ { type: 'b', quarter: 'Q2', value: 50 },
+ { type: 'b', quarter: 'Q3', value: 40 },
+ { type: 'c', quarter: 'Q1', value: 30 },
+ { type: 'c', quarter: 'Q2', value: 50 },
+ { type: 'c', quarter: 'Q3', value: 20 },
+];
+```
+
+图表绘制时，每一个分类对应一组柱子，映射到 x 轴，而分组字段决定一组柱子的分布情况，而连续字段决定柱子的高度，映射到 y 轴。
+
+## 图表用法
+
+- **Dont's**
+
+ - 分类数目过多，这将使数据变得难以比较
+ - y 轴不以 0 值为起点，将有可能导致柱状图显示错误的比例关系
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### 特殊配置
+
+### groupField
+
+**reqiured**, string 类型
+
+数据集中的分组字段名，通过该字段的值，柱子将会被分为多个组，通过颜色进行区分。
+
+---
+
+### 通用图表配置
+
+#### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+#### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+#### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+#### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+#### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+#### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+#### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### tooltip
+
+**optional** 见[通用图表配置](../general-config#tooltip)。
+
+### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+---
+
+### 与基础柱状图相同的配置
+
+#### data
+
+**required** 见[基础柱状图配置](./column#data-collection)
+
+#### xField
+
+**reqiured** 见[基础柱状图配置](./column#xfield-string)
+
+#### yField
+
+**reqiured** 见[基础柱状图配置](./column#yField-string)
+
+#### color
+
+**optional** 见[基础柱状图配置](./column#color-string--string--function)
+
+#### columnSize
+
+**optional** 见[基础柱状图配置](./column#columnsize-number)
+
+#### columnStyle
+
+**optional** 见[基础柱状图配置](./column.zh#columnstyle-object--function)
+
+#### label
+
+**optional** 见[基础柱状图配置](./column#label)
+
+#### events
+
+**optional**
+
+- 图形事件 见[基础柱状图配置](./column#events)
+
+- 其他事件类型见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/group-column.zh.md b/docs/manual/plots/group-column.zh.md
index 2e60cee5e4..5baa68387f 100644
--- a/docs/manual/plots/group-column.zh.md
+++ b/docs/manual/plots/group-column.zh.md
@@ -15,7 +15,7 @@ order: 5
分组柱状图适合的数据类型为两个**分类字段**（分类字段、分组字段）和一个**连续字段**（数值）。在下面这个例子中，`type`为分类数据字段，`quarter`为分组数据字段，`value`为离散数据字段。
-```
+```js
const data = [
{ type: 'a', quarter: 'Q1', value: 100 },
{ type: 'a', quarter: 'Q2', value: 70 },
@@ -44,9 +44,9 @@ const data = [
### 特殊配置
-### groupField: string
+### groupField
-**reqiured**
+**reqiured**, string 类型
数据集中的分组字段名，通过该字段的值，柱子将会被分为多个组，通过颜色进行区分。
@@ -102,27 +102,27 @@ const data = [
### 与基础柱状图相同的配置
-#### data: collection
+#### data
**required** 见[基础柱状图配置](./column#data-collection)
-#### xField: string
+#### xField
**reqiured** 见[基础柱状图配置](./column#xfield-string)
-#### yField: string
+#### yField
**reqiured** 见[基础柱状图配置](./column#yField-string)
-#### color: string | string[] | function
+#### color
**optional** 见[基础柱状图配置](./column#color-string--string--function)
-#### columnSize: number
+#### columnSize
**optional** 见[基础柱状图配置](./column#columnsize-number)
-#### columnStyle: object | function
+#### columnStyle
**optional** 见[基础柱状图配置](./column.zh#columnstyle-object--function)
diff --git a/docs/manual/plots/line.en.md b/docs/manual/plots/line.en.md
new file mode 100644
index 0000000000..9456c6ca8d
--- /dev/null
+++ b/docs/manual/plots/line.en.md
@@ -0,0 +1,194 @@
+---
+title: Line - 折线图
+order: 0
+---
+
+
+
+## 图表故事
+
+折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式：是上升还是下降，是否存在周期性的循环？因此，相对于独立的数据点，折线图关注的是全局趋势。
+
+在折线图中，一般水平轴（X 轴）用来表示时间的推移，并且间隔相同；而垂直轴（Y 轴）代表不同时刻的数据的大小。
+
+## 数据类型
+
+折线图适合的数据类型为一个**连续字段**（时间）和一个**离散字段**（数值）。在下面这个例子中，`time`为连续数据字段，`value`为离散数据字段。
+
+```js
+const data = [
+ { time: '2000', value: 100 },
+ { time: '2001', value: 60 },
+ { time: '2002', value: 30 },
+];
+```
+
+在进行图表绘制的时候，连续字段将映射到折线形状在 x 方向上的信息，而离散字段将映射到折线形状在 y 方向上的信息。
+
+在上面的示例数据中再加入一个**分类字段** `type`，折线将根据该分类字段分为两根，两根折线在 x 方向（时间）的信息是完全一致的，通常用作同一时间区间内两个变量发展趋势的对比。
+
+```js
+const data = [
+ { time: '2000', value: 100, type: 'a' },
+ { time: '2001', value: 60, type: 'a' },
+ { time: '2002', value: 30, type: 'a' },
+ { time: '2000', value: 70, type: 'b' },
+ { time: '2001', value: 120, type: 'b' },
+ { time: '2002', value: 40, type: 'b' },
+];
+```
+
+## 图表用法
+
+- **Dont's**
+ - 避免折线数量过多，且在视觉样式上无法区分主次
+ - 谨慎使用曲线
+- **Do**
+ - 多折线时，善用视觉样式（线宽、颜色、透明度）突出重点。对于辅助数据可以采用灰色或降低透明度的方法与主要数据进行区分。
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### data
+
+**required**
+
+数据源为对象集合，例如：`[{ segment: '分类一'，value: 20 }, { segment: '分类二'，value: 20 }]`。
+
+### xField
+
+**required**, string 类型
+
+折线形状在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。
+
+### yField
+
+**required**, string 类型
+
+折线形状在 y 方向对应的数据字段名，一般对应一个离散字段。
+
+### seriesField
+
+**required**, string 类型
+
+多折线必选。
+
+数据集中的分组字段名，一般对应一个分类字段。
+
+通过该字段的值，折线图将会被分为多个组，通过颜色进行区分，视觉上呈现为多条折线。
+
+### lineSize
+
+**optional**, number 类型
+
+设置折线宽度，默认为 2。
+
+### smooth
+
+**optional**, boolean 类型
+
+是否将折线绘制为曲线 (spline)。
+
+### color
+
+**optional**, string[] | function 类型
+
+指定折线颜色。如不进行配置则采用 theme 中的配色。
+
+### lineStyle
+
+**optional**, object | function 类型
+
+配置折线样式。
+
+`stroke: string` 折线颜色
+`lineWidth: number` 折线宽度
+`lineDash: number[]` 虚线显示
+`opacity: number` 透明度
+
+另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+
+### point
+
+**optional**
+
+配置折线上的数据点，起到辅助阅读的作用。分组及颜色映射方式与折线图形保持一致。
+
+`visible: boolean` 是否显示数据点
+`shape: string` 数据点形状
+`size: number` 数据点大小
+`style: object | function` 数据点样式
+
+### tooltip
+
+**optional** 见[通用图表配置](../general-config#tooltip)。
+
+### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+### label
+
+**optional**
+
+`visible: boolean` 图形标签是否显示
+`type: 'point' | 'line'` 图形标签类型
+
+| `type` 类型 | 表现 |
+| ------------- | ------------- |
+| `type: 'point'` | 
|
+| `type: 'line'` | 
|
+
+`formatter: function` 对 label 的显示文本进行格式化
+`offsetX: number` 在 label 位置的基础上再往 x 方向的偏移量
+`offsetY: number` 在 label 位置的基础上再往 y 方向的偏移量
+`style: object` 配置 label 文本
+
+### events
+
+**optional**
+
+- 图形事件：
+
+`onLineClick: function` 折线点击事件
+`onLineDblClick: function` 折线双击事件
+`onLineMousemove: function` 折线鼠标移动事件
+`onLineContextmenu: function` 折线右键事件
+
+如配置了折线上的数据点：
+
+`onPointClick: function` 数据点点击事件
+`onPointDblClick: function` 数据点双击事件
+`onPointMousemove: function` 数据点鼠标移动事件
+`onPointContextmenu: function` 数据点右键事件
+
+- 其他事件类型见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/line.zh.md b/docs/manual/plots/line.zh.md
index caab55db6b..6344a5b9cc 100644
--- a/docs/manual/plots/line.zh.md
+++ b/docs/manual/plots/line.zh.md
@@ -15,7 +15,7 @@ order: 0
折线图适合的数据类型为一个**连续字段**（时间）和一个**离散字段**（数值）。在下面这个例子中，`time`为连续数据字段，`value`为离散数据字段。
-```
+```js
const data = [
{ time: '2000', value: 100 },
{ time: '2001', value: 60 },
@@ -25,9 +25,9 @@ const data = [
在进行图表绘制的时候，连续字段将映射到折线形状在 x 方向上的信息，而离散字段将映射到折线形状在 y 方向上的信息。
-在上面的示例数据中再加入一个**分类字段**`type`，折线将根据该分类字段分为两根，两根折线在 x 方向（时间）的信息是完全一致的，通常用作同一时间区间内两个变量发展趋势的对比。
+在上面的示例数据中再加入一个**分类字段** `type`，折线将根据该分类字段分为两根，两根折线在 x 方向（时间）的信息是完全一致的，通常用作同一时间区间内两个变量发展趋势的对比。
-```
+```js
const data = [
{ time: '2000', value: 100, type: 'a' },
{ time: '2001', value: 60, type: 'a' },
@@ -41,12 +41,9 @@ const data = [
## 图表用法
- **Dont's**
-
- 避免折线数量过多，且在视觉样式上无法区分主次
- 谨慎使用曲线
-
- **Do**
-
- 多折线时，善用视觉样式（线宽、颜色、透明度）突出重点。对于辅助数据可以采用灰色或降低透明度的方法与主要数据进行区分。
## API
@@ -81,27 +78,27 @@ const data = [
**optional** 见[通用图表配置](../general-config#theme)。
-### data: collection
+### data
**required**
数据源为对象集合，例如：`[{ segment: '分类一'，value: 20 }, { segment: '分类二'，value: 20 }]`。
-### xField: string
+### xField
-**required**
+**required**, string 类型
折线形状在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。
-### yField: string
+### yField
-**required**
+**required**, string 类型
折线形状在 y 方向对应的数据字段名，一般对应一个离散字段。
-### seriesField: string
+### seriesField
-**required**
+**required**, string 类型
多折线必选。
@@ -109,27 +106,27 @@ const data = [
通过该字段的值，折线图将会被分为多个组，通过颜色进行区分，视觉上呈现为多条折线。
-### lineSize: number
+### lineSize
-**optional**
+**optional**, number 类型
设置折线宽度，默认为 2。
-### smooth: boolean
+### smooth
-**optional**
+**optional**, boolean 类型
是否将折线绘制为曲线 (spline)。
-### color: string[] | function
+### color
-**optional**
+**optional**, string[] | function 类型
指定折线颜色。如不进行配置则采用 theme 中的配色。
-### lineStyle: object | function
+### lineStyle
-**optional**
+**optional**, object | function 类型
配置折线样式。
@@ -174,7 +171,10 @@ const data = [
`visible: boolean` 图形标签是否显示
`type: 'point' | 'line'` 图形标签类型
-
+| `type` 类型 | 表现 |
+| ------------- | ------------- |
+| `type: 'point'` | |
+| `type: 'line'` | |
`formatter: function` 对 label 的显示文本进行格式化
`offsetX: number` 在 label 位置的基础上再往 x 方向的偏移量
diff --git a/docs/manual/plots/pie.en.md b/docs/manual/plots/pie.en.md
new file mode 100644
index 0000000000..a7e2f17eb7
--- /dev/null
+++ b/docs/manual/plots/pie.en.md
@@ -0,0 +1,142 @@
+---
+title: Pie - 饼图
+order: 9
+---
+
+
+
+## 图表故事
+
+饼图主要用于表示不同分类的占比情况。饼图中的每个扇形切片表现一个分类，扇形切片的弧度表示该分类在整体中的占比，所有切片构成一个整体，即 100%。
+
+饼图是一个饱受争议的图表类型，有人认为饼图看起来难以阅读，我们的视觉系统只能判断出一个切片比一个切片要大，但很难确定大多少。在一些极端的情况下，饼图各切片大小相近，饼图将变得失去其功能性。如果你也有这种担心的话，可以使用条形图代替。
+
+## 数据类型
+
+饼图适合的数据类型为一个分类数据字段和一个连续数据字段。在下面这个例子中，`type` 为分类字段，`value` 为联系字段。
+
+```js
+const data = [
+ { type: 'a', value: 100 },
+ { type: 'b', value: 60 },
+ { type: 'c', value: 30 },
+];
+```
+
+在进行图表绘制的时候，分类字段将映射到扇形切片的颜色，而连续字段将映射到扇形的面积（占比）。
+
+## 图表用法
+
+- **Dont's**
+ - 数据条数超过 9 条
+ - 数据之间的差异极小
+
+* **Do**
+ - 将多个极小值合并为一个（注：这里可以链一个 demo)
+ - 将数据按占比从高到低排列
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### data
+
+**required**
+
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
+
+### radius
+
+**optional**, number 类型
+
+饼图的半径，原点为画布中心。配置值域为 [0,1]，0 代表饼图大小为 0，即不显示，1 代表饼图撑满绘图区域。
+默认值为 0.8, 即 width / 2 * 0.8。
+
+### angleField
+
+**required**, string 类型
+
+扇形切片大小（弧度）所对应的数据字段名。
+
+### colorField
+
+**optional**, string 类型
+
+扇形切片颜色所对应的数据字段名。
+
+#### color
+
+**optional**, string | string[] | function 类型
+
+指定切片颜色。如不进行配置则采用 theme 中的配色。
+
+### tooltip
+
+**optional** 见[通用图表配置](../general-config#tooltip)。
+
+### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+### label
+
+**optional**
+
+`visible: boolean` 图形标签是否显示
+`type: 'inner' | 'outer' | 'spider'` 图形标签的类型
+
+
+
+`formatter: function` 对 label 的显示文本进行格式化
+
+> 注意：当配置了 colorField，即扇形切片接受分类类型的颜色映射，此时 spider label 的文本为上下显示，此时 formatter 方法入参为 angleField 及 colorField 两个字段对应的值，返回值应为数组。
+
+```js
+label: {
+ type: 'spider',
+ formatter: (angleField, colorField) => {
+ return [ 'value1','value2' ];
+ },
+}
+```
+
+### events
+
+**optional**
+
+- 图形事件
+
+`onPieClick: function` 图形点击事件
+`onPieDoubleClick: function` 图形双击事件
+`onPieMousemove: function` 图形鼠标移动事件
+`onPieContextmenu: function` 图形右键事件
+
+- 其他事件类型见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/pie.zh.md b/docs/manual/plots/pie.zh.md
index 52839bd054..a7e2f17eb7 100644
--- a/docs/manual/plots/pie.zh.md
+++ b/docs/manual/plots/pie.zh.md
@@ -15,7 +15,7 @@ order: 9
饼图适合的数据类型为一个分类数据字段和一个连续数据字段。在下面这个例子中，`type` 为分类字段，`value` 为联系字段。
-```
+```js
const data = [
{ type: 'a', value: 100 },
{ type: 'b', value: 60 },
@@ -67,34 +67,34 @@ const data = [
**optional** 见[通用图表配置](../general-config#theme)。
-### data: collection
+### data
**required**
-数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
-### radius: number
+### radius
-**optional**
+**optional**, number 类型
饼图的半径，原点为画布中心。配置值域为 [0,1]，0 代表饼图大小为 0，即不显示，1 代表饼图撑满绘图区域。
默认值为 0.8, 即 width / 2 * 0.8。
-### angleField: string
+### angleField
-**required**
+**required**, string 类型
扇形切片大小（弧度）所对应的数据字段名。
-### colorField: string
+### colorField
-**optional**
+**optional**, string 类型
扇形切片颜色所对应的数据字段名。
-#### color: string | string[] | function
+#### color
-**optional**
+**optional**, string | string[] | function 类型
指定切片颜色。如不进行配置则采用 theme 中的配色。
@@ -108,24 +108,23 @@ const data = [
### label
-optional
-
-`visible: boolean` 图形标签是否显示
+**optional**
-`type: 'inner' | 'outer' | 'spider'` 图形标签的类型
+`visible: boolean` 图形标签是否显示
+`type: 'inner' | 'outer' | 'spider'` 图形标签的类型
-
+
`formatter: function` 对 label 的显示文本进行格式化
> 注意：当配置了 colorField，即扇形切片接受分类类型的颜色映射，此时 spider label 的文本为上下显示，此时 formatter 方法入参为 angleField 及 colorField 两个字段对应的值，返回值应为数组。
-```
+```js
label: {
type: 'spider',
formatter: (angleField, colorField) => {
return [ 'value1','value2' ];
- }
+ },
}
```
diff --git a/docs/manual/plots/radar.en.md b/docs/manual/plots/radar.en.md
new file mode 100644
index 0000000000..1078097a0d
--- /dev/null
+++ b/docs/manual/plots/radar.en.md
@@ -0,0 +1,169 @@
+---
+title: Radar - 雷达图
+order: 11
+---
+
+
+
+## 图表故事
+
+雷达图又叫蜘蛛网图。传统的雷达图被认为是一种表现多维（4 维以上）数据的图表。它将多个维度的数据量映射到坐标轴上，这些坐标轴起始于同一个圆心点，通常结束于圆周边缘，将同一组的点使用线连接起来就称为了雷达图。
+
+雷达图在图形表现上通常以线、面或线面叠加的方式呈现，也可以配置数据点。
+
+## 数据类型
+
+单组雷达图适合的数据类型为一个分类字段和一个连续字段。在下面这个例子中，`type`为分类字段，`value`为联系字段。
+
+```js
+const data = [
+ { type: 'a', value: 100 },
+ { type: 'b', value: 60 },
+ { type: 'c', value: 30 },
+];
+```
+
+多组雷达图需要在此基础上再加入一个分类字段作为分组字段。雷达图将根据此字段分为 N 组。在下面的例子中，`mark` 为分组字段，将雷达图分为上下叠加的两组。
+
+```js
+const data = [
+ { type: 'a', mark: 'top', value: 100 },
+ { type: 'b', mark: 'top', value: 60 },
+ { type: 'c', mark: 'top', value: 30 },
+ { type: 'a', mark: 'bottom', value: 100 },
+ { type: 'b', mark: 'bottom', value: 60 },
+ { type: 'c', mark: 'bottom', value: 30 },
+];
+```
+
+在进行图表绘制的时候，分类字段将映射到圆周上的角度，连续字段映射到半径长度。
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### data
+
+**required**
+
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
+
+### angleField
+
+**required**, string 类型
+
+雷达图映射到圆周角度所对应的字段，一般为一个分类字段。
+
+### radiusField
+
+**required**, string 类型
+
+雷达图映射到半径所对应的字段，一般为一个连续字段。
+
+### seriesField
+
+**required**, string 类型
+
+多组雷达图必选。对雷达图进行分组的字段，一般对应一个分类字段。
+
+通过该字段的值，雷达图将会被分为多个组，通过颜色进行区分，并上下重叠。
+
+### Line
+
+**optional**
+
+雷达图上的线
+
+`visible: boolean` 是否绘制线
+`style: object | function` 线的样式
+
+- `stroke: string` 线的颜色
+- `lineWidth: number` 线的宽度
+- `lineDash: number[]` 虚线
+- `opacity: number` 透明度
+
+另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+
+### Point
+
+**optional**
+
+雷达图上的数据点
+
+`visible: boolean` 是否显示数据点
+`shape: string` 数据点形状
+`size: number` 数据点大小
+`style: object | function` 数据点样式
+
+### tooltip
+
+**optional** 见[通用图表配置](../general-config#tooltip)。
+
+### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+### label
+
+**optional**
+
+`visible: boolean` 图形标签是否显示。
+`formatter: function` 对 label 的显示文本进行格式化。
+`offsetX: number` 在 label 位置的基础上再往 x 方向的偏移量。
+`offsetY: number` 在 label 位置的基础上再往 y 方向的偏移量。
+`style: object` 配置 label 文本
+
+### events
+
+**optional**
+
+- 图形事件
+
+ `onAreaClick: function` 区域点击事件
+ `onAreaDoubleClick: function` 区域双击事件
+ `onAreaMousemove: function` 区域鼠标移动事件
+ `onAreaContextmenu: function` 区域右键事件
+
+ 如配置了线：
+
+ `onLineClick: function` 线点击事件
+ `onLineDoubleClick: function` 线双击事件
+ `onLineMousemove: function` 线鼠标移动事件
+ `onLineContextmenu: function` 线右键事件
+
+ 如配置了点：
+
+ `onPointClick: function` 数据点的鼠标点击事件
+ `onPointDoubleClick: function` 数据点的鼠标双击事件
+ `onPointMousemove: function` 数据点鼠标移动事件
+ `onPointContextmenu: function` 数据点右键事件
+
+- 其他事件类型见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/radar.zh.md b/docs/manual/plots/radar.zh.md
index 75d98c4519..1078097a0d 100644
--- a/docs/manual/plots/radar.zh.md
+++ b/docs/manual/plots/radar.zh.md
@@ -15,7 +15,7 @@ order: 11
单组雷达图适合的数据类型为一个分类字段和一个连续字段。在下面这个例子中，`type`为分类字段，`value`为联系字段。
-```
+```js
const data = [
{ type: 'a', value: 100 },
{ type: 'b', value: 60 },
@@ -23,9 +23,9 @@ const data = [
];
```
-多组雷达图需要在此基础上再加入一个分类字段作为分组字段。雷达图将根据此字段分为 N 组。在下面的例子中，`mark`为分组字段，将雷达图分为上下叠加的两组。
+多组雷达图需要在此基础上再加入一个分类字段作为分组字段。雷达图将根据此字段分为 N 组。在下面的例子中，`mark` 为分组字段，将雷达图分为上下叠加的两组。
-```
+```js
const data = [
{ type: 'a', mark: 'top', value: 100 },
{ type: 'b', mark: 'top', value: 60 },
@@ -70,27 +70,27 @@ const data = [
**optional** 见[通用图表配置](../general-config#theme)。
-### data: collection
+### data
**required**
-数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
-### angleField: string
+### angleField
-**required**
+**required**, string 类型
雷达图映射到圆周角度所对应的字段，一般为一个分类字段。
-### radiusField: string
+### radiusField
-**required**
+**required**, string 类型
雷达图映射到半径所对应的字段，一般为一个连续字段。
-### seriesField: string
+### seriesField
-**required**
+**required**, string 类型
多组雷达图必选。对雷达图进行分组的字段，一般对应一个分类字段。
diff --git a/docs/manual/plots/ring.en.md b/docs/manual/plots/ring.en.md
new file mode 100644
index 0000000000..19a3a2cd6e
--- /dev/null
+++ b/docs/manual/plots/ring.en.md
@@ -0,0 +1,185 @@
+---
+title: Ring - 环图
+order: 10
+---
+
+
+
+## 图表故事
+
+环图与饼图基本功能类似，用于比较整体和部分的关系，每个弧形切片表示整体中的一个分类。由饼图挖空中心部分构成，通常在中心部分会放置解释性文本。
+
+## 数据类型
+
+环图适合的数据类型为一个分类数据字段和一个连续数据字段。在下面这个例子中，`type`为分类字段，`value`为联系字段。
+
+```js
+const data = [
+ { type: 'a', value: 100 },
+ { type: 'b', value: 60 },
+ { type: 'c', value: 30 },
+];
+```
+
+在进行图表绘制的时候，分类字段将映射到弧形切片的颜色，而连续字段将映射到弧形的面积（占比）。
+
+## 图表用法
+
+- **Dont's**
+ - 数据条数超过 9 条
+ - 数据之间的差异极小
+
+* **Do**
+ - 将多个极小值合并为一个（注：这里可以链一个 demo)
+ - 将数据按占比从高到低排列
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### 特殊配置
+
+#### innerRadius
+
+**optional**, number 类型
+
+环图的内环半径，原点为画布中心。半径和内环半径决定了环图的厚度 (thickness)。
+
+配置范围为 [0,1]，0 代表环图被完全填充，变为饼图，没有中心挖空部分，1 代表环图的厚度为 0。默认值为 0.8。
+
+#### annotation
+
+**optional**
+
+图表的辅助标注
+
+##### centralText
+
+中心文本
+
+`content: string|object` 中心文本内容
+
+用户可以指定一段文字(此时中心文本单行显示)或一组数据(此时中心文本分两行显示)，指定数据时需采用`{ name:xxx, value:xxx }`的格式。如不配置 content，则默认显示第一行数据。
+
+`htmlContent: string` 自定义中心文本
+
+用户可以根据 htmlContent 方法的 data 参数定义中心文本 dom 节点的构成和显示方式。
+
+`onActive: boolean` 是否自动响应鼠标交互
+
+当设置为 true 时，鼠标滑过弧形切片时中心文本显示当前弧形切片内容，此时 tooltip 默认不再显示。
+
+用法：
+
+```js
+annotation: [
+ {
+ type: 'centralText',
+ onActive: true,
+ },
+];
+```
+
+### 通用图表配置
+
+#### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+#### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+#### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+#### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+#### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+#### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+#### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### tooltip
+
+**optional** 见[通用图表配置](../general-config#tooltip)。
+
+### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+---
+
+## 与饼图相同的配置
+
+#### data
+
+**required**
+
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
+
+#### radius
+
+**optional**, number 类型
+
+饼图的半径，原点为画布中心。配置值域为[0,1]，0 代表饼图大小为 0，即不显示，1 代表饼图撑满绘图区域。默认值为 0.8, 即 `width / 2 * 0.8`。
+
+#### angleField
+
+**required**, string 类型
+
+扇形切片大小（弧度）所对应的数据字段名。
+
+#### colorField
+
+**optional**, string 类型
+
+扇形切片颜色所对应的数据字段名。
+
+#### color
+
+**optional**, string | string[] | function 类型
+
+指定切片颜色。如不进行配置则采用 theme 中的配色。
+
+#### label
+
+**optional**
+
+`visible: boolean` 图形标签是否显示
+`type: 'inner' | 'outer' | 'spider'` 图形标签的类型
+`formatter: function` 对 label 的显示文本进行格式化。
+
+> 注意：当配置了 colorField，即扇形切片接受分类类型的颜色映射，此时 spider label 的文本为上下显示，此时 formatter 方法入参为 angleField 及 colorField 两个字段对应的值，返回值应为数组。
+
+```js
+label: {
+ type: 'spider',
+ formatter: (angleField, colorField) => {
+ return ['value1','value2'];
+ },
+}
+```
+
+#### events
+
+**optional**
+
+- 图形事件
+
+ `onPieClick: function` 图形点击事件
+ `onPieDoubleClick: function` 图形双击事件
+ `onPieMousemove: function` 图形鼠标移动事件
+ `onPieContextmenu: function` 图形右键事件
+
+- 其他事件类型见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/ring.zh.md b/docs/manual/plots/ring.zh.md
index 2b31cc2573..e19aea1fd3 100644
--- a/docs/manual/plots/ring.zh.md
+++ b/docs/manual/plots/ring.zh.md
@@ -13,7 +13,7 @@ order: 10
环图适合的数据类型为一个分类数据字段和一个连续数据字段。在下面这个例子中，`type`为分类字段，`value`为联系字段。
-```
+```js
const data = [
{ type: 'a', value: 100 },
{ type: 'b', value: 60 },
@@ -39,9 +39,9 @@ const data = [
### 特殊配置
-#### innerRadius: number
+#### innerRadius
-**optional**
+**optional**, number 类型
环图的内环半径，原点为画布中心。半径和内环半径决定了环图的厚度 (thickness)。
@@ -121,33 +121,33 @@ statistic: [
## 与饼图相同的配置
-#### data: collection
+#### data
**required**
-数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
-#### radius: number
+#### radius
-**optional**
+**optional**, number 类型
饼图的半径，原点为画布中心。配置值域为[0,1]，0 代表饼图大小为 0，即不显示，1 代表饼图撑满绘图区域。默认值为 0.8, 即 `width / 2 * 0.8`。
-#### angleField: string
+#### angleField
-**required**
+**required**, string 类型
扇形切片大小（弧度）所对应的数据字段名。
-#### colorField: string
+#### colorField
-**optional**
+**optional**, string 类型
扇形切片颜色所对应的数据字段名。
-#### color: string | string[] | function
+#### color
-**optional**
+**optional**, string | string[] | function 类型
指定切片颜色。如不进行配置则采用 theme 中的配色。
@@ -161,12 +161,12 @@ statistic: [
> 注意：当配置了 colorField，即扇形切片接受分类类型的颜色映射，此时 spider label 的文本为上下显示，此时 formatter 方法入参为 angleField 及 colorField 两个字段对应的值，返回值应为数组。
-```
+```js
label: {
type: 'spider',
formatter: (angleField, colorField) => {
return ['value1','value2'];
- }
+ },
}
```
diff --git a/docs/manual/plots/stack-area.en.md b/docs/manual/plots/stack-area.en.md
new file mode 100644
index 0000000000..c338c6431b
--- /dev/null
+++ b/docs/manual/plots/stack-area.en.md
@@ -0,0 +1,180 @@
+---
+title: StackArea - 堆叠面积图
+order: 2
+---
+
+
+
+
+## 图表用法
+
+- **Dont's**
+ - 避免面积数量过多，且在视觉样式上无法区分主次。
+ - 谨慎使用曲线面积图。
+
+* **Do**
+ - 多面积时，考虑堆叠面积图而不是重叠面积图。
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### 特殊配置
+
+### label
+
+**optional**
+
+`visible: boolean` 图形标签是否显示
+`type: 'area' | 'point' | 'line'` 图形标签类型，默认为 area
+`formatter: function` 对 label 的显示文本进行格式化
+`offsetX: number` 在 label 位置的基础上再往 x 方向的偏移量
+`offsetY: number` 在 label 位置的基础上再往 y 方向的偏移量
+`style: object` 配置 label 文本
+
+#### stackField: string
+
+**required**
+
+面积堆叠的字段名，通过该字段的值，条形将会被分割为多个部分，通过颜色进行区分。
+
+---
+
+### 通用图表配置
+
+#### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+#### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+#### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+#### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+#### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+#### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+#### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### tooltip
+
+**optional** 见[通用图表配置](../general-config#tooltip)。
+
+### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+---
+
+## 与基础面积图相同的配置
+
+#### data
+
+**required**
+
+数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
+
+#### xField
+
+**required**, string 类型
+
+面积形状在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。
+
+#### yField
+
+**required**, string 类型
+
+面积形状在 y 方向对应的数据字段名，一般对应一个离散字段。
+
+#### color: string[] | function
+
+**optional**, string[] | function 类型
+
+指定折线颜色。如不进行配置则采用 theme 中的配色。
+
+#### areaStyle
+
+**optional**, object | function 类型
+
+配置面积样式。
+
+`strokeStyle: string` 面积的边框颜色
+`opacity: number` 透明度
+`lineWidth: number` 面积区域边框线的线宽
+`lineDash: number[]` 面积区域边框线的虚线配置
+
+另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+
+#### line
+
+**optional**, object 类型
+
+配置面积图上线，起到辅助阅读的作用。分组及颜色映射方式与面积图形保持一致。
+
+`visible: boolean` 是否显示数据线
+`opacity: number` 透明度
+`color: string` 颜色
+`size: number` 线宽
+`style: object | function` 线图形样式，另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+
+#### point
+
+**optional**, object 类型
+
+配置面积图上的数据点，起到辅助阅读的作用。分组及颜色映射方式与面积图形保持一致。
+
+`visible: boolean` 是否显示数据点
+`shape: string` 数据点形状
+`size: number` 数据点大小
+
+#### events
+
+**optional**
+
+- 图形事件
+ `onAreaClick: function` 区域点击事件
+ `onAreaDblclick: function` 区域双击事件
+ `onAreaMousemove: function` 区域鼠标移动事件
+ `onAreaMouseenter: function` 区域鼠标进入事件
+ `onAreaMouseleave: function` 区域鼠标移出事件
+ `onAreaMousedown: function` 区域鼠标点击事件
+ `onAreaMouseup: function` 区域鼠标抬起事件
+ `onAreaContextmenu: function` 右键事件
+
+ 如配置了区域图上的数据点：
+
+ `onPointClick: function` 数据点点击事件
+ `onPointDblClick: function` 数据点双击事件
+ `onPointMousemove: function` 数据点鼠标移动事件
+ `onPointMouseenter: function` 数据点鼠标进入事件
+ `onPointMouseleave: function` 数据点鼠标移出事件
+ `onPointMousedown: function` 数据点鼠标点击事件
+ `onPointMouseup: function` 数据点鼠标抬起事件
+ `onPointContextmenu: function` 数据点右键事件
+
+ 如配置了区域图上的折线：
+
+ `onLineClick: function` 折线点击事件
+ `onLineDblClick: function` 折线双击事件
+ `onLineMousemove: function` 折线鼠标移动事件
+ `onLineMouseenter: function` 折线鼠标进入事件
+ `onLineMouseleave: function` 折线鼠标移出事件
+ `onLineMousedown: function` 折线鼠标点击事件
+ `onLineMouseup: function` 折线鼠标抬起事件
+ `onLineContextmenu: function` 折线右键事件
+
+- 其他事件类型见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/stack-area.zh.md b/docs/manual/plots/stack-area.zh.md
index ba782d7b45..8729f53989 100644
--- a/docs/manual/plots/stack-area.zh.md
+++ b/docs/manual/plots/stack-area.zh.md
@@ -2,15 +2,9 @@
title: StackArea - 堆叠面积图
order: 2
---
-
-
-## 图表故事
-
-work in progress
-## 数据类型
+
-work in progress
## 图表用法
@@ -32,10 +26,10 @@ work in progress
**optional**
`visible: boolean` 图形标签是否显示
-`type: 'area' | 'point' | 'line'` 图形标签类型，默认为 area
-`formatter: function` 对 label 的显示文本进行格式化。
-`offsetX: number` 在 label 位置的基础上再往 x 方向的偏移量。
-`offsetY: number` 在 label 位置的基础上再往 y 方向的偏移量。
+`type: 'area' | 'point' | 'line'` 图形标签类型，默认为 area
+`formatter: function` 对 label 的显示文本进行格式化
+`offsetX: number` 在 label 位置的基础上再往 x 方向的偏移量
+`offsetY: number` 在 label 位置的基础上再往 y 方向的偏移量
`style: object` 配置 label 文本
#### stackField: string
@@ -96,33 +90,33 @@ work in progress
## 与基础面积图相同的配置
-#### data: collection
+#### data
**required**
数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
-#### xField: string
+#### xField
-**required**
+**required**, string 类型
面积形状在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。
-#### yField: string
+#### yField
-**required**
+**required**, string 类型
面积形状在 y 方向对应的数据字段名，一般对应一个离散字段。
#### color: string[] | function
-**optional**
+**optional**, string[] | function 类型
指定折线颜色。如不进行配置则采用 theme 中的配色。
-#### areaStyle: object | function
+#### areaStyle
-**optional**
+**optional**, object | function 类型
配置面积样式。
@@ -133,9 +127,9 @@ work in progress
另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
-#### line: object
+#### line
-**optional**
+**optional**, object 类型
配置面积图上线，起到辅助阅读的作用。分组及颜色映射方式与面积图形保持一致。
@@ -145,9 +139,9 @@ work in progress
`size: number` 线宽
`style: object | function` 线图形样式，另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
-#### point: object
+#### point
-**optional**
+**optional**, object 类型
配置面积图上的数据点，起到辅助阅读的作用。分组及颜色映射方式与面积图形保持一致。
diff --git a/docs/manual/plots/stack-bar.en.md b/docs/manual/plots/stack-bar.en.md
new file mode 100644
index 0000000000..7ef35168c8
--- /dev/null
+++ b/docs/manual/plots/stack-bar.en.md
@@ -0,0 +1,159 @@
+---
+title: Stacked-Bar 堆叠条形图
+order: 7
+---
+
+
+
+## 图表故事
+
+堆叠条形图是基础条形图的扩展形式，将每个条形进行分割，以显示大类目下的细分类目占比情况。堆叠条形图可以展示更多维度的数据：大类目之间的数值比较、大类目下各细分类目的占比情况、不同大类目下同一细分类目的横向数值比较。
+
+堆叠条形图的一个缺点是堆叠太多时会导致数据很难区分对比，同时很难对比不同分类下相同维度的数据，因为它们不是按照同一基准线对齐的。
+
+## 数据类型
+
+堆叠条形图适合的数据类型为两个**分类字段**（分类字段、堆叠字段）和一个**连续字段**（数值）。在下面这个例子中，`type`为分类数据字段，`quarter`为堆叠数据字段，`value`为离散数据字段。
+
+```js
+const data = [
+ { type: 'a', quarter: 'Q1', value: 100 },
+ { type: 'a', quarter: 'Q2', value: 70 },
+ { type: 'a', quarter: 'Q3', value: 20 },
+ { type: 'b', quarter: 'Q1', value: 10 },
+ { type: 'b', quarter: 'Q2', value: 50 },
+ { type: 'b', quarter: 'Q3', value: 40 },
+ { type: 'c', quarter: 'Q1', value: 30 },
+ { type: 'c', quarter: 'Q2', value: 50 },
+ { type: 'c', quarter: 'Q3', value: 20 },
+];
+```
+
+图表绘制时，每一个分类对应一个条形，映射到 y 轴，而堆叠字段决定条形被如何分割，连续字段决定每块细分的宽度，映射到 x 轴，细分宽度之和即是条形的总体长度。
+
+## 图表用法
+
+- **Dont's**
+ - 分类数目过多，这将使数据变得难以比较
+ - x 轴不以 0 值为起点，将有可能导致显示错误的比例关系
+
+* **Do**
+ - 极小值会让细分类目难以用视觉辨认，可以将极小值进行合并
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### 特殊配置
+
+#### stackField
+
+**required**, string 类型
+
+数据集中的分组字段名，通过该字段的值，条形将会被分割为多个部分，通过颜色进行区分。
+
+---
+
+### 通用图表配置
+
+#### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+#### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+#### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+#### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+#### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+#### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+#### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+### tooltip
+
+**optional** 见[通用图表配置](../general-config#tooltip)。
+
+### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+---
+
+### 与基础条形图相同的配置
+
+#### data
+
+**required**
+
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
+
+#### xField
+
+**required**, string 类型
+
+条形在 x 方向长度映射对应的数据字段名，一般对应一个离散字段。
+
+#### yField
+
+**required**, string 类型
+
+条形在 y 方向位置映射所对应的数据字段名，一般对应一个分类字段。
+
+#### colorField
+
+**optional**, string 类型
+
+条形颜色映射对应的数据字段名。
+
+#### color
+
+**optional**, string | string[] | function 类型
+
+指定条形颜色。如不进行配置则采用 theme 中的配色。
+
+#### barSize
+
+**optional**, number 类型
+
+设置条形的高度为一个固定值。
+
+#### barStyle
+
+**optional**, object | function 类型
+
+配置条形样式。
+
+`fill: string` 填充颜色
+`stroke: string` 描边颜色
+`lineWidth: number` 描边宽度
+`lineDash: number[]` 描边虚线显示
+`opacity: number` 透明度
+
+另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+
+#### events
+
+**optional**
+
+- 图形事件
+ `onBarClick: function` 条形点击事件
+ `onBarDblClick: function` 条形双击事件
+ `onBarMousemove: function` 条形鼠标移动事件
+ `onBarContextmenu: function` 条形右键事件
+
+- 其他事件类型见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/stack-bar.zh.md b/docs/manual/plots/stack-bar.zh.md
index 4b1de700b0..201ba86da4 100644
--- a/docs/manual/plots/stack-bar.zh.md
+++ b/docs/manual/plots/stack-bar.zh.md
@@ -15,7 +15,7 @@ order: 7
堆叠条形图适合的数据类型为两个**分类字段**（分类字段、堆叠字段）和一个**连续字段**（数值）。在下面这个例子中，`type`为分类数据字段，`quarter`为堆叠数据字段，`value`为离散数据字段。
-```
+```js
const data = [
{ type: 'a', quarter: 'Q1', value: 100 },
{ type: 'a', quarter: 'Q2', value: 70 },
@@ -46,9 +46,9 @@ const data = [
### 特殊配置
-#### stackField: string
+#### stackField
-**required**
+**required**, string 类型
数据集中的分组字段名，通过该字段的值，条形将会被分割为多个部分，通过颜色进行区分。
@@ -104,45 +104,45 @@ const data = [
### 与基础条形图相同的配置
-#### data: collection
+#### data
**required**
-数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
-#### xField: string
+#### xField
-**required**
+**required**, string 类型
条形在 x 方向长度映射对应的数据字段名，一般对应一个离散字段。
-#### yField: string
+#### yField
-**required**
+**required**, string 类型
条形在 y 方向位置映射所对应的数据字段名，一般对应一个分类字段。
-#### colorField: string
+#### colorField
-**optional**
+**optional**, string 类型
条形颜色映射对应的数据字段名。
-#### color: string | string[] | function
+#### color
-**optional**
+**optional**, string | string[] | function 类型
指定条形颜色。如不进行配置则采用 theme 中的配色。
-#### barSize: number
+#### barSize
-**optional**
+**optional**, number 类型
设置条形的高度为一个固定值。
-#### barStyle: object | function
+#### barStyle
-**optional**
+**optional**, object | function 类型
配置条形样式。
diff --git a/docs/manual/plots/stack-column.en.md b/docs/manual/plots/stack-column.en.md
new file mode 100644
index 0000000000..5e653684b1
--- /dev/null
+++ b/docs/manual/plots/stack-column.en.md
@@ -0,0 +1,135 @@
+---
+title: Stacked-Column 堆叠柱状图
+order: 4
+---
+
+
+
+## 图表故事
+
+堆叠柱状图是基础柱状图的扩展形式，将每根柱子进行分割，以显示大类目下的细分类目占比情况。堆叠柱状图可以展示更多维度的数据：大类目之间的数值比较、大类目下各细分类目的占比情况、不同大类目下同一细分类目的横向数值比较。
+
+堆叠柱状图的一个缺点是当柱子上的堆叠太多时会导致数据很难区分对比，同时很难对比不同分类下相同维度的数据，因为它们不是按照同一基准线对齐的。
+
+## 数据类型
+
+堆叠柱状图适合的数据类型为两个**分类字段**（分类字段、堆叠字段）和一个**连续字段**（数值）。在下面这个例子中，`type`为分类数据字段，`quarter`为堆叠数据字段，`value`为离散数据字段。
+
+```js
+const data = [
+ { type: 'a', quarter: 'Q1', value: 100 },
+ { type: 'a', quarter: 'Q2', value: 70 },
+ { type: 'a', quarter: 'Q3', value: 20 },
+ { type: 'b', quarter: 'Q1', value: 10 },
+ { type: 'b', quarter: 'Q2', value: 50 },
+ { type: 'b', quarter: 'Q3', value: 40 },
+ { type: 'c', quarter: 'Q1', value: 30 },
+ { type: 'c', quarter: 'Q2', value: 50 },
+ { type: 'c', quarter: 'Q3', value: 20 },
+];
+```
+
+图表绘制时，每一个分类对应一根柱子，映射到 x 轴，而堆叠字段决定柱子被如何分割，连续字段决定每块细分的高度，映射到 y 轴，细分高度之和即是柱子的总体高度。
+
+## 图表用法
+
+- **Dont's**
+ - 分类数目过多，这将使数据变得难以比较
+ - y 轴不以 0 值为起点，将有可能导致柱状图显示错误的比例关系
+
+* **Do**
+ - 极小值会让柱形的分割难以用视觉辨认，可以将极小值进行合并
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### 特殊配置
+
+#### stackField
+
+**required**, string 类型
+
+数据集中的分组字段名，通过该字段的值，柱子将会被分割为多个部分，通过颜色进行区分。
+
+---
+
+### 通用图表配置
+
+#### title
+
+**optional** 见[通用图表配置](../general-config#title)。
+
+#### description
+
+**optional** 见[通用图表配置](../general-config#description)。
+
+#### width
+
+**optional** 见[通用图表配置](../general-config#width)。
+
+#### height
+
+**optional** 见[通用图表配置](../general-config#height)。
+
+#### forceFit
+
+**optional** 见[通用图表配置](../general-config#forceFit)。
+
+#### padding
+
+**optional** 见[通用图表配置](../general-config#padding)。
+
+#### theme
+
+**optional** 见[通用图表配置](../general-config#theme)。
+
+#### tooltip
+
+**optional** 见[通用图表配置](../general-config#tooltip)。
+
+#### legend
+
+**optional** 见[通用图表配置](../general-config#legend)。
+
+---
+
+### 与基础柱状图相同的配置
+
+#### data
+
+**required** 见[基础柱状图配置](./column#data-collection)
+
+#### xField
+
+**required** 见[基础柱状图配置](./column#xfield-string)
+
+#### yField
+
+**required** 见[基础柱状图配置](./column#yfield-string)
+
+#### color
+
+**optional** 见[基础柱状图配置](./column#color-string--string--function)
+
+#### columnSize
+
+**optional** 见[基础柱状图配置](./column#columnsize-number)
+
+#### columnStyle
+
+**optional**
+
+配置柱形样式。 见[基础柱状图配置](./column#columnstyle-object--function)
+
+#### label
+
+**optional** 见[基础柱状图配置](./column#label)
+
+#### events
+
+**optional**
+
+- 图形事件 见[基础柱状图配置](./column#events)
+
+- 其他事件类型 见[通用图表配置](../general-config#events)。
diff --git a/docs/manual/plots/stack-column.zh.md b/docs/manual/plots/stack-column.zh.md
index b780975439..f72e91450f 100644
--- a/docs/manual/plots/stack-column.zh.md
+++ b/docs/manual/plots/stack-column.zh.md
@@ -15,7 +15,7 @@ order: 4
堆叠柱状图适合的数据类型为两个**分类字段**（分类字段、堆叠字段）和一个**连续字段**（数值）。在下面这个例子中，`type`为分类数据字段，`quarter`为堆叠数据字段，`value`为离散数据字段。
-```
+```js
const data = [
{ type: 'a', quarter: 'Q1', value: 100 },
{ type: 'a', quarter: 'Q2', value: 70 },
@@ -46,9 +46,9 @@ const data = [
### 特殊配置
-#### stackField: string
+#### stackField
-**required**
+**required**, string 类型
数据集中的分组字段名，通过该字段的值，柱子将会被分割为多个部分，通过颜色进行区分。
@@ -104,27 +104,27 @@ const data = [
### 与基础柱状图相同的配置
-#### data: collection
+#### data
**required** 见[基础柱状图配置](./column#data-collection)
-#### xField: string
+#### xField
**required** 见[基础柱状图配置](./column#xfield-string)
-#### yField: string
+#### yField
**required** 见[基础柱状图配置](./column#yfield-string)
-#### color: string | string[] | function
+#### color
**optional** 见[基础柱状图配置](./column#color-string--string--function)
-#### columnSize: number
+#### columnSize
**optional** 见[基础柱状图配置](./column#columnsize-number)
-#### columnStyle: object | function
+#### columnStyle
**optional**
diff --git a/docs/manual/plots/tinyPlot-area.en.md b/docs/manual/plots/tinyPlot-area.en.md
new file mode 100644
index 0000000000..d810704c16
--- /dev/null
+++ b/docs/manual/plots/tinyPlot-area.en.md
@@ -0,0 +1,159 @@
+---
+title: TinyArea - 迷你面积图
+order: 15
+---
+
+
+
+迷你面积图是 g2plot 图表体系中，迷你图表的一种。
+
+> 迷你图表通常在空间有限的情况下作为 fullsize chart 的降级显示形式，相比于 fullsize chart，迷你图表省略了轴和图例，标题，标签等组件，而只保留了图表图形的基本态势。因此展现的信息量是有限的。通常，迷你图表会搭配表格进行使用。
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### width
+
+**reuired**, number 类型
+
+图表宽度
+
+### height
+
+**reuired**, number 类型
+
+图表高度
+
+### data
+
+**required**
+
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
+
+### xField
+
+**required**, string 类型
+
+面积图在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。
+
+### yField
+
+**required**, string 类型
+
+面积图在 y 方向对应的数据字段名，一般对应一个离散字段。
+
+### smooth
+
+**optional**, boolean 类型
+
+面积图是否曲线展示。
+
+### color
+
+**optional**, string | function 类型
+
+指定面积图颜色。如不进行配置则采用 theme 中的配色。
+
+### lineStyle
+
+**optional**, object | function 类型
+
+指定面积图上部折线的样式。
+
+`lineWidth: number` 折线宽度
+`lineDash: number[]` 虚线样式
+
+### guideLine
+
+**optional**, object[] 类型
+
+为图表添加辅助线，可以同时添加多条辅助线。
+
+`type: string` 含有统计意义的辅助线类型，可选类型为 `'max'` | `'min'` | `'median'` | `'mean'`。如指定了辅助线类型，则不需要配置辅助线的 `start` 和 `end`。
+
+`start: array | function | object` 指定辅助线起始位置，如不配置`type`，则该辅助线为自定义辅助线，`start`是必选项。
+
+支持两种数据形式，两者不能混用：
+
+- 原始数据值，如 ['2010-01-01', 100]
+- 绘图区域百分比位置，如 ['50%', '50%']
+
+`end: array | function | object` 指定辅助线终点位置，如不配置`type`，则该辅助线为自定义辅助线，`end`是必选项。
+
+支持两种数据形式，两者不能混用：
+
+- 原始数据值，如 ['2010-01-01', 100]
+- 绘图区域百分比位置，如 ['50%', '50%']
+
+`lineStyle: object` 设置辅助线样式。
+
+- `stroke: string` 辅助线颜色
+- `lineWidth: number` 辅助线宽度
+- `lineDash: number[]` 辅助线虚线显示
+- `opacity: number` 辅助线透明度
+
+`text: object` 设置辅助线文本。
+
+- `position: 'start' | 'center' | 'end' | '50%' | 0.5` 设置辅助线文本样式。
+- `content: string` 辅助线文本内容。
+- `offsetX: number` 辅助线文本位置在 x 方向上的偏移量。
+- `offsetY: number` 辅助线文本位置在 y 方向上的偏移量。
+- `style: object` 辅助线文本样式。
+
+ - `fontSize: number` 字号
+ - `fill: string` 文字颜色
+ - `opacity: number` 文字透明度
+ - `textAlign: 'start' | 'end' | 'center'` 对齐方式
+ - `textBaselin: 'top' | 'bottom' | 'middle'` 文字基线
+
+配置统计辅助线示例代码：
+
+```js
+{
+ guideLine: [
+ {
+ type: 'mean',
+ lineStyle: {},
+ text: {},
+ },
+ ],
+}
+```
+
+配置自定义辅助线示例代码：
+
+```js
+{
+ guideLine: [
+ {
+ start: ['2010-01-01', 100] || ['0%', '50%'],
+ end: ['2010-01-10', 50] || ['100%', '80%'],
+ lineStyle: {},
+ text: {},
+ },
+ ],
+}
+```
+
+### events
+
+**optional**
+
+图形事件：
+
+`onAreaClick: function` 面积形状点击事件
+`onAreaDblClick: function` 面积形状双击事件
+`onAreaMousemove: function` 面积形状鼠标移动事件
+`onAreaContextmenu: function` 面积形状右键事件
+`onLineClick: function` 折线形状点击事件
+`onLineDblClick: function` 折线形状双击事件
+`onLineMousemove: function` 折线形状鼠标移动事件
+`onLineContextmenu: function` 折线形状右键事件
+
+图表区域事件：
+
+`onPlotClick: function` 图表区域点击事件
+`onPlotDblClick: function` 图表区域双击事件
+`onPlotMousemove: function` 图表区域鼠标移动事件
+`onPlotContextmenu: function` 图表区域右键事件
diff --git a/docs/manual/plots/tinyPlot-area.zh.md b/docs/manual/plots/tinyPlot-area.zh.md
index 7036df7cc6..d810704c16 100644
--- a/docs/manual/plots/tinyPlot-area.zh.md
+++ b/docs/manual/plots/tinyPlot-area.zh.md
@@ -13,64 +13,64 @@ order: 15
说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
-### width: number
+### width
-**reuired**
+**reuired**, number 类型
图表宽度
-### height: number
+### height
-**reuired**
+**reuired**, number 类型
图表高度
-### data: collection
+### data
**required**
-数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
-### xField: string
+### xField
-**required**
+**required**, string 类型
面积图在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。
-### yField: string
+### yField
-**required**
+**required**, string 类型
面积图在 y 方向对应的数据字段名，一般对应一个离散字段。
-### smooth: boolean
+### smooth
-**optional**
+**optional**, boolean 类型
面积图是否曲线展示。
-### color: string | function
+### color
-**optional**
+**optional**, string | function 类型
指定面积图颜色。如不进行配置则采用 theme 中的配色。
-### lineStyle: object | function
+### lineStyle
-**optional**
+**optional**, object | function 类型
指定面积图上部折线的样式。
`lineWidth: number` 折线宽度
`lineDash: number[]` 虚线样式
-### guideLine: object[]
+### guideLine
-**optional**
+**optional**, object[] 类型
为图表添加辅助线，可以同时添加多条辅助线。
-`type: string` 含有统计意义的辅助线类型，可选类型为 `'max'` | `'min'` | `'median'` | `'mean'`。如指定了辅助线类型，则不需要配置辅助线的`start`和`end`。
+`type: string` 含有统计意义的辅助线类型，可选类型为 `'max'` | `'min'` | `'median'` | `'mean'`。如指定了辅助线类型，则不需要配置辅助线的 `start` 和 `end`。
`start: array | function | object` 指定辅助线起始位置，如不配置`type`，则该辅助线为自定义辅助线，`start`是必选项。
@@ -109,7 +109,7 @@ order: 15
配置统计辅助线示例代码：
-```
+```js
{
guideLine: [
{
@@ -117,13 +117,13 @@ order: 15
lineStyle: {},
text: {},
},
- ];
+ ],
}
```
配置自定义辅助线示例代码：
-```
+```js
{
guideLine: [
{
@@ -132,7 +132,7 @@ order: 15
lineStyle: {},
text: {},
},
- ];
+ ],
}
```
diff --git a/docs/manual/plots/tinyPlot-column.en.md b/docs/manual/plots/tinyPlot-column.en.md
new file mode 100644
index 0000000000..16d7499e90
--- /dev/null
+++ b/docs/manual/plots/tinyPlot-column.en.md
@@ -0,0 +1,163 @@
+---
+title: TinyColumn - 迷你柱形图
+order: 16
+---
+
+
+
+迷你柱形图是 g2plot 图表体系中，迷你图表的一种。
+
+> 迷你图表通常在空间有限的情况下作为 fullsize chart 的降级显示形式，相比于 fullsize chart，迷你图表省略了轴和图例，标题，标签等组件，而只保留了图表图形的基本态势。因此展现的信息量是有限的。通常，迷你图表会搭配表格进行使用。
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### width
+
+**reuired**, number 类型
+
+图表宽度
+
+### height
+
+**reuired**, number 类型
+
+图表高度
+
+### data
+
+**required**
+
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
+
+### xField
+
+**required**, string 类型
+
+柱形在 x 方向位置映射对应的数据字段名，一般对应一个分类字段。
+
+### yField
+
+**required**, string 类型
+
+柱形在 y 方向高度映射所对应的数据字段名，一般对应一个离散字段。
+
+### colorField
+
+**optional**, string 类型
+
+柱形颜色映射对应的数据字段名。
+
+### color
+
+**optional**, string | string[] | function 类型
+
+指定柱形颜色。如不进行配置则采用 theme 中的配色。
+
+### columnStyle
+
+**optional**, object | function
+
+配置柱形样式。
+
+`fill: string` 填充颜色
+`stroke: string` 描边颜色
+`lineWidth: number` 描边宽度
+`lineDash: number[]` 描边虚线显示
+`opacity: number` 透明度
+
+另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+
+### guideLine
+
+**optional**, object[] 类型
+
+为图表添加辅助线，可以同时添加多条辅助线。
+
+`type: string` 含有统计意义的辅助线类型，可选类型为 `'max'` | `'min'` | `'median'` | `'mean'`。
+
+> 如指定了辅助线类型，则不需要配置辅助线的`start`和`end`。
+
+`start: array | function | object` 指定辅助线起始位置，如不配置`type`，则该辅助线为自定义辅助线，`start`是必选项。
+
+支持两种数据形式，两者不能混用：
+
+- 原始数据值，如 ['2010-01-01', 100]
+- 绘图区域百分比位置，如 ['50%', '50%']
+
+`end: array | function | object` 指定辅助线终点位置，如不配置`type`，则该辅助线为自定义辅助线，`end`是必选项。
+
+支持两种数据形式，两者不能混用：
+
+- 原始数据值，如 ['2010-01-01', 100]
+- 绘图区域百分比位置，如 ['50%', '50%']
+
+`lineStyle: object` 设置辅助线样式。
+
+- `stroke: string` 辅助线颜色
+- `lineWidth: number` 辅助线宽度
+- `lineDash: number[]` 辅助线虚线显示
+- `opacity: number` 辅助线透明度
+
+`text: object` 设置辅助线文本。
+
+- `position: 'start' | 'center' | 'end' | '50%' | 0.5` 设置辅助线文本样式。
+- `content: string` 辅助线文本内容。
+- `offsetX: number` 辅助线文本位置在 x 方向上的偏移量。
+- `offsetY: number` 辅助线文本位置在 y 方向上的偏移量。
+
+- `style: object` 辅助线文本样式。
+
+ - `fontSize: number` 字号
+ - `fill: string` 文字颜色
+ - `opacity: number` 文字透明度
+ - `textAlign: 'start' | 'end' | 'center'` 对齐方式
+ - `textBaselin: 'top' | 'bottom' | 'middle'` 文字基线
+
+配置统计辅助线示例代码：
+
+```js
+{
+ guideLine: [
+ {
+ type: 'mean',
+ lineStyle: {},
+ text: {},
+ },
+ ],
+}
+```
+
+配置自定义辅助线示例代码：
+
+```js
+{
+ guideLine: [
+ {
+ start: ['2010-01-01', 100] || ['0%', '50%'],
+ end: ['2010-01-10', 50] || ['100%', '80%'],
+ lineStyle: {},
+ text: {},
+ },
+ ],
+}
+```
+
+### events
+
+**optional**
+
+图形事件：
+
+`onColumnClick: function` 柱形点击事件
+`onColumnDblClick: function` 柱形双击事件
+`onColumnMousemove: function` 柱形鼠标移动事件
+`onColumnContextmenu: function` 柱形右键事件
+
+图表区域事件：
+
+`onPlotClick: function` 图表区域点击事件
+`onPlotDblClick: function` 图表区域双击事件
+`onPlotMousemove: function` 图表区域鼠标移动事件
+`onPlotContextmenu: function` 图表区域右键事件
diff --git a/docs/manual/plots/tinyPlot-column.zh.md b/docs/manual/plots/tinyPlot-column.zh.md
index e33465b78a..16d7499e90 100644
--- a/docs/manual/plots/tinyPlot-column.zh.md
+++ b/docs/manual/plots/tinyPlot-column.zh.md
@@ -13,51 +13,51 @@ order: 16
说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
-### width: number
+### width
-**reuired**
+**reuired**, number 类型
图表宽度
-### height: number
+### height
-**reuired**
+**reuired**, number 类型
图表高度
-### data: collection
+### data
**required**
-数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
-### xField: string
+### xField
-**required**
+**required**, string 类型
柱形在 x 方向位置映射对应的数据字段名，一般对应一个分类字段。
-### yField: string
+### yField
-**required**
+**required**, string 类型
柱形在 y 方向高度映射所对应的数据字段名，一般对应一个离散字段。
-### colorField: string
+### colorField
-**optional**
+**optional**, string 类型
柱形颜色映射对应的数据字段名。
-### color: string | string[] | function
+### color
-**optional**
+**optional**, string | string[] | function 类型
指定柱形颜色。如不进行配置则采用 theme 中的配色。
-### columnStyle: object | function
+### columnStyle
-**optional**
+**optional**, object | function
配置柱形样式。
@@ -69,9 +69,9 @@ order: 16
另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
-### guideLine: object[]
+### guideLine
-**optional**
+**optional**, object[] 类型
为图表添加辅助线，可以同时添加多条辅助线。
@@ -117,7 +117,7 @@ order: 16
配置统计辅助线示例代码：
-```
+```js
{
guideLine: [
{
@@ -125,13 +125,13 @@ order: 16
lineStyle: {},
text: {},
},
- ];
+ ],
}
```
配置自定义辅助线示例代码：
-```
+```js
{
guideLine: [
{
@@ -140,7 +140,7 @@ order: 16
lineStyle: {},
text: {},
},
- ];
+ ],
}
```
diff --git a/docs/manual/plots/tinyPlot-line.en.md b/docs/manual/plots/tinyPlot-line.en.md
new file mode 100644
index 0000000000..c2e180ff40
--- /dev/null
+++ b/docs/manual/plots/tinyPlot-line.en.md
@@ -0,0 +1,162 @@
+---
+title: TinyLine - 迷你折线图
+order: 17
+---
+
+
+
+迷你折线是 g2plot 图表体系中，迷你图表的一种。
+
+> 迷你图表通常在空间有限的情况下作为 fullsize chart 的降级显示形式，相比于 fullsize chart，迷你图表省略了轴和图例，标题，标签等组件，而只保留了图表图形的基本态势。因此展现的信息量是有限的。通常，迷你图表会搭配表格进行使用。
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### width
+
+**reuired**, number 类型
+
+图表宽度
+
+### height
+
+**reuired**, number 类型
+
+图表高度
+
+### data
+
+**required**
+
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
+
+### xField
+
+**required**, string 类型
+
+折线形状在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。
+
+### yField
+
+**required**, string 类型
+
+折线形状在 y 方向对应的数据字段名，一般对应一个离散字段。
+
+### size
+
+**optional**, number 类型
+
+设置折线宽度，默认为 2。
+
+### smooth
+
+**optional**, boolean 类型
+
+是否将折线绘制为曲线 (spline)。
+
+### color
+
+**optional**, string | function 类型
+
+指定折线颜色。如不进行配置则采用 theme 中的配色。
+
+### lineStyle
+
+**optional**, object | function 类型
+
+设置折线的样式。
+
+`lineDash: number[]` 描边虚线显示
+`opacity: number` 透明度
+
+另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
+
+### guideLine
+
+**optional**, object[] 类型
+
+为图表添加辅助线，可以同时添加多条辅助线。
+
+`type: string` 含有统计意义的辅助线类型，可选类型为 `'max'` | `'min'` | `'median'` | `'mean'`。如指定了辅助线类型，则不需要配置辅助线的`start`和`end`。
+
+`start: array | function | object` 指定辅助线起始位置，如不配置`type`，则该辅助线为自定义辅助线，`start`是必选项。
+
+支持两种数据形式，两者不能混用：
+
+- 原始数据值，如 ['2010-01-01', 100]
+- 绘图区域百分比位置，如 ['50%', '50%']
+
+`end: array | function | object` 指定辅助线终点位置，如不配置`type`，则该辅助线为自定义辅助线，`end`是必选项。
+
+支持两种数据形式，两者不能混用：
+
+- 原始数据值，如 ['2010-01-01', 100]
+- 绘图区域百分比位置，如 ['50%', '50%']
+
+`lineStyle: object` 设置辅助线样式。
+
+- `stroke: string` 辅助线颜色
+- `lineWidth: number` 辅助线宽度
+- `lineDash: number[]` 辅助线虚线显示
+- `opacity: number` 辅助线透明度
+
+`text: object` 设置辅助线文本。
+
+- `position: 'start' | 'center' | 'end' | '50%' | 0.5` 设置辅助线文本样式。
+- `content: string` 辅助线文本内容。
+- `offsetX: number` 辅助线文本位置在 x 方向上的偏移量。
+- `offsetY: number` 辅助线文本位置在 y 方向上的偏移量。
`style: object` 辅助线文本样式。
+
+ - `fontSize: number` 字号
+ - `fill: string` 文字颜色
+ - `opacity: number` 文字透明度
+ - `textAlign: 'start' | 'end' | 'center'` 对齐方式
+ - `textBaselin: 'top' | 'bottom' | 'middle'` 文字基线
+
+配置统计辅助线示例代码：
+
+```js
+{
+ guideLine: [
+ {
+ type: 'mean',
+ lineStyle: {},
+ text: {},
+ },
+ ],
+}
+```
+
+配置自定义辅助线示例代码：
+
+```js
+{
+ guideLine: [
+ {
+ start: ['2010-01-01', 100] || ['0%', '50%'],
+ end: ['2010-01-10', 50] || ['100%', '80%'],
+ lineStyle: {},
+ text: {},
+ },
+ ],
+}
+```
+
+### events
+
+**optional**
+
+图形事件：
+
+`onLineClick: function` 折线点击事件
+`onLineDblClick: function` 折线双击事件
+`onLineMousemove: function` 折线鼠标移动事件
+`onLineContextmenu: function` 折线右键事件
+
+图表区域事件：
+
+`onPlotClick: function` 图表区域点击事件
+`onPlotDblClick: function` 图表区域双击事件
+`onPlotMousemove: function` 图表区域鼠标移动事件
+`onPlotContextmenu: function` 图表区域右键事件
diff --git a/docs/manual/plots/tinyPlot-line.zh.md b/docs/manual/plots/tinyPlot-line.zh.md
index eea620aa35..c2e180ff40 100644
--- a/docs/manual/plots/tinyPlot-line.zh.md
+++ b/docs/manual/plots/tinyPlot-line.zh.md
@@ -13,57 +13,57 @@ order: 17
说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
-### width: number
+### width
-**reuired**
+**reuired**, number 类型
图表宽度
-### height: number
+### height
-**reuired**
+**reuired**, number 类型
图表高度
-### data: collection
+### data
**required**
-数据源为对象集合，例如：[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]。
+数据源为对象集合，例如：`[{ segment: 分类一，value: 20 }, { segment: 分类二，value: 20 }]`。
-### xField: string
+### xField
-**required**
+**required**, string 类型
折线形状在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。
-### yField: string
+### yField
-**required**
+**required**, string 类型
折线形状在 y 方向对应的数据字段名，一般对应一个离散字段。
-### size: number
+### size
-**optional**
+**optional**, number 类型
设置折线宽度，默认为 2。
-### smooth: boolean
+### smooth
-**optional**
+**optional**, boolean 类型
是否将折线绘制为曲线 (spline)。
-### color: string | function
+### color
-**optional**
+**optional**, string | function 类型
指定折线颜色。如不进行配置则采用 theme 中的配色。
-### lineStyle: object | function
+### lineStyle
-**optional**
+**optional**, object | function 类型
设置折线的样式。
@@ -72,9 +72,9 @@ order: 17
另外还支持回调函数的配置方式，入参为当前图形的对应数据，出参为一个样式配置对象。
-### guideLine: object[]
+### guideLine
-**optional**
+**optional**, object[] 类型
为图表添加辅助线，可以同时添加多条辅助线。
@@ -116,7 +116,7 @@ order: 17
配置统计辅助线示例代码：
-```
+```js
{
guideLine: [
{
@@ -124,13 +124,13 @@ order: 17
lineStyle: {},
text: {},
},
- ];
+ ],
}
```
配置自定义辅助线示例代码：
-```
+```js
{
guideLine: [
{
@@ -139,7 +139,7 @@ order: 17
lineStyle: {},
text: {},
},
- ];
+ ],
}
```
diff --git a/docs/manual/plots/tinyPlot-progress.en.md b/docs/manual/plots/tinyPlot-progress.en.md
new file mode 100644
index 0000000000..3998589d0a
--- /dev/null
+++ b/docs/manual/plots/tinyPlot-progress.en.md
@@ -0,0 +1,86 @@
+---
+title: Progress - 进度条
+order: 13
+---
+
+
+
+进度条是 g2plot 图表体系中，迷你图表的一种。
+
+> 迷你图表通常在空间有限的情况下作为 fullsize chart 的降级显示形式，相比于 fullsize chart，迷你图表省略了轴和图例，标题，标签等组件，而只保留了图表图形的基本态势。因此展现的信息量是有限的。通常，迷你图表会搭配表格进行使用。
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### width
+
+**reuired**, number 类型
+
+图表宽度
+
+### height
+
+**reuired**, number 类型
+
+图表高度
+
+### percent
+
+**required**, number 类型
+
+进度百分比，值域为 [0,1]。
+
+### color
+
+**optional**, number | number[] | function 类型
+
+设置进度条颜色，该值的类型如下
+
+- number 指定值为单值时，配置进度条已完成分段的颜色
+- number[] 指定值为一个数组时，同时配置进度条已完成和未完成分段的颜色，顺序为 [ 已完成，未完成 ]
+- function 指定值为一个回调函数时，入参为当前进度 (percent)，出参为一个数组，需要同时指定进度条已完成和未完成分段的颜色，顺序为 [ 已完成，未完成 ]
+
+### progressStyle
+
+**optional**, object | function 类型
+
+设置进度条的样式。
+
+`fill: string` 填充颜色
+`stroke: string` 描边颜色
+`lineWidth: number` 描边宽度
+`lineDash: number[]` 描边虚线显示
+`opacity: number` 透明度
+
+另外还支持回调函数的配置方式，入参为当前进度 (percent)，出参为一个样式配置对象。
+
+### events
+
+**optional**
+
+- 图形事件：
+
+ `onProgressClick: function` 折线点击事件
+ `onProgresDblClick: function` 折线双击事件
+ `onProgresMousemove: function` 折线鼠标移动事件
+ `onProgresContextmenu: function` 折线右键事件
+
+- 图表区域事件：
+
+ `onPlotClick: function` 图表区域点击事件
+ `onPlotDblClick: function` 图表区域双击事件
+ `onPlotMousemove: function` 图表区域鼠标移动事件
+ `onPlotContextmenu: function` 图表区域右键事件
+
+## 方法
+
+### update( percent:number )
+
+更新进度。
+
+```js
+progress.update(0.5);
+```
+
+其他方法见[通用图表配置](../general-config.zh.md)。
diff --git a/docs/manual/plots/tinyPlot-progress.zh.md b/docs/manual/plots/tinyPlot-progress.zh.md
index 011e568508..3998589d0a 100644
--- a/docs/manual/plots/tinyPlot-progress.zh.md
+++ b/docs/manual/plots/tinyPlot-progress.zh.md
@@ -13,27 +13,27 @@ order: 13
说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
-### width: number
+### width
-**reuired**
+**reuired**, number 类型
图表宽度
-### height: number
+### height
-**reuired**
+**reuired**, number 类型
图表高度
-### percent: number
+### percent
-**required**
+**required**, number 类型
进度百分比，值域为 [0,1]。
-### color: number | number[] | function
+### color
-**optional**
+**optional**, number | number[] | function 类型
设置进度条颜色，该值的类型如下
@@ -41,9 +41,9 @@ order: 13
- number[] 指定值为一个数组时，同时配置进度条已完成和未完成分段的颜色，顺序为 [ 已完成，未完成 ]
- function 指定值为一个回调函数时，入参为当前进度 (percent)，出参为一个数组，需要同时指定进度条已完成和未完成分段的颜色，顺序为 [ 已完成，未完成 ]
-### progressStyle: object | function
+### progressStyle
-**optional**
+**optional**, object | function 类型
设置进度条的样式。
@@ -79,7 +79,7 @@ order: 13
更新进度。
-```
+```js
progress.update(0.5);
```
diff --git a/docs/manual/plots/tinyPlot-ring-progress.en.md b/docs/manual/plots/tinyPlot-ring-progress.en.md
new file mode 100644
index 0000000000..cdef648b47
--- /dev/null
+++ b/docs/manual/plots/tinyPlot-ring-progress.en.md
@@ -0,0 +1,86 @@
+---
+title: RingProgress - 环形进度条
+order: 14
+---
+
+
+
+环形进度条是 g2plot 图表体系中，迷你图表的一种。
+
+> 迷你图表通常在空间有限的情况下作为 fullsize chart 的降级显示形式，相比于 fullsize chart，迷你图表省略了轴和图例，标题，标签等组件，而只保留了图表图形的基本态势。因此展现的信息量是有限的。通常，迷你图表会搭配表格进行使用。
+
+## API
+
+说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
+
+### width
+
+**reuired**, number 类型
+
+图表宽度
+
+### height
+
+**reuired**, number 类型
+
+图表高度
+
+### percent
+
+**required**, number 类型
+
+进度百分比，值域为 [0,1]。
+
+### color
+
+**optional**, number | number[] | function 类型
+
+设置进度条颜色，该值的类型如下
+
+- number 指定值为单值时，配置进度条已完成分段的颜色
+- number[] 指定值为一个数组时，同时配置进度条已完成和未完成分段的颜色，顺序为 [ 已完成，未完成 ]
+- function 指定值为一个回调函数时，入参为当前进度 (percent)，出参为一个数组，需要同时指定进度条已完成和未完成分段的颜色，顺序为 [ 已完成，未完成 ]
+
+### progressStyle
+
+**optional**, object | function 类型
+
+设置进度条的样式。
+
+`fill: string` 填充颜色
+`stroke: string` 描边颜色
+`lineWidth: number` 描边宽度
+`lineDash: number[]` 描边虚线显示
+`opacity: number` 透明度
+
+另外还支持回调函数的配置方式，入参为当前进度 (percent)，出参为一个样式配置对象。
+
+### events
+
+**optional**
+
+- 图形事件：
+
+ `onProgressClick: function` 折线点击事件
+ `onProgresDblClick: function` 折线双击事件
+ `onProgresMousemove: function` 折线鼠标移动事件
+ `onProgresContextmenu: function` 折线右键事件
+
+- 图表区域事件：
+
+ `onPlotClick: function` 图表区域点击事件
+ `onPlotDblClick: function` 图表区域双击事件
+ `onPlotMousemove: function` 图表区域鼠标移动事件
+ `onPlotContextmenu: function` 图表区域右键事件
+
+## 方法
+
+### update( percent:number )
+
+更新进度。
+
+```js
+progress.update(0.5);
+```
+
+其他方法见[通用图表配置](../general-config.zh.md)。
diff --git a/docs/manual/plots/tinyPlot-ring-progress.zh.md b/docs/manual/plots/tinyPlot-ring-progress.zh.md
index be04502b43..cdef648b47 100644
--- a/docs/manual/plots/tinyPlot-ring-progress.zh.md
+++ b/docs/manual/plots/tinyPlot-ring-progress.zh.md
@@ -13,27 +13,27 @@ order: 14
说明： **required** 标签代表生成图表的必选配置项，**optional** 标签代表生成图表的可选配置项。
-### width: number
+### width
-**reuired**
+**reuired**, number 类型
图表宽度
-### height: number
+### height
-**reuired**
+**reuired**, number 类型
图表高度
-### percent: number
+### percent
-**required**
+**required**, number 类型
进度百分比，值域为 [0,1]。
-### color: number | number[] | function
+### color
-**optional**
+**optional**, number | number[] | function 类型
设置进度条颜色，该值的类型如下
@@ -41,9 +41,9 @@ order: 14
- number[] 指定值为一个数组时，同时配置进度条已完成和未完成分段的颜色，顺序为 [ 已完成，未完成 ]
- function 指定值为一个回调函数时，入参为当前进度 (percent)，出参为一个数组，需要同时指定进度条已完成和未完成分段的颜色，顺序为 [ 已完成，未完成 ]
-### progressStyle: object | function
+### progressStyle
-**optional**
+**optional**, object | function 类型
设置进度条的样式。
@@ -79,7 +79,7 @@ order: 14
更新进度。
-```
+```js
progress.update(0.5);
```
diff --git a/examples/gauge/basic/demo/basic.js b/examples/gauge/basic/demo/basic.js
index 2d173ee362..fb34b16bac 100644
--- a/examples/gauge/basic/demo/basic.js
+++ b/examples/gauge/basic/demo/basic.js
@@ -37,7 +37,7 @@ const gaugePlot = new Gauge(document.getElementById('container'), {
colors: ['#f4664a', '#faad14', '#a0d911', '#30bf78'],
tickLabelSize: 20,
},
- label: () => {
+ statistic: () => {
return '';
},
});
diff --git a/examples/gauge/basic/demo/half.js b/examples/gauge/basic/demo/half.js
index 8d922b9b39..6e96434f54 100644
--- a/examples/gauge/basic/demo/half.js
+++ b/examples/gauge/basic/demo/half.js
@@ -42,7 +42,7 @@ const gaugePlot = new Gauge(document.getElementById('container'), {
}
return '';
},
- label: () => {
+ statistic: () => {
return '';
},
gaugeStyle: {
@@ -50,7 +50,7 @@ const gaugePlot = new Gauge(document.getElementById('container'), {
tickLabelSize: 16,
stripWidth: 20,
pointerColor: 'rgba(0,0,0,0)',
- labelPos: ['50%', '80%'],
+ statisticPos: ['50%', '80%'],
tickLabelPos: 'outer',
},
});
diff --git a/examples/gauge/basic/demo/style.js b/examples/gauge/basic/demo/style.js
index 9108147c10..bef1c22418 100644
--- a/examples/gauge/basic/demo/style.js
+++ b/examples/gauge/basic/demo/style.js
@@ -33,7 +33,7 @@ const gaugePlot = new Gauge(document.getElementById('container'), {
value: 40,
min: 0,
max: 100,
- label: () => {
+ statistic: () => {
return '';
},
gaugeStyle: {
diff --git a/examples/general/axis/index.en.md b/examples/general/axis/index.en.md
index d1a06f09ac..792edb976e 100644
--- a/examples/general/axis/index.en.md
+++ b/examples/general/axis/index.en.md
@@ -1,6 +1,6 @@
---
title: Axis
-order: 1
+order: 2
---
Description about this component.
diff --git a/examples/general/axis/index.zh.md b/examples/general/axis/index.zh.md
index ff19ba8bbf..52dce46fb3 100644
--- a/examples/general/axis/index.zh.md
+++ b/examples/general/axis/index.zh.md
@@ -1,4 +1,4 @@
---
title: 坐标轴
-order: 1
+order: 2
---
diff --git a/examples/general/label/index.en.md b/examples/general/label/index.en.md
index 8d9277cba6..6cc664bd48 100644
--- a/examples/general/label/index.en.md
+++ b/examples/general/label/index.en.md
@@ -1,6 +1,6 @@
---
-title: Lable
-order: 3
+title: Label
+order: 4
---
Description about this component.
diff --git a/examples/general/label/index.zh.md b/examples/general/label/index.zh.md
index 04a0bb2d6f..11063117ff 100644
--- a/examples/general/label/index.zh.md
+++ b/examples/general/label/index.zh.md
@@ -1,4 +1,4 @@
---
title: 图形标签
-order: 3
+order: 4
---
diff --git a/examples/general/legend/index.en.md b/examples/general/legend/index.en.md
index 7b647e5c6a..0e3c50999a 100644
--- a/examples/general/legend/index.en.md
+++ b/examples/general/legend/index.en.md
@@ -1,6 +1,6 @@
---
title: Legend
-order: 2
+order: 3
---
Description about this component.
diff --git a/examples/general/legend/index.zh.md b/examples/general/legend/index.zh.md
index bff297e2f6..0ab14a9204 100644
--- a/examples/general/legend/index.zh.md
+++ b/examples/general/legend/index.zh.md
@@ -1,4 +1,4 @@
---
title: 图例
-order: 2
+order: 3
---
diff --git a/examples/general/padding/index.en.md b/examples/general/padding/index.en.md
index 157fc2b8ce..16ca3ecf80 100644
--- a/examples/general/padding/index.en.md
+++ b/examples/general/padding/index.en.md
@@ -1,6 +1,6 @@
---
title: Set Padding
-order: 4
+order: 5
---
Description about this component.
diff --git a/examples/general/padding/index.zh.md b/examples/general/padding/index.zh.md
index ddcbf81e8e..a439e07c88 100644
--- a/examples/general/padding/index.zh.md
+++ b/examples/general/padding/index.zh.md
@@ -1,4 +1,4 @@
---
title: 设置图表出血
-order: 4
+order: 5
---
diff --git a/examples/general/state/index.en.md b/examples/general/state/index.en.md
index 539aae3741..80f178434c 100644
--- a/examples/general/state/index.en.md
+++ b/examples/general/state/index.en.md
@@ -1,6 +1,6 @@
---
title: Set State
-order: 5
+order: 6
---
Description about this component.
diff --git a/examples/general/state/index.zh.md b/examples/general/state/index.zh.md
index 38ee70644b..615b888ac4 100644
--- a/examples/general/state/index.zh.md
+++ b/examples/general/state/index.zh.md
@@ -1,4 +1,4 @@
---
title: 设置图表状态量
-order: 5
+order: 6
---
diff --git a/examples/general/theme/API.en.md b/examples/general/theme/API.en.md
new file mode 100644
index 0000000000..8de89fa021
--- /dev/null
+++ b/examples/general/theme/API.en.md
@@ -0,0 +1,13 @@
+---
+title: API
+---
+
+API.
+
+- Modern browsers and Internet Explorer 9+ (with [polyfills](https:// ant.design/docs/react/getting-started#Compatibility))
+- Server-side Rendering
+- [Electron](http:// electron.atom.io/)
+
+| [
](http:// godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
diff --git a/examples/general/theme/API.zh.md b/examples/general/theme/API.zh.md
new file mode 100644
index 0000000000..a3bf78cbaa
--- /dev/null
+++ b/examples/general/theme/API.zh.md
@@ -0,0 +1,13 @@
+---
+title: API
+---
+
+暂无。
+
+- Modern browsers and Internet Explorer 9+ (with [polyfills](https:// ant.design/docs/react/getting-started#Compatibility))
+- Server-side Rendering
+- [Electron](http:// electron.atom.io/)
+
+| [](http:// godban.github.io/browsers-support-badges/)IE / Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari | [](http://godban.github.io/browsers-support-badges/)Opera | [](http://godban.github.io/browsers-support-badges/)Electron |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
diff --git a/examples/general/theme/demo/meta.json b/examples/general/theme/demo/meta.json
new file mode 100644
index 0000000000..99a60c9e62
--- /dev/null
+++ b/examples/general/theme/demo/meta.json
@@ -0,0 +1,13 @@
+{
+ "title": {
+ "zh": "中文分类",
+ "en": "Category"
+ },
+ "demos": [
+ {
+ "filename": "set-dark-theme.js",
+ "title": "设置暗黑主题",
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*iHeNS6zg4gIAAAAAAAAAAABkARQnAQ"
+ }
+ ]
+}
diff --git a/examples/general/theme/demo/set-dark-theme.js b/examples/general/theme/demo/set-dark-theme.js
new file mode 100644
index 0000000000..2877cd3012
--- /dev/null
+++ b/examples/general/theme/demo/set-dark-theme.js
@@ -0,0 +1,57 @@
+import { Column } from '@antv/g2plot';
+
+const data = [
+ {
+ year: '1991',
+ value: 31,
+ },
+ {
+ year: '1992',
+ value: 41,
+ },
+ {
+ year: '1993',
+ value: 35,
+ },
+ {
+ year: '1994',
+ value: 55,
+ },
+ {
+ year: '1995',
+ value: 49,
+ },
+ {
+ year: '1996',
+ value: 15,
+ },
+ {
+ year: '1997',
+ value: 17,
+ },
+ {
+ year: '1998',
+ value: 29,
+ },
+ {
+ year: '1999',
+ value: 33,
+ },
+];
+
+const columnPlot = new Column(document.getElementById('container'), {
+ title: {
+ visible: true,
+ text: '设置图表暗黑主题',
+ },
+ description: {
+ visible: true,
+ text: 'g2plot内置了暗黑主题，可通过theme配置。',
+ },
+ theme: 'dark',
+ data,
+ xField: 'year',
+ yField: 'value',
+});
+
+columnPlot.render();
diff --git a/examples/general/theme/design.en.md b/examples/general/theme/design.en.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/general/theme/design.en.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/general/theme/design.zh.md b/examples/general/theme/design.zh.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/general/theme/design.zh.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/general/theme/index.en.md b/examples/general/theme/index.en.md
new file mode 100644
index 0000000000..2371bde86b
--- /dev/null
+++ b/examples/general/theme/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Dark Mode
+order: 1
+---
diff --git a/examples/general/theme/index.zh.md b/examples/general/theme/index.zh.md
new file mode 100644
index 0000000000..b516fdacb2
--- /dev/null
+++ b/examples/general/theme/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 暗黑主题
+order: 1
+---
diff --git a/examples/liquid/basic/demo/basic.js b/examples/liquid/basic/demo/basic.js
index eb32eabbc0..f61d1bf5f5 100644
--- a/examples/liquid/basic/demo/basic.js
+++ b/examples/liquid/basic/demo/basic.js
@@ -5,7 +5,7 @@ const liquidPlot = new Liquid(document.getElementById('container'), {
visible: true,
text: '水波图',
},
- indicator: 'normal',
+ statistic: 'normal',
width: 400,
height: 400,
min: 0,
diff --git a/examples/liquid/basic/demo/percent.js b/examples/liquid/basic/demo/percent.js
index f4635dbca7..b04ab0597b 100644
--- a/examples/liquid/basic/demo/percent.js
+++ b/examples/liquid/basic/demo/percent.js
@@ -9,7 +9,7 @@ const liquidPlot = new Liquid(document.getElementById('container'), {
visible: true,
text: '水波图 - 百分比显示',
},
- indicator: 'percent',
+ statistic: 'percent',
width: 400,
height: 400,
min: 0,
diff --git a/examples/pie/basic/demo/basic.js b/examples/pie/basic/demo/basic.js
index 80b146730c..fb17a4e123 100644
--- a/examples/pie/basic/demo/basic.js
+++ b/examples/pie/basic/demo/basic.js
@@ -45,7 +45,6 @@ const piePlot = new Pie(document.getElementById('container'), {
label: {
visible: true,
type: 'inner',
- offset: -60,
},
});
diff --git a/examples/pie/ring/demo/meta.json b/examples/pie/ring/demo/meta.json
index 4683e71172..1cee5df0da 100644
--- a/examples/pie/ring/demo/meta.json
+++ b/examples/pie/ring/demo/meta.json
@@ -10,8 +10,8 @@
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*0JDQQYXgxekAAAAAAAAAAABkARQnAQ"
},
{
- "filename": "ring-central-text.js",
- "title": "环图-中心文本",
+ "filename": "ring-statistic.js",
+ "title": "环图-指标卡",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*U9D_Sr55LEMAAAAAAAAAAABkARQnAQ"
}
]
diff --git a/examples/pie/ring/demo/ring-basic.js b/examples/pie/ring/demo/ring-basic.js
index a6d3c935fc..d856b4cd81 100644
--- a/examples/pie/ring/demo/ring-basic.js
+++ b/examples/pie/ring/demo/ring-basic.js
@@ -42,9 +42,6 @@ const ringPlot = new Ring(document.getElementById('container'), {
data,
angleField: 'value',
colorField: 'type',
- label: {
- offset: -22,
- },
});
ringPlot.render();
diff --git a/examples/pie/ring/demo/ring-central-text.js b/examples/pie/ring/demo/ring-statistic.js
similarity index 72%
rename from examples/pie/ring/demo/ring-central-text.js
rename to examples/pie/ring/demo/ring-statistic.js
index c04d60b800..9c700a7d4d 100644
--- a/examples/pie/ring/demo/ring-central-text.js
+++ b/examples/pie/ring/demo/ring-statistic.js
@@ -31,20 +31,19 @@ const ringPlot = new Ring(document.getElementById('container'), {
forceFit: true,
title: {
visible: true,
- text: '环图-中心文本',
+ text: '环图-指标卡',
},
description: {
visible: true,
- text: '环图中心文本能够代替tooltip，在环图中心挖空部分显示各分类的详细信息。',
+ text: '环图指标卡能够代替tooltip，在环图中心挖空部分显示各分类的详细信息。',
},
radius: 0.8,
padding: 'auto',
data,
angleField: 'value',
colorField: 'type',
- annotation: [{ type: 'centralText', onActive: true }],
- label: {
- offset: -22,
+ statistic: {
+ visible: true,
},
});
diff --git a/package.json b/package.json
index 8c75f932ba..f717ecdbd7 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
"lint": "lint-staged",
"lint-check": "eslint --ext .ts --quiet ./src ./__tests__ ./demos",
"lint-fix": "run-s lint-fix:*",
- "lint-fix:examples": "prettier --write examples/**/*.{js}",
+ "lint-fix:examples": "prettier --write examples/**/*.js",
"lint-fix:eslint": "eslint --ext .ts --fix ./src ./__tests__ ./demos",
"test": "jest",
"test-live": "DEBUG_MODE=1 jest --watch",
@@ -50,13 +50,13 @@
}
},
"dependencies": {
- "@antv/component": "~0.4.0-beta.3",
+ "@antv/component": "~0.4.0-beta.4",
"@antv/coord": "~0.2.2",
"@antv/dom-util": "~2.0.1",
"@antv/event-emitter": "^0.1.1",
"@antv/g": "~3.5.0-beta.1",
"@antv/g-gesture": "~0.1.0-beta.2",
- "@antv/g2": "~3.6.0-beta.4",
+ "@antv/g2": "~3.6.0-beta.5",
"@antv/gui": "~0.1.0-beta.4",
"@antv/matrix-util": "~2.0.2",
"@antv/scale": "^0.2.1",
diff --git a/site/locale.json b/site/locale.json
index 3335cfd4ae..a7059f0f54 100644
--- a/site/locale.json
+++ b/site/locale.json
@@ -24,7 +24,7 @@
"图表实验室": "Advanced Features",
"来这里尝试一下我们正在开发中的高级图表功能": "We are now working on some advanced and powerful chart features.",
"g2plot 开箱即用的图表库": "g2plot: a charting libaray",
- "g2plot 是开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库。":"g2plot is an interactive and responsive charting library based on the grammar of graphics.",
+ "g2plot 是开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库。": "g2plot is an interactive and responsive charting library based on the grammar of graphics.",
"开箱即用": "easy to use",
"配置项优化精简，仅需几行代码轻松生成图表": "Generating high quality statistical charts through a few lines of code.",
"默认好用": "default by good",
diff --git a/src/plots/area/layer.ts b/src/plots/area/layer.ts
index a3911aa258..46d3f0bc03 100644
--- a/src/plots/area/layer.ts
+++ b/src/plots/area/layer.ts
@@ -10,6 +10,7 @@ import { extractScale } from '../../util/scale';
import responsiveMethods from './apply-responsive';
import * as EventParser from './event';
import './theme';
+import { PointStyle, LineStyle } from '../line/layer';
interface AreaStyle {
opacity?: number;
@@ -18,18 +19,6 @@ interface AreaStyle {
lineWidth?: number;
}
-interface LineStyle {
- lineDash?: number[];
- stroke?: string;
- lineJoin?: 'bevel' | 'round' | 'miter';
- lineCap?: 'butt' | 'round' | 'square';
-}
-
-interface PointStyle {
- fillStyle?: string;
- strokeStyle?: string;
-}
-
const GEOM_MAP = {
area: 'area',
line: 'line',
@@ -43,14 +32,12 @@ export interface AreaViewConfig extends ViewConfig {
yAxis?: IValueAxis;
line?: {
visible?: boolean;
- opacity?: number;
color?: string;
size?: number;
style?: LineStyle;
};
point?: {
visible?: boolean;
- opacity?: number;
color?: string;
size?: number;
shape?: string;
diff --git a/src/plots/gauge/layer.ts b/src/plots/gauge/layer.ts
index 6744544f8f..b8f883fb30 100644
--- a/src/plots/gauge/layer.ts
+++ b/src/plots/gauge/layer.ts
@@ -33,6 +33,7 @@ export interface GaugeViewConfig extends ViewConfig {
range: number[];
styleMix?: any;
valueText?: string;
+ statistic: any; // todo: 指标卡类型定义
}
export interface GaugeLayerConfig extends GaugeViewConfig, LayerConfig {}
@@ -46,7 +47,7 @@ export default class GaugeLayer extends ViewLayer {
gaugeStyle: {
tickLineColor: 'rgba(0,0,0,0)',
pointerColor: '#bfbfbf',
- labelPos: ['50%', '100%'],
+ statisticPos: ['50%', '100%'],
},
});
}
@@ -81,7 +82,7 @@ export default class GaugeLayer extends ViewLayer {
const defaultStyle = Object.assign({}, this.theme, {
stripWidth: size,
tickLabelSize: size / 2,
- labelSize: size * 1.5,
+ statisticSize: size * 1.5,
});
return Object.assign(defaultStyle, gaugeStyle);
}
@@ -187,13 +188,13 @@ export default class GaugeLayer extends ViewLayer {
}
protected annotation() {
- const { min, max, label, range, styleMix } = this.options;
+ const { min, max, statistic, range, styleMix } = this.options;
const annotationConfigs = [];
// @ts-ignore
- if (label !== false) {
- const labels = this.renderLabel();
- annotationConfigs.push(labels);
+ if (statistic !== false) {
+ const statistics = this.renderStatistic();
+ annotationConfigs.push(statistics);
}
const arcSize = 1; // 0.965;
@@ -262,48 +263,48 @@ export default class GaugeLayer extends ViewLayer {
return Bks.concat(Arcs);
}
- private labelHtml() {
+ private statisticHtml() {
const { value, format } = this.options;
- const label: any = this.options.label;
+ const statistic: any = this.options.statistic;
const formatted: string = format(value);
- if (typeof label === 'boolean' && label === true) {
+ if (typeof statistic === 'boolean' && statistic === true) {
return value !== null ? formatted : '--';
}
- if (typeof label === 'string') {
- return label;
+ if (typeof statistic === 'string') {
+ return statistic;
}
- if (typeof label === 'function') {
- return label(value, formatted);
+ if (typeof statistic === 'function') {
+ return statistic(value, formatted);
}
return null;
}
- private renderLabel() {
- const { label, styleMix } = this.options;
- const labelHtml: string | HTMLElement | null = this.labelHtml();
+ private renderStatistic() {
+ const { statistic, styleMix } = this.options;
+ const statisticHtml: string | HTMLElement | null = this.statisticHtml();
- if (typeof label !== 'function') {
+ if (typeof statistic !== 'function') {
const text = {
type: 'text',
- content: labelHtml,
+ content: statisticHtml,
top: true,
- position: styleMix.labelPos,
+ position: styleMix.statisticPos,
style: {
- fill: styleMix.labelColor,
- fontSize: styleMix.labelSize,
+ fill: styleMix.statisticColor,
+ fontSize: styleMix.statisticSize,
textAlign: 'center',
},
};
return text;
}
- if (typeof label === 'function') {
+ if (typeof statistic === 'function') {
const html = {
type: 'html',
zIndex: 10,
- position: styleMix.labelPos,
- html: labelHtml,
+ position: styleMix.statisticPos,
+ html: statisticHtml,
};
return html;
}
diff --git a/src/plots/line/layer.ts b/src/plots/line/layer.ts
index 30391b89d8..0a0bef8ad0 100644
--- a/src/plots/line/layer.ts
+++ b/src/plots/line/layer.ts
@@ -23,11 +23,12 @@ export interface LineStyle {
lineCap?: 'butt' | 'round' | 'square';
}
-interface PointStyle {
- shape?: string;
- size?: number;
- color?: string;
+export interface PointStyle {
+ lineDash?: number[];
+ lineWidth?: number;
opacity?: string;
+ fillStyle?: string;
+ strokeStyle?: string;
}
interface IObject {
@@ -51,6 +52,9 @@ export interface LineViewConfig extends ViewConfig {
/** 折线数据点图形样式 */
point?: {
visible?: boolean;
+ shape?: string;
+ size?: number;
+ color?: string;
style?: PointStyle;
};
xAxis?: IValueAxis | ICatAxis | ITimeAxis;
diff --git a/src/plots/liquid/layer.ts b/src/plots/liquid/layer.ts
index 7d7ec9e082..2903ee7e86 100644
--- a/src/plots/liquid/layer.ts
+++ b/src/plots/liquid/layer.ts
@@ -27,7 +27,7 @@ const PLOT_GEOM_MAP = {
};
export interface LiquidViewConfig extends ViewConfig {
- indicator?: string;
+ statistic?: string;
min?: number;
max?: number;
value?: number;
@@ -44,9 +44,9 @@ export default class LiquidLayer extends ViewLayer {
public type: string = 'liquid';
public init() {
- const { value, indicator = 'normal' } = this.options;
+ const { value, statistic = 'normal' } = this.options;
const { min = 0, max = 1, format = (d) => `${d}` } = this.options;
- const valueText = this.valueText(indicator, value, format, min, max);
+ const valueText = this.valueText(statistic, value, format, min, max);
const styleMix = this.getStyleMix(valueText);
this.options.styleMix = styleMix;
this.options.data = [{ value: typeof value === 'number' && valueText !== '--' ? value : 0 }];
diff --git a/src/plots/pie/component/label/upgrade-label/index.ts b/src/plots/pie/component/label/upgrade-label/index.ts
new file mode 100644
index 0000000000..bcf984407f
--- /dev/null
+++ b/src/plots/pie/component/label/upgrade-label/index.ts
@@ -0,0 +1,444 @@
+/* import { getElementLabels, registerElementLabels } from '@antv/g2';
+import { Shape, BBox, Marker } from '@antv/g';
+import Polar from '@antv/coord/lib/coord/polar';
+import _ from 'lodash';
+import { getEndPoint, getQuadrantByAngle, getOverlapArea, inPanel, getCenter } from '../utils';
+import { LabelItem as BaseLabelItem } from '@antv/component/lib/interface';
+
+const PieElementLabels = getElementLabels('pie');
+
+// upgrade-pie label config
+interface LabelItem extends BaseLabelItem {
+ offset?: number;
+ labelLine?: {
+ smooth?: boolean;
+ };
+}
+// 默认label和element的偏移 16px
+const DEFAULT_OFFSET = 16;
+const DEFAULT_TEXT_LINE_OFFSET = 4;
+const MaxOverlapArea = 28;
+
+type C = {
+ rx: number;
+ ry: number;
+};
+
+class UpgradePieLabels extends PieElementLabels {
+ public showLabels(points: any, shapes: Shape[]) {
+ super.showLabels(points, shapes);
+ // 调整
+ const renderer = this.get('labelsRenderer');
+ const labels: Shape[] = renderer.get('group').get('children');
+ const items = renderer.get('items') || [];
+ const labelLines = renderer.get('lineGroup').get('children') || [];
+ const view = this.get('element').get('view');
+ const panel = view.get('panelRange');
+ this.adjustLabelPosition(labels, items, panel);
+ this.adjustOverlap(labels, panel);
+ this.adjustLines(labels, items, labelLines);
+ // after all, add distance between text and line-path
+ labels.forEach((l, idx) => {
+ const item = items[idx];
+ const oldBox = l.getBBox();
+ const alignment = item.textAlign;
+ const distance = this.getTextLineOffset(item) * (alignment === 'left' ? 1 : -1);
+ const newX = oldBox.x + distance * 2;
+ const newBox = new BBox(newX, oldBox.y, oldBox.width, oldBox.height);
+ l.attr('x', newX);
+ l.set('box', newBox);
+ });
+ view.get('canvas').draw();
+ }
+
+ // label shape position
+ public adjustLabelPosition(labels: Shape[], items: LabelItem[], panel: BBox) {
+ const coord = this.get('coord');
+ const center = coord.getCenter();
+ const r = coord.getRadius();
+ labels.forEach((l, idx) => {
+ const item = items[idx];
+ const oldBox = l.getBBox();
+ const offset = this.getOffsetOfLabel(item);
+ const pos = getEndPoint(center, item.angle, r + offset);
+ const newBox = new BBox(pos.x, pos.y, oldBox.width, oldBox.height);
+ l.attr('x', pos.x);
+ l.attr('y', pos.y);
+ l.set('box', newBox);
+ });
+ // 处理各象限坐标位置
+ const part1 = items.filter((a) => getQuadrantByAngle(a.angle) === 0);
+ const part1Labels = part1.map((a) => labels.find((l) => l.id === a.id));
+ const part2 = items.filter((a) => getQuadrantByAngle(a.angle) === 1);
+ const part2Labels = part2.map((a) => labels.find((l) => l.id === a.id));
+ const part3 = items.filter((a) => getQuadrantByAngle(a.angle) === 2);
+ const part3Labels = part3.map((a) => labels.find((l) => l.id === a.id));
+ const part4 = items.filter((a) => getQuadrantByAngle(a.angle) === 3);
+ const part4Labels = part4.map((a) => labels.find((l) => l.id === a.id));
+ const { rx: rx1, ry: ry1 } = this._getQTRadius(_.reverse([...part1Labels]), panel, coord);
+ const { ry: ry4 } = this._getQTRadius(part4Labels, panel, coord);
+ const { rx: rx2, ry: ry2 } = this._getQBRadius(part2Labels, panel, coord);
+ const { ry: ry3 } = this._getQBRadius(_.reverse([...part3Labels]), panel, coord);
+ const cTop = { rx: rx1, ry: Math.max(ry1, ry4) };
+ const cBottom = { rx: rx2, ry: Math.max(ry2, ry3) };
+ this._adjustQ1Label(part1Labels, part1, cTop, coord);
+ this._adjustQ2Label(part2Labels, part2, cBottom, coord);
+ this._adjustQ3Label(part3Labels, part3, cBottom, coord);
+ this._adjustQ4Label(part4Labels, part4, cTop, coord);
+ }
+
+ private _adjustQ1Label(labels: Shape[], items: LabelItem[], cr: C, coord: Polar): void {
+ const center = coord.getCenter();
+ const top = _.head(labels) ? _.head(labels).getBBox().minY : 0;
+ const { rx, ry } = cr;
+ // 理想情况下的标签可用空间
+ if (center.y - ry < top) {
+ // adjust 椭圆的y半轴 b
+ labels.forEach((l, idx) => {
+ const item = items[idx];
+ const oldBox = l.getBBox();
+ const newY = oldBox.y + (ry - rx) * Math.cos(Math.PI / 2 - item.angle);
+ // 椭圆公式
+ let newX = center.x + Math.sqrt(1 - Math.pow(newY - center.y, 2) / Math.pow(ry, 2)) * rx;
+ if (_.isNaN(newX)) {
+ newX = oldBox.x - DEFAULT_OFFSET;
+ }
+ // offset between label-text and label-line
+ const newBox = new BBox(newX, newY, oldBox.width, oldBox.height);
+ l.attr('x', newX);
+ l.attr('y', newY);
+ l.set('box', newBox);
+ });
+ }
+ }
+
+ private _adjustQ2Label(labels: Shape[], items: LabelItem[], cr: C, coord: Polar): void {
+ const center = coord.getCenter();
+ const { rx, ry } = cr;
+ let totalHeight = 0;
+ _.each(labels, (l) => (totalHeight += l.getBBox().height));
+ const top = _.head(labels) ? _.head(labels).getBBox().minY : 0;
+ const bottom = _.last(labels) ? _.last(labels).getBBox().maxY : 0;
+ // 总高度超出, 溢出的设置隐藏
+ if (totalHeight > ry) {
+ // adjust 椭圆的y半轴 b
+ let yPos = top;
+ labels.forEach((l, idx) => {
+ const oldBox = l.getBBox();
+ let newY = yPos;
+ if (bottom - top < ry) {
+ newY = Math.max(newY, oldBox.y);
+ }
+ const newX = oldBox.x;
+ // offset between label-text and label-line
+ const newBox = new BBox(newX, newY, oldBox.width, oldBox.height);
+ l.attr('x', newX);
+ l.attr('y', newY);
+ l.set('box', newBox);
+ yPos = newBox.maxY;
+ });
+ } else {
+ // 总高度没溢出 调整所有label在椭圆轨道上
+ _.reverse(labels);
+ let yPos = Math.max(center.y + ry, bottom);
+ labels.forEach((l, idx) => {
+ const oldBox = l.getBBox();
+ // y 近似坐标
+ let newY = oldBox.y + (ry - rx) * Math.cos(items[idx].angle) - oldBox.height;
+ // make label leader-line more nice looking
+ newY = Math.max(newY, oldBox.y);
+ // 不能和上一标签遮挡
+ newY = Math.min(newY, yPos - oldBox.height);
+ // 椭圆公式
+ let newX = center.x + Math.sqrt(1 - Math.pow(newY - center.y, 2) / Math.pow(ry, 2)) * rx;
+ if (_.isNaN(newX)) {
+ newX = oldBox.x + DEFAULT_OFFSET;
+ }
+ newX = Math.min(oldBox.x, newX);
+ // offset between label-text and label-line
+ const newBox = new BBox(newX, newY, oldBox.width, oldBox.height);
+ l.attr('x', newX);
+ l.attr('y', newY);
+ l.set('box', newBox);
+ yPos = newBox.minY;
+ });
+ _.reverse(labels);
+ }
+ }
+
+ private _adjustQ3Label(labels: Shape[], items: LabelItem[], cr: C, coord: Polar): void {
+ const { rx, ry } = cr;
+ const center = coord.getCenter();
+ let totalHeight = 0;
+ const bottom = _.head(labels) ? _.head(labels).getBBox().maxY : ry;
+ _.each(labels, (l) => (totalHeight += l.getBBox().height));
+ // 总高度超出, 溢出的设置隐藏
+ if (totalHeight > ry) {
+ // adjust 椭圆的y半轴 b
+ let yPos = center.y + ry;
+ labels.forEach((l, idx) => {
+ const oldBox = l.getBBox();
+ // fix: 不出现在第四象限
+ const newY = Math.max(yPos - oldBox.height, center.y);
+ // 椭圆公式
+ let newX = center.x - Math.sqrt(1 - Math.pow(newY - center.y, 2) / Math.pow(ry, 2)) * rx;
+ if (_.isNaN(newX)) {
+ newX = oldBox.x - DEFAULT_OFFSET;
+ }
+ newX = Math.min(oldBox.x, newX);
+ // offset between label-text and label-line
+ const newBox = new BBox(newX, newY, oldBox.width, oldBox.height);
+ l.attr('x', newX);
+ l.attr('y', newY);
+ l.set('box', newBox);
+ yPos = newBox.minY;
+ });
+ } else {
+ // 总高度没溢出 调整所有label在椭圆轨道上
+ let yPos = Math.max(center.y + ry, bottom);
+ labels.forEach((l, idx) => {
+ const oldBox = l.getBBox();
+ // y 近似坐标
+ let newY = oldBox.y + (ry - rx) * Math.cos(items[idx].angle - Math.PI / 2);
+ // make label leader-line more nice looking
+ newY = Math.max(newY, oldBox.y);
+ // 不能和上一标签遮挡
+ newY = Math.min(newY, yPos - oldBox.height);
+ // 椭圆公式
+ let newX = center.x - Math.sqrt(1 - Math.pow(newY - center.y, 2) / Math.pow(ry, 2)) * rx;
+ if (_.isNaN(newX)) {
+ newX = oldBox.x - DEFAULT_OFFSET;
+ }
+ newX = Math.min(oldBox.x, newX);
+ // offset between label-text and label-line
+ const newBox = new BBox(newX, newY, oldBox.width, oldBox.height);
+ l.attr('x', newX);
+ l.attr('y', newY);
+ l.set('box', newBox);
+ yPos = newBox.minY;
+ });
+ }
+ }
+
+ private _adjustQ4Label(labels: Shape[], items: LabelItem[], cr: C, coord: Polar): void {
+ const center = coord.getCenter();
+ // 所有标签的累计高度
+ let totalHeight = 0;
+ labels.forEach((l) => (totalHeight += l.getBBox().height));
+ const top = _.last(labels) ? _.last(labels).getBBox().minY : 0;
+ const { rx, ry } = cr;
+ // 总高度超出, 溢出的设置隐藏
+ if (totalHeight > ry) {
+ let yPos = center.y;
+ labels.forEach((l, idx) => {
+ const oldBox = l.getBBox();
+ const newY = yPos - oldBox.height;
+ // 椭圆公式
+ let newX = center.x - Math.sqrt(1 - Math.pow(newY - center.y, 2) / Math.pow(ry, 2)) * rx;
+ if (_.isNaN(newX)) {
+ const prevLabel = labels[idx - 1];
+ newX = prevLabel ? prevLabel.getBBox().x + 8 : oldBox.x - DEFAULT_OFFSET;
+ }
+ // 不能进入第一象限
+ newX = Math.min(newX, center.x);
+ // offset between label-text and label-line
+ const newBox = new BBox(newX, newY, oldBox.width, oldBox.height);
+ l.attr('x', newX);
+ l.attr('y', newY);
+ l.set('box', newBox);
+ yPos = newBox.minY;
+ });
+ } else {
+ // 总高度没溢出 调整所有label在椭圆轨道上
+ // from top to bottom
+ _.reverse(labels);
+ let yPos = center.y - ry;
+ labels.forEach((l, idx) => {
+ const oldBox = l.getBBox();
+ // y 近似坐标
+ let newY = oldBox.y - (ry - rx) * Math.cos(Math.PI + items[idx].angle);
+ // 不能和上一标签遮挡
+ newY = Math.max(newY, yPos);
+ // 椭圆公式
+ let newX = center.x - Math.sqrt(1 - Math.pow(newY - center.y, 2) / Math.pow(ry, 2)) * rx;
+ if (_.isNaN(newX)) {
+ const prevLabel = labels[idx - 1];
+ newX = prevLabel ? prevLabel.getBBox().x - 8 : oldBox.x - DEFAULT_OFFSET;
+ }
+ // 不能进入第一象限
+ newX = Math.min(newX, center.x);
+ // offset between label-text and label-line
+ const newBox = new BBox(newX, newY, oldBox.width, oldBox.height);
+ l.attr('x', newX);
+ l.attr('y', newY);
+ l.set('box', newBox);
+ yPos = newBox.maxY;
+ });
+ _.reverse(labels);
+ }
+ }
+
+ // 获取第一象限和第四象限的长半轴和短半轴
+ private _getQTRadius(labels: Shape[], panel: BBox, coord: Polar): C {
+ // 所有标签的累计高度
+ let totalHeight = 0;
+ labels.forEach((l) => (totalHeight += l.getBBox().height));
+ const top = _.last(labels) ? _.last(labels).getBBox().minY : 0;
+ const bottom = _.head(labels) ? _.head(labels).getBBox().maxY : 0;
+ const offset = DEFAULT_OFFSET;
+ const r = coord.getRadius() + offset;
+ // 椭圆的x半轴 a
+ const rx = r;
+ // 椭圆的y半轴 b
+ let ry = r;
+ // 理想情况下的标签可用空间
+ if (bottom - top < totalHeight) {
+ // adjust 椭圆的y半轴 b
+ ry = r + (top - panel.minY - labels[0].getBBox().height);
+ }
+ return { rx, ry };
+ }
+
+ // 获取第二象限和第三象限的长半轴和短半轴
+ private _getQBRadius(labels: Shape[], panel: BBox, coord: Polar): C {
+ // 所有标签的累计高度
+ let totalHeight = 0;
+ labels.forEach((l) => (totalHeight += l.getBBox().height));
+ const bottom = _.last(labels) ? _.last(labels).getBBox().maxY : 0;
+ const top = _.head(labels) ? _.head(labels).getBBox().minY : 0;
+ const offset = DEFAULT_OFFSET;
+ const r = coord.getRadius() + offset;
+ // 椭圆的x半轴 a
+ const rx = r;
+ // 椭圆的y半轴 b
+ let ry = r;
+ // 理想情况下的标签可用空间
+ if (bottom - top < totalHeight) {
+ // adjust 椭圆的y半轴 b
+ ry = panel.maxY - labels[0].getBBox().maxY;
+ }
+ return { rx, ry };
+ }
+
+ // 处理label遮挡问题
+ protected adjustOverlap(labels: Shape[], panel: BBox, forceVisible?: boolean): void {
+ // clearOverlap;
+ function hideLabel(shape: Shape): void {
+ // 需要隐藏的标签
+ if (!forceVisible) {
+ shape.set('visible', false);
+ }
+ }
+ for (let i = 1; i < labels.length; i++) {
+ const label = labels[i];
+ let overlapArea = 0;
+ for (let j = i - 1; j > 0; j--) {
+ const prev = labels[j];
+ // if the previous one is invisible, skip
+ if (prev.get('visible')) {
+ // fix 增加容忍范围
+ overlapArea = getOverlapArea(prev.getBBox(), label.getBBox()) - MaxOverlapArea;
+ }
+ if (overlapArea > 0 && prev.attr('textAlign') === label.attr('textAlign')) {
+ break;
+ }
+ }
+ if (overlapArea > 0) {
+ hideLabel(label);
+ }
+ }
+ labels.forEach((label) => this.checkInPanel(label, panel));
+ }
+
+ // 超出panel边界的标签默认隐藏
+ protected checkInPanel(label: Shape, panel: BBox): void {
+ if (!inPanel(panel, label.getBBox())) {
+ label.set('visible', false);
+ }
+ }
+
+ // adjust label leader-line
+ public adjustLines(labels: Shape[], labelItems: LabelItem[], labelLines: any) {
+ const coord = this.get('coord');
+ const panel = this.get('element')
+ .get('view')
+ .get('panelRange');
+ _.each(labels, (label, idx: number) => {
+ const labelLine = labelLines[idx];
+ const labelItem = labelItems[idx];
+ // 由于布局调整，修改的只是shape 所以取用使用shape(labelItem is read-only)
+ const path = this.getLinePath(label, labelItem, coord, panel);
+ labelLine.attr('path', path);
+ labelLine.set('visible', label.get('visible'));
+ });
+ }
+
+ // 获取label leader-line
+ private getLinePath(label: Shape, labelItem: LabelItem, coord: Polar, panel: BBox): string {
+ let path = '';
+ // 处理smooth
+ const smooth = labelItem.labelLine ? labelItem.labelLine.smooth : false;
+ const angle = labelItem.angle;
+ const center = coord.getCenter();
+ const r = coord.getRadius();
+ const start = getEndPoint(center, angle, r);
+ // because shape is adjusted, so we should getAttrbutes by shape
+ const offset = this.getOffsetOfLabel(labelItem);
+ const breakAt = getEndPoint(center, angle, r + offset);
+ const end = { x: label.attr('x'), y: label.attr('y') };
+ path = [`M ${start.x}`, `${start.y} Q${breakAt.x}`, `${breakAt.y} ${end.x}`, end.y].join(',');
+ if (!smooth) {
+ const alignment = labelItem.textAlign;
+ const distance = this.getTextLineOffset(labelItem) * (alignment === 'left' ? 1 : -1);
+ const quadrant = getQuadrantByAngle(angle);
+ if (quadrant === 2) {
+ // expected end.y >= start.y, when label is in Quadrant 2. if not, 求 切点
+ if (end.y < start.y) {
+ const theta = Math.PI - angle;
+ breakAt.x = start.x - (start.y - end.y) * Math.tan(theta);
+ }
+ }
+ if (quadrant === 3) {
+ // expected end.x < breakAt.y. if not, adjust
+ if (end.x > breakAt.x) {
+ breakAt.x = end.x;
+ }
+ // normal situation breakAt.y === end.y and end.y <= start.y. if not, adjust
+ if (breakAt.y !== end.y && end.y <= start.y) {
+ breakAt.x = end.x + Math.abs(distance) * 2;
+ breakAt.y = end.y;
+ }
+ }
+ // normal path rule, draw path is "M -> L -> H"
+ path = [`M ${start.x}`, `${start.y} L${breakAt.x}`, `${end.y} H${end.x + distance}`].join(',');
+ if (quadrant === 3) {
+ if (end.y > start.y) {
+ // expected end.y <= start.y, when label is in Quadrant 3. if not, adjust draw path to "M -> H -> L"
+ // 近似将椭圆作为圆计算
+ const controlX = end.x - Math.cos(Math.PI * 2 + angle) * (end.y - start.y);
+ path = [`M ${start.x}`, `${start.y}`, `H${controlX} L${end.x + distance}`, `${end.y}`].join(',');
+ }
+ }
+ }
+ return path;
+ }
+
+
+ public adjustItems(originItems: LabelItem[]) {
+ // could not extends super
+ return originItems;
+ }
+
+ // 获取label offset, 不允许 <= 0
+ public getOffsetOfLabel(labelItem?: LabelItem): number {
+ const offset = (labelItem && labelItem.offset) || DEFAULT_OFFSET;
+ return offset > 0 ? offset : 1;
+ }
+
+ // 获取offset betwee label-text and label-line
+ private getTextLineOffset(labelItem?: LabelItem): number {
+ return Math.min(this.getOffsetOfLabel(labelItem), DEFAULT_TEXT_LINE_OFFSET);
+ }
+}
+
+registerElementLabels('upgrade-pie', UpgradePieLabels);*/
diff --git a/src/plots/pie/component/label/utils.ts b/src/plots/pie/component/label/utils.ts
new file mode 100644
index 0000000000..ba54efa0af
--- /dev/null
+++ b/src/plots/pie/component/label/utils.ts
@@ -0,0 +1,156 @@
+export interface Point {
+ x: number;
+ y: number;
+}
+
+export function getEndPoint(center, angle, r): Point {
+ return {
+ x: center.x + r * Math.cos(angle),
+ y: center.y + r * Math.sin(angle),
+ };
+}
+
+export interface Box {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+}
+
+/** 获取矩形中点 */
+export function getCenter(box: Box): Point {
+ return {
+ x: box.x + box.width / 2,
+ y: box.y + box.height / 2,
+ };
+}
+
+/**
+ * Detect if two lines intersect.
+ *
+ * @return 1: intersect 0: not intersect
+ */
+export function intersectLine(
+ x1: number,
+ y1: number,
+ x2: number,
+ y2: number,
+ x3: number,
+ y3: number,
+ x4: number,
+ y4: number
+): boolean {
+ // http://paulbourke.net/geometry/pointlineplane/
+ const denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
+ const numera = (x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3);
+ const numerb = (x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3);
+ const mua = numera / denom;
+ const mub = numerb / denom;
+ if (!(mua < 0 || mua > 1 || mub < 0 || mub > 1)) {
+ return true;
+ }
+ return false;
+}
+
+/**
+ * Detect if a box intersects with a line.
+ */
+export function boxIntersectLine(box: Box, p1: Point, p2: Point): boolean {
+ const { x, y, width, height } = box;
+ const { x: x1, y: y1 } = p1;
+ const { x: x2, y: y2 } = p2;
+ return (
+ intersectLine(x, y, x + width, y, x1, y1, x2, y2) || // top of label
+ intersectLine(x + width, y, x + width, y + height, x1, y1, x2, y2) || // right
+ intersectLine(x, y + height, x + width, y + height, x1, y1, x2, y2) || // bottom
+ intersectLine(x, y, x, y + height, x1, y1, x2, y2) // left of label
+ );
+}
+
+/**
+ * 计算两个矩形之间的堆叠情况
+ * @return xOverlap x方向重叠大小
+ * @return yOverlap y方向重叠大小
+ * @return xSign aBox和bBox x方向位置情况，xSign > 0 means aBox is on the left of bBox
+ * @return ySign aBox和bBox x方向位置情况，ySign > 0 means aBox is on the top of bBox
+ */
+export function getOverlapInfo(
+ a: Box,
+ b: Box,
+ margin = 0
+): { xOverlap: number; yOverlap: number; xSign: number; ySign: number } {
+ const xOverlap = Math.max(
+ 0,
+ Math.min(a.x + a.width + margin, b.x + b.width + margin) - Math.max(a.x - margin, b.x - margin)
+ );
+ const yOverlap = Math.max(
+ 0,
+ Math.min(a.y + a.height + margin, b.y + b.height + margin) - Math.max(a.y - margin, b.y - margin)
+ );
+
+ return { xOverlap, yOverlap, xSign: b.x - a.x, ySign: b.y - a.y };
+}
+
+export function getOverlapArea(a: Box, b: Box, margin = 0): number {
+ const xOverlap = Math.max(
+ 0,
+ Math.min(a.x + a.width + margin, b.x + b.width + margin) - Math.max(a.x - margin, b.x - margin)
+ );
+ const yOverlap = Math.max(
+ 0,
+ Math.min(a.y + a.height + margin, b.y + b.height + margin) - Math.max(a.y - margin, b.y - margin)
+ );
+ return xOverlap * yOverlap;
+}
+
+/**
+ * Determine the index of quadrants which point placed by angle of point.
+ * -------------
+ * | 3 | 0 |
+ * -------------
+ * | 2 | 1 |
+ * -------------
+ *
+ * @param {number} angle
+ * @return {number} the index of quadrants, always in range `<0, 3>`
+ */
+export function getQuadrantByAngle(angle: number): number {
+ const left = angle > Math.PI / 2 || angle < -Math.PI / 2;
+ // fix angle > Math.PI
+ const top = angle < 0 || angle > Math.PI;
+ let index: number;
+
+ if (left) {
+ if (top) {
+ // Top left
+ index = 3;
+ } else {
+ // Bottom left
+ index = 2;
+ }
+ } else {
+ if (top) {
+ // Top right
+ index = 0;
+ } else {
+ // Bottom right
+ index = 1;
+ }
+ }
+
+ return index;
+}
+
+/**
+ * 粗略地判断是否在panel内部
+ * @param panel
+ * @param shape
+ */
+export function inPanel(panel: Box, shape: Box) {
+ return (
+ panel.x < shape.x &&
+ panel.x + panel.width > shape.x + shape.width &&
+ panel.y < shape.y &&
+ panel.y + panel.height > shape.y + shape.height
+ );
+}
diff --git a/src/plots/pie/layer.ts b/src/plots/pie/layer.ts
index 393dfcecc3..e50662ccfd 100644
--- a/src/plots/pie/layer.ts
+++ b/src/plots/pie/layer.ts
@@ -10,8 +10,9 @@ import { extractScale } from '../../util/scale';
import SpiderLabel from './component/label/spider-label';
import * as EventParser from './event';
import './theme';
+import { LineStyle } from '../line/layer';
-interface PieStyle {
+interface PieStyle extends LineStyle {
stroke?: string;
lineWidth?: number;
}
@@ -168,8 +169,8 @@ export default class PieLayer extends
return;
}
if (labelConfig.type === 'inner') {
- const offsetBase = -8;
- labelConfig.offset = labelConfig.offset ? offsetBase + labelConfig.offset : offsetBase;
+ const offsetBase = this.getDefaultLabelInnerOffset();
+ labelConfig.offset = labelConfig.offset ? labelConfig.offset : offsetBase;
}
// 此处做个 hack 操作, 防止g2 controller层找不到未注册的inner,outter,和spider Label
@@ -189,6 +190,22 @@ export default class PieLayer extends
const props = this.options;
return props.label && props.label.visible === true && props.label.type !== 'spider';
}
+
+ protected getDefaultLabelInnerOffset() {
+ let size = 0;
+ const { width, height } = this;
+ const { padding } = this.options;
+ if (width < height) {
+ size = width - padding[1] - padding[3];
+ } else {
+ size = height - padding[0] - padding[2];
+ }
+ const offset = Math.round((size / 8) * this.options.radius * -1);
+ if (isNaN(offset) || offset === Infinity) {
+ return 0;
+ }
+ return offset;
+ }
}
registerPlotType('pie', PieLayer);
diff --git a/src/plots/radar/layer.ts b/src/plots/radar/layer.ts
index e087a93458..467e0ad8af 100644
--- a/src/plots/radar/layer.ts
+++ b/src/plots/radar/layer.ts
@@ -7,18 +7,7 @@ import { getComponent } from '../../components/factory';
import { getGeom } from '../../geoms/factory';
import { extractScale } from '../../util/scale';
import * as EventParser from './event';
-
-interface LineStyle {
- opacity?: number;
- lineDash?: number[];
-}
-
-interface PointStyle {
- shape?: string;
- size?: number;
- color?: string;
- opacity?: string;
-}
+import { PointStyle, LineStyle } from '../line/layer';
interface FillStyle {
shape?: string;
@@ -39,11 +28,16 @@ export interface RadarViewConfig extends ViewConfig {
/** 折线图形样式 */
line?: {
visible?: boolean;
+ size: number;
+ color: string;
style?: LineStyle;
};
/** 数据点图形样式 */
point?: {
- visible: boolean;
+ visible?: boolean;
+ shape?: string;
+ size?: number;
+ color?: string;
style?: PointStyle;
};
/** area图形样式 */
@@ -81,7 +75,7 @@ export default class RadarLayer extends ViewLayer {
},
forceFit: true,
padding: 'auto',
- radius: 0.6,
+ radius: 0.8,
smooth: false,
line: {
visible: true,
@@ -246,53 +240,6 @@ export default class RadarLayer extends ViewLayer {
this.setConfig('axes', axesConfig);
}
- /* protected _axis() {
- const props = this.initialProps;
- const axesConfig = { fields: {} };
- if (props.angleAxis.visible === false) {
- axesConfig.fields[props.angleField] = false;
- } else {
- if (props.angleAxis.style) {
- const styleCfg = this._axisStyleParser(props.angleAxis.style, axesConfig.fields[props.angleField]);
- axesConfig.fields[props.angleField] = _.deepMix(axesConfig.fields[props.angleField], styleCfg);
- }
- if (props.angleAxis.formatter) {
- const formatter = props.angleAxis.formatter;
- axesConfig.fields[props.angleField].label = function(text, index, total) {
- const returnCfg = {
- text: formatter(text),
- } as Point;
- if (props.angleAxis.style && props.angleAxis.style.label) {
- returnCfg.textStyle = props.angleAxis.style.label;
- }
- return returnCfg;
- };
- }
- }
-
- if (props.radiusAxis.visible === false) {
- axesConfig.fields[props.radiusField] = false;
- } else {
- if (props.radiusAxis.style) {
- const styleCfg = this._axisStyleParser(props.radiusAxis.style, axesConfig.fields[props.radiusField]);
- axesConfig.fields[props.radiusField] = _.deepMix(axesConfig.fields[props.radiusField], styleCfg);
- }
- if (props.radiusAxis.formatter) {
- const formatter = props.radiusAxis.formatter;
- axesConfig.fields[props.radiusField].label = function(text, index, total) {
- const returnCfg = {
- text: formatter(text),
- } as Point;
- if (props.radiusAxis.style && props.radiusAxis.style.label) {
- returnCfg.textStyle = props.radiusAxis.style.label;
- }
- return returnCfg;
- };
- }
- }
- this.setConfig('axes', axesConfig);
- }*/
-
protected addGeometry() {
const props = this.options;
/** 配置面积 */
@@ -338,42 +285,6 @@ export default class RadarLayer extends ViewLayer {
protected parserEvents(eventParser) {
super.parserEvents(EventParser);
}
-
- private axisStyleParser(styleProps, axisConfig) {
- const styleCfg = {} as Point;
- if (styleProps.line) {
- if (axisConfig.line === null) {
- axisConfig.line = {};
- }
- styleCfg.line = styleProps.line;
- }
- if (styleProps.grid) {
- if (axisConfig.grid === null) {
- axisConfig.grid = {};
- }
- styleCfg.grid = styleProps.grid;
- }
- if (styleProps.title) {
- if (axisConfig.title === null) {
- axisConfig.title = {};
- }
- styleCfg.title = styleProps.title;
- }
- if (styleProps.tickLine) {
- if (axisConfig.tickLine === null) {
- axisConfig.tickLine = {};
- }
- styleCfg.tickLine = styleProps.tickLine;
- }
- if (styleProps.label) {
- if (axisConfig.label === null) {
- axisConfig.label = {};
- }
- styleCfg.label = {} as Point;
- styleCfg.label.textStyle = styleProps.label;
- }
- return styleCfg;
- }
}
registerPlotType('radar', RadarLayer);
diff --git a/src/plots/ring/component/annotation/central-text-template.ts b/src/plots/ring/component/statistic-template.ts
similarity index 100%
rename from src/plots/ring/component/annotation/central-text-template.ts
rename to src/plots/ring/component/statistic-template.ts
diff --git a/src/plots/ring/layer.ts b/src/plots/ring/layer.ts
index cca8422c08..f4456d8c20 100644
--- a/src/plots/ring/layer.ts
+++ b/src/plots/ring/layer.ts
@@ -5,12 +5,12 @@ import { LayerConfig } from '../../base/layer';
import PieLayer, { PieViewConfig } from '../pie/layer';
import responsiveMethods from './apply-responsive';
import './apply-responsive/theme';
-import * as centralTextTemplate from './component/annotation/central-text-template';
+import * as statisticTemplate from './component/statistic-template';
import * as EventParser from './event';
export interface RingViewConfig extends PieViewConfig {
innerRadius?: number;
- annotation?: any; // FIXME:
+ statistic?: any; //FIXME: 指标卡
}
export interface RingLayerConfig extends RingViewConfig, LayerConfig {}
@@ -29,32 +29,33 @@ const PLOT_GEOM_MAP = {
export default class RingLayer extends PieLayer {
public static centralId = 0;
+ public type: string = 'ring';
+ private statistic: any; // 保存指标卡实例用于响应交互
+ private statisticClass: string; // 指标卡的class,用于重点文本容器的唯一标识，一个页面多个环图时，共用 class 交互会有问题。
public static getDefaultOptions(): any {
return _.deepMix({}, super.getDefaultOptions(), {
radius: 0.8,
innerRadius: 0.64,
+ statistic: {
+ visible: true,
+ triggerOn: 'mouseenter',
+ triggerOff: 'mouseleave',
+ },
});
}
public getOptions(props: T) {
const options = super.getOptions(props);
- if (!props.innerRadius && props.radius) {
- return _.deepMix({}, options, {
- innerRadius: (props.radius * 0.8).toFixed(2),
- });
- }
- return options;
+ // @ts-ignore
+ const defaultOptions = this.constructor.getDefaultOptions();
+ return _.deepMix({}, options, defaultOptions, props);
}
- public type: string = 'ring';
- private centralText: any; // 保存中心文本实例用于响应交互
- private centralClass: string; // 中心文本的class,用于重点文本容器的唯一标识，一个页面多个环图时，共用 class 交互会有问题。
-
public beforeInit() {
super.beforeInit();
RingLayer.centralId++;
- this.centralClass = `centralclassId${RingLayer.centralId}`;
+ this.statisticClass = `statisticClassId${RingLayer.centralId}`;
const props = this.options;
/** 响应式图形 */
if (props.responsive && props.padding !== 'auto') {
@@ -65,22 +66,24 @@ export default class RingLayer exte
public afterInit() {
super.afterInit();
/** 处理环图中心文本响应交互的问题 */
- if (this.centralText && this.centralText.onActive) {
+ if (this.statistic && this.statistic.visible && this.statistic.triggerOn) {
+ const triggerOnEvent = this.statistic.triggerOn;
this.view.on(
- 'interval:mouseenter',
+ `interval:${triggerOnEvent}`,
_.debounce((e) => {
- const displayData = this.parseCentralTextData(e.data._origin);
- const htmlString = this.getCenterHtmlString(displayData);
- document.getElementsByClassName(this.centralClass)[0].innerHTML = htmlString;
+ const displayData = this.parseStatisticData(e.data._origin);
+ const htmlString = this.getStatisticHtmlString(displayData);
+ document.getElementsByClassName(this.statisticClass)[0].innerHTML = htmlString;
}, 150)
);
+ const triggerOffEvent = this.statistic.triggerOff ? this.statistic.triggerOff : 'mouseleave';
this.view.on(
- 'interval:mouseleave',
+ `interval:${triggerOffEvent}`,
_.debounce((e) => {
const totalValue = this.getTotalValue();
- const displayData = this.parseCentralTextData(totalValue);
- const htmlString = this.getCenterHtmlString(displayData);
- document.getElementsByClassName(this.centralClass)[0].innerHTML = htmlString;
+ const displayData = this.parseStatisticData(totalValue);
+ const htmlString = this.getStatisticHtmlString(displayData);
+ document.getElementsByClassName(this.statisticClass)[0].innerHTML = htmlString;
}, 150)
);
}
@@ -106,31 +109,31 @@ export default class RingLayer exte
}
protected annotation() {
+ const annotationConfigs = [];
const props = this.options;
- if (props.annotation) {
- const annotationConfigs = [];
- _.each(props.annotation, (a) => {
- if (a.type === 'centralText') {
- const centralText = this.drawCentralText(a);
- annotationConfigs.push(centralText);
- this.centralText = centralText;
- }
- });
- this.setConfig('annotations', annotationConfigs);
+ if (props.statistic && props.statistic.visible) {
+ const statistic = this.drawStatistic(props.statistic);
+ annotationConfigs.push(statistic);
+ this.statistic = statistic;
}
+ this.setConfig('annotations', annotationConfigs);
}
protected parserEvents(eventParser) {
super.parserEvents(EventParser);
}
- private drawCentralText(config) {
- const centralText: IAttrs = {
- type: 'html',
- top: true,
- position: ['50%', '50%'],
- onActive: false,
- };
+ private drawStatistic(config) {
+ const statistic: IAttrs = _.deepMix(
+ {},
+ {
+ type: 'html',
+ top: true,
+ position: ['50%', '50%'],
+ triggerOn: 'mouseenter',
+ },
+ config
+ );
/** 中心文本内容 */
let displayData;
if (config.content) {
@@ -138,22 +141,21 @@ export default class RingLayer exte
} else {
/** 用户没有指定文本内容时，默认显示总计 */
const data = this.getTotalValue();
- displayData = this.parseCentralTextData(data);
+ displayData = this.parseStatisticData(data);
}
/** 中心文本显示 */
let htmlString;
if (config.htmlContent) {
htmlString = config.htmlContent(displayData);
} else {
- htmlString = this.getCentralTextTemplate(displayData);
+ htmlString = this.getStatisticTemplate(displayData);
}
- centralText.html = htmlString;
+ statistic.html = htmlString;
/** 是否响应状态量 */
- if (config.onActive) {
- centralText.onActive = config.onActive;
+ if (statistic.triggerOn) {
this.setConfig('tooltip', false);
}
- return centralText;
+ return statistic;
}
/** 获取总计数据 */
@@ -168,36 +170,37 @@ export default class RingLayer exte
return data;
}
- private parseCentralTextData(data) {
+ private parseStatisticData(data) {
const props = this.options;
const angleField = props.angleField;
return props.colorField ? { name: data[props.colorField], value: data[angleField] } : data[angleField];
}
- private getCentralTextTemplate(displayData) {
- const size = this.getCentralTextSize();
+ private getStatisticTemplate(displayData) {
+ const size = this.getStatisticSize();
let htmlString;
/** 如果文本内容为string或单条数据 */
if (_.isString(displayData)) {
- htmlString = centralTextTemplate.getSingleDataTemplate(displayData, this.centralClass, size);
+ htmlString = statisticTemplate.getSingleDataTemplate(displayData, this.statisticClass, size);
} else if (_.isObject(displayData) && _.keys(displayData).length === 2) {
/** 如果文本内容为两条数据 */
const content = displayData as IAttrs;
- htmlString = centralTextTemplate.getTwoDataTemplate(content.name, content.value, this.centralClass, size);
+ htmlString = statisticTemplate.getTwoDataTemplate(content.name, content.value, this.statisticClass, size);
}
/** 更为复杂的文本要求用户自行制定html模板 */
return htmlString;
}
/** 获取中心文本的htmlString */
- private getCenterHtmlString(_displayData): string {
- const onActiveConfig = this.centralText.onActive;
+ private getStatisticHtmlString(_displayData): string {
+ const triggerOnConfig = this.statistic.triggerOn;
let htmlString: string;
- if (_.isBoolean(onActiveConfig)) {
- htmlString = this.getCentralTextTemplate(_displayData);
- } else if (_.isFunction(onActiveConfig)) {
- htmlString = onActiveConfig(_displayData);
- htmlString = `${htmlString}
`;
+ if (_.isString(triggerOnConfig)) {
+ htmlString = this.getStatisticTemplate(_displayData);
+ }
+ if (_.isFunction(triggerOnConfig)) {
+ htmlString = triggerOnConfig(_displayData);
+ htmlString = `${htmlString}
`;
}
return htmlString;
}
@@ -210,9 +213,25 @@ export default class RingLayer exte
});
}
- private getCentralTextSize() {
+ private getStatisticSize() {
return this.width * this.options.radius;
}
+
+ protected getDefaultLabelInnerOffset() {
+ let size = 0;
+ const { width, height } = this;
+ const { padding } = this.options;
+ if (width < height) {
+ size = width - padding[1] - padding[3];
+ } else {
+ size = height - padding[0] - padding[2];
+ }
+ const offset = Math.round((size / 8) * (this.options.radius - this.options.radius * this.options.innerRadius) * -1);
+ if (isNaN(offset) || offset === Infinity) {
+ return 0;
+ }
+ return offset;
+ }
}
registerPlotType('ring', RingLayer);