From 25e1b4269ba2aca3c10d634aaa5dec0f3940b163 Mon Sep 17 00:00:00 2001 From: Kasmine <736929286@qq.com> Date: Sun, 24 Jan 2021 12:11:26 +0800 Subject: [PATCH] =?UTF-8?q?docs(gauge):=20=E4=BB=AA=E8=A1=A8=E7=9B=98?= =?UTF-8?q?=E6=96=87=E6=A1=A3=20(#2261)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/plots/gauge.zh.md | 12 ++- docs/common/axis.zh.md | 2 +- docs/common/shape-style.en.md | 1 + docs/common/shape-style.zh.md | 1 + docs/manual/plots/gauge.en.md | 97 +++++++++++++++++++ docs/manual/plots/gauge.zh.md | 97 +++++++++++++++++++ .../dynamic-plots/basic/demo/dynamic-gauge.ts | 56 +++++++++++ examples/dynamic-plots/basic/demo/meta.json | 8 ++ examples/progress-plots/gauge/demo/basic.ts | 20 +--- examples/progress-plots/gauge/demo/complex.ts | 10 +- examples/progress-plots/gauge/demo/meta.json | 12 +-- .../gauge/demo/single-gradient.ts | 2 +- 12 files changed, 283 insertions(+), 35 deletions(-) create mode 100644 docs/manual/plots/gauge.en.md create mode 100644 docs/manual/plots/gauge.zh.md create mode 100644 examples/dynamic-plots/basic/demo/dynamic-gauge.ts diff --git a/docs/api/plots/gauge.zh.md b/docs/api/plots/gauge.zh.md index cd5558d64c..decc4771a4 100644 --- a/docs/api/plots/gauge.zh.md +++ b/docs/api/plots/gauge.zh.md @@ -52,13 +52,17 @@ order: 22 | ticks | _number[]_ | 辅助圆弧显示数字数组 | | color | _string \|string[]_ | 辅助圆弧的颜色色板，按照色板顺序取值; 当设置 ticks 时，color 无法使用回调的方式 | - + + +### 图表组件 #### axis **optional** _object_ 指标辅助轴样式。 +- 💡 在仪表盘中，axis 组件可以使用的配置有：`label`, `tickLine`, `subTickLine`, 其他配置项不建议在仪表盘中使用。 +- 💡 关于 `tick` 的设置, 可以直接在 `range.ticks` 中进行配置。 `markdown:docs/common/axis.zh.md` @@ -66,10 +70,10 @@ order: 22 **optional** _object_ -仪表盘指示器样式配置。按照组件分成为： +仪表盘**指示器**样式配置。按照组件分成为： -- `pointer`：指示器中的指针样式配置 -- `pin`：指示器中的圆盘样式配置 +- `pointer`：指示器中的**指针**样式配置 +- `pin`：指示器中的**圆盘**样式配置 他们都有以下配置项： diff --git a/docs/common/axis.zh.md b/docs/common/axis.zh.md index 74d5cb93bd..f667225d3d 100644 --- a/docs/common/axis.zh.md +++ b/docs/common/axis.zh.md @@ -4,7 +4,7 @@ 适用于直角坐标系，设置坐标轴的位置。 -#### label +##### label _AxisLabelCfg | null_ **optional** diff --git a/docs/common/shape-style.en.md b/docs/common/shape-style.en.md index 102bb51724..9f1258cdf1 100644 --- a/docs/common/shape-style.en.md +++ b/docs/common/shape-style.en.md @@ -3,6 +3,7 @@ | Properties | Type | Description | | ------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fill | _string_ | Fill color of the shape | +| r | _number_ | used in `point`, means the radius of geometry | | fillOpacity | _number_ | Fill opacity of the shape | | stroke | _string_ | Stroke color of the shape | | lineWidth | _number_ | The width of the stroke of the shape | diff --git a/docs/common/shape-style.zh.md b/docs/common/shape-style.zh.md index 42802a5f0e..b938aca0cc 100644 --- a/docs/common/shape-style.zh.md +++ b/docs/common/shape-style.zh.md @@ -3,6 +3,7 @@ | 属性名 | 类型 | 介绍 | | ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | | fill | _string_ | 图形的填充色 | +| r | _number_ | 用于 `point`, 代表图形的半径大小 | | fillOpacity | _number_ | 图形的填充透明度 | | stroke | _string_ | 图形的描边 | | lineWidth | _number_ | 图形描边的宽度 | diff --git a/docs/manual/plots/gauge.en.md b/docs/manual/plots/gauge.en.md new file mode 100644 index 0000000000..0e64942828 --- /dev/null +++ b/docs/manual/plots/gauge.en.md @@ -0,0 +1,97 @@ +--- +title: Gauge +order: 6 +--- + +
+ +
+ + + + + + + + + + + + + + +
+ + +

定义

+

仪表盘(Gauge)是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值。仪表盘图表就像汽车的速度表一样，有一个圆形的表盘及相应的刻度，有一个指针指向当前数值。目前很多的管理报表或报告上都是用这种图表，以直观的表现出某个指标的进度或实际情况。

+

仪表盘的好处在于它能跟人们的常识结合，使大家马上能理解看什么、怎么看。拟物化的方式使图标变得更友好更人性化，正确使用可以提升用户体验。

+
+

数据准备

+

1 个百分比数值

+
+
+ +## Design Guide + +### 用法建议 + +为了视觉上的不拥挤且符合常识，我们建议指针的数量不超过 3 根。 + +## 快速上手 + +
+ +```ts +import { Gauge } from '@antv/g2plot'; + +const gauge = new Gauge('container', { + percent: 0.75, + range: { + color: '#5B8FF9', + }, + statistic: { + content: { + formatter: ({ percent }) => `Rate: ${(percent * 100).toFixed(0)}%`, + }, + }, +}); + +gauge.render(); +``` + +
+ +📊 查看更多示例. + +🎨 仪表盘详细的配置参考 [API 文档](/zh/docs/api/plots/gauge). + +
+ +## 图表特性 + +### 自定义指示器的样式 + +通过设置 `indicator` 来自定义指示器的样式，指示器包含指针 `pointer` 和 指针针头样式。 + +> 目前暂不支持指示器的形状自定义。 + + + +### 自定义辅助圆弧的样式 + +通过设置 `range` 的 `'ticks''` 和 `'color'` 来自定义辅助圆弧的样式 + +Example: + +```ts +// 代表着，0 - 1/3: #F4664A, 1/3 - 2/3: #FAAD14, 2/3 - 1: #30BF78 +{ + range: { + ticks: [0, 1 / 3, 2 / 3, 1], + color: ['#F4664A', '#FAAD14', '#30BF78'], + }, +} +``` + + diff --git a/docs/manual/plots/gauge.zh.md b/docs/manual/plots/gauge.zh.md new file mode 100644 index 0000000000..1627d0a663 --- /dev/null +++ b/docs/manual/plots/gauge.zh.md @@ -0,0 +1,97 @@ +--- +title: 仪表盘 +order: 6 +--- + +
+ +
+ + + + + + + + + + + + + + +
+ + +

定义

+

仪表盘(Gauge)是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值。仪表盘图表就像汽车的速度表一样，有一个圆形的表盘及相应的刻度，有一个指针指向当前数值。目前很多的管理报表或报告上都是用这种图表，以直观的表现出某个指标的进度或实际情况。

+

仪表盘的好处在于它能跟人们的常识结合，使大家马上能理解看什么、怎么看。拟物化的方式使图标变得更友好更人性化，正确使用可以提升用户体验。

+
+

数据准备

+

1 个百分比数值

+
+
+ +## 设计指引 + +### 用法建议 + +为了视觉上的不拥挤且符合常识，我们建议指针的数量不超过 3 根。 + +## 快速上手 + +
+ +```ts +import { Gauge } from '@antv/g2plot'; + +const gauge = new Gauge('container', { + percent: 0.75, + range: { + color: '#5B8FF9', + }, + statistic: { + content: { + formatter: ({ percent }) => `Rate: ${(percent * 100).toFixed(0)}%`, + }, + }, +}); + +gauge.render(); +``` + +
+ +📊 查看更多示例. + +🎨 仪表盘详细的配置参考 [API 文档](/zh/docs/api/plots/gauge). + +
+ +## 图表特性 + +### 自定义指示器的样式 + +通过设置 `indicator` 来自定义指示器的样式，指示器包含指针 `pointer` 和 指针针头样式。 + +> 目前暂不支持指示器的形状自定义。 + + + +### 自定义辅助圆弧的样式 + +通过设置 `range` 的 `'ticks''` 和 `'color'` 来自定义辅助圆弧的样式 + +Example: + +```ts +// 代表着，0 - 1/3: #F4664A, 1/3 - 2/3: #FAAD14, 2/3 - 1: #30BF78 +{ + range: { + ticks: [0, 1 / 3, 2 / 3, 1], + color: ['#F4664A', '#FAAD14', '#30BF78'], + }, +} +``` + + diff --git a/examples/dynamic-plots/basic/demo/dynamic-gauge.ts b/examples/dynamic-plots/basic/demo/dynamic-gauge.ts new file mode 100644 index 0000000000..713eac1352 --- /dev/null +++ b/examples/dynamic-plots/basic/demo/dynamic-gauge.ts @@ -0,0 +1,56 @@ +import { Gauge } from '@antv/g2plot'; + +const color = ['#F4664A', '#FAAD14', '#30BF78']; +const getColor = (percent) => { + return percent < 0.4 ? color[0] : percent < 0.6 ? color[1] : color[2]; +}; +const gauge = new Gauge('container', { + percent: 0.2, + range: { + color: getColor(0.2), + }, + indicator: { + pointer: { + style: { + stroke: '#D0D0D0', + }, + }, + pin: { + style: { + stroke: '#D0D0D0', + }, + }, + }, + axis: { + label: { + formatter(v) { + return Number(v) * 100; + }, + }, + subTickLine: { + count: 3, + }, + }, + statistic: { + content: { + formatter: ({ percent }) => `Rate: ${(percent * 100).toFixed(0)}%`, + }, + style: { + fontSize: 60, + }, + }, + animation: false, +}); + +gauge.render(); + +let data = 0.2; +const interval = setInterval(() => { + if (data >= 0.85) { + clearInterval(interval); + } else { + data += 0.001; + gauge.changeData(data); + gauge.update({ range: { color: getColor(data) } }); + } +}, 100); diff --git a/examples/dynamic-plots/basic/demo/meta.json b/examples/dynamic-plots/basic/demo/meta.json index 667d433ae7..d20f7e2ef2 100644 --- a/examples/dynamic-plots/basic/demo/meta.json +++ b/examples/dynamic-plots/basic/demo/meta.json @@ -27,6 +27,14 @@ "en": "Area updating with dynamic" }, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ld0NQtdLO0/mianjitugengxinshuju-after.gif" + }, + { + "filename": "dynamic-gauge.ts", + "title": { + "zh": "动态更新的仪表盘", + "en": "Gauge updating with dynamic" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*O2aDSImbWDgAAAAAAAAAAAAAARQnAQ" } ] } diff --git a/examples/progress-plots/gauge/demo/basic.ts b/examples/progress-plots/gauge/demo/basic.ts index 713eac1352..d4279b824a 100644 --- a/examples/progress-plots/gauge/demo/basic.ts +++ b/examples/progress-plots/gauge/demo/basic.ts @@ -1,13 +1,9 @@ import { Gauge } from '@antv/g2plot'; -const color = ['#F4664A', '#FAAD14', '#30BF78']; -const getColor = (percent) => { - return percent < 0.4 ? color[0] : percent < 0.6 ? color[1] : color[2]; -}; const gauge = new Gauge('container', { - percent: 0.2, + percent: 0.75, range: { - color: getColor(0.2), + color: '#30BF78', }, indicator: { pointer: { @@ -39,18 +35,6 @@ const gauge = new Gauge('container', { fontSize: 60, }, }, - animation: false, }); gauge.render(); - -let data = 0.2; -const interval = setInterval(() => { - if (data >= 0.85) { - clearInterval(interval); - } else { - data += 0.001; - gauge.changeData(data); - gauge.update({ range: { color: getColor(data) } }); - } -}, 100); diff --git a/examples/progress-plots/gauge/demo/complex.ts b/examples/progress-plots/gauge/demo/complex.ts index 178c9a0728..9a0e7304ce 100644 --- a/examples/progress-plots/gauge/demo/complex.ts +++ b/examples/progress-plots/gauge/demo/complex.ts @@ -51,11 +51,11 @@ const gauge = new Gauge('container', { }); gauge.render(); -let data = 0; +let data = 0.7; const interval = setInterval(() => { - if (data >= 1) { + if (data >= 1.5) { clearInterval(interval); } - data += 0.01; - gauge.changeData(data); -}, 400); + data += 0.005; + gauge.changeData(data > 1 ? data - 1 : data); +}, 100); diff --git a/examples/progress-plots/gauge/demo/meta.json b/examples/progress-plots/gauge/demo/meta.json index 4090450da6..a2ec7e0212 100644 --- a/examples/progress-plots/gauge/demo/meta.json +++ b/examples/progress-plots/gauge/demo/meta.json @@ -8,23 +8,23 @@ "filename": "basic.ts", "title": { "zh": "仪表盘", - "en": "Gauge plot" + "en": "Basic gauge plot" }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*O2aDSImbWDgAAAAAAAAAAAAAARQnAQ" + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/xDdGhZK84X/9746c5d8-4341-4c04-9528-87bcab55eedb.png" }, { "filename": "single-gradient.ts", "title": { "zh": "仪表盘(单色渐变)", - "en": "Gradient Gauge plot" + "en": "Gradient gauge plot" }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*GpkSQJ2OqrEAAAAAAAAAAAAAARQnAQ" + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/pe4K9%26vl6Y/f79762f9-7ff4-4e6d-a11d-bf79be45d83f.png" }, { "filename": "custom-color.ts", "title": { "zh": "仪表盘(多色)", - "en": "Gauge plot - custom color" + "en": "Gauge plot with custom color" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*2pQHSJvYqwwAAAAAAAAAAAAAARQnAQ" }, @@ -32,7 +32,7 @@ "filename": "complex.ts", "title": { "zh": "自定义配置的仪表盘", - "en": "Animated Gauge plot" + "en": "Animated gauge plot" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*LVeFSYBPDBAAAAAAAAAAAAAAARQnAQ" } diff --git a/examples/progress-plots/gauge/demo/single-gradient.ts b/examples/progress-plots/gauge/demo/single-gradient.ts index 7786710879..be1d2dd9f3 100644 --- a/examples/progress-plots/gauge/demo/single-gradient.ts +++ b/examples/progress-plots/gauge/demo/single-gradient.ts @@ -3,7 +3,7 @@ import { Gauge } from '@antv/g2plot'; const gauge = new Gauge('container', { percent: 0.75, range: { - color: 'l(0) 0:#bde8ff 1:#9ec9ff', + color: 'l(0) 0:#B8E1FF 1:#3D76DD', }, startAngle: Math.PI, endAngle: 2 * Math.PI,