You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2021/03/08 09:27:11 UTC
[echarts-doc] branch feat/new-border-options created (now c2793dc)
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a change to branch feat/new-border-options
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git.
at c2793dc feat(border): add new border options brought by v5.(en)
This branch includes the following new commits:
new 9c1736b feat(border): add new border options brought by v5.(zh)
new c2793dc feat(border): add new border options brought by v5.(en)
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 01/02: feat(border): add new border options brought
by v5.(zh)
Posted by wa...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch feat/new-border-options
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit 9c1736b674aa05f9d3817c49ee26b43b85b428f7
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Mon Mar 8 16:43:26 2021 +0800
feat(border): add new border options brought by v5.(zh)
---
zh/option/partial/item-style.md | 11 +--
zh/option/partial/line-border-style.md | 150 +++++++++++++++++++++++++++++++++
zh/option/partial/line-style.md | 15 ++--
zh/option/partial/text-style.md | 17 ++++
4 files changed, 178 insertions(+), 15 deletions(-)
diff --git a/zh/option/partial/item-style.md b/zh/option/partial/item-style.md
index c009c10..ca08858 100644
--- a/zh/option/partial/item-style.md
+++ b/zh/option/partial/item-style.md
@@ -35,11 +35,12 @@ ${name}图形的描边颜色。支持的颜色格式同 `color`，不支持回
${name}描边线宽。为 0 时无描边。
-#${prefix} borderType(string) = 'solid'
-
-<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
-
-柱条的描边类型，默认为实线，支持 `'solid'`, `'dashed'`, `'dotted'`。
+{{ use: partial-line-border-style(
+ prefix = ${prefix},
+ name = ${name},
+ type = 'border',
+ defaultType = ${defaultType}
+) }}
{{ use: partial-style-shadow-opacity(
prefix = ${prefix},
diff --git a/zh/option/partial/line-border-style.md b/zh/option/partial/line-border-style.md
new file mode 100644
index 0000000..3dbc80e
--- /dev/null
+++ b/zh/option/partial/line-border-style.md
@@ -0,0 +1,150 @@
+{{ target: partial-line-border-style }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderType(string|number|Array) = ${defaultType|default("'solid'")}
+{{ elif: ${type} === 'text' }}
+#${prefix} textBorderType(string|number|Array) = ${defaultType|default("'solid'")}
+{{ else }}
+#${prefix} type(string|number|Array) = ${defaultType|default("'solid'")}
+{{ /if }}
+
+<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
+
+{{ if: ${type} === 'border' }}
+${name}描边类型。
+{{ elif: ${type} === 'text' }}
+文字本身的描边类型。
+{{ else }}
+线的类型。
+{{ /if }}
+
+可选：
++ `'solid'`
++ `'dashed'`
++ `'dotted'`
+
+自 `v5.0.0` 开始，也可以是 `number` 或者 `number` 数组，用以指定线条的 [dash array](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray)，配合 {{ if: ${type} === 'border' }}
+`borderDashOffset`
+{{ elif: ${type} === 'text' }}
+`textBorderDashOffset`
+{{ else }}
+`dashOffset`
+{{ /if }} 可实现更灵活的虚线效果。
+
+例如：
+```js
+{
+ {{ if: ${type} === 'border' }}borderType{{ elif: ${type} === 'text' }}textBorderType{{ else }}type{{ /if }}: [5, 10],
+ {{ if: ${type} === 'border' }}borderDashOffset{{ elif: ${type} === 'text' }}textBorderDashOffset{{ else }}dashOffset{{ /if }}: 5
+}
+```
+
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderDashOffset(number) = 0
+{{ elif: ${type} === 'text' }}
+#${prefix} textBorderDashOffset(number) = 0
+{{ else }}
+#${prefix} dashOffset(number) = 0
+{{ /if }}
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+<ExampleUIControlNumber min="0" step="1" default="0" />
+
+用于设置虚线的偏移量，可搭配 {{ if: ${type} === 'border' }}
+`borderType`
+{{ elif: ${type} === 'text' }}
+`textBorderType`
+{{ else }}
+`type`
+{{ /if }} 指定 dash array 实现灵活的虚线效果。
+
+更多详情可以参考 MDN [lineDashOffset](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)。
+
+
+{{ if: !${noCap} }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderCap(string) = 'butt'
+{{ else }}
+#${prefix} cap(string) = 'butt'
+{{ /if }}
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+<ExampleUIControlEnum default="butt" options="butt,round,square" />
+
+用于指定线段末端的绘制方式，可以是：
++ `'butt'`: 线段末端以方形结束。
++ `'round'`: 线段末端以圆形结束。
++ `'square'`: 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
+
+默认值为 `'butt'`。 更多详情可以参考 MDN [lineCap](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineCap)。
+
+{{ /if }}
+
+
+{{ if: !${noJoin} }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderJoin(string) = 'bevel'
+{{ else }}
+#${prefix} join(string) = 'bevel'
+{{ /if }}
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+<ExampleUIControlEnum default="bevel" options="bevel,round,miter" />
+
+用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。
+
+可以是：
++ `'bevel'`: 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
++ `'round'`: 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
++ `'miter'`: 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 {{ if: ${type} === 'border' }}
+`borderMiterLimit`
+{{ else }}
+`miterLimit`
+{{ /if }} 属性看到效果。
+
+默认值为 `'bevel'`。 更多详情可以参考 MDN [lineJoin](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineJoin)。
+
+{{ /if }}
+
+
+{{ if: !${noMiterLimit} }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderMiterLimit(number) = 10
+{{ else }}
+#${prefix} miterLimit(number) = 10
+{{ /if }}
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+<ExampleUIControlNumber min="0" step="1" default="10" />
+
+用于设置斜接面限制比例。只有当 {{ if: ${type} === 'border' }}
+`borderJoin`
+{{ else }}
+`join`
+{{ /if }} 为 `miter` 时，{{ if: ${type} === 'border' }}
+`borderMiterLimit`
+{{ else }}
+`miterLimit`
+{{ /if }} 才有效。
+
+默认值为 `10`。负数、`0`、`Infinity` 和 `NaN` 均会被忽略。
+
+更多详情可以参考 MDN [miterLimit](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/miterLimit)。
+
+{{ /if }}
\ No newline at end of file
diff --git a/zh/option/partial/line-style.md b/zh/option/partial/line-style.md
index 340b26d..3e5e2a5 100644
--- a/zh/option/partial/line-style.md
+++ b/zh/option/partial/line-style.md
@@ -23,16 +23,11 @@ ${name}线的颜色。{{ if: ${useColorPalatte} }} 默认从[option.color 调色
${name}线宽。
-#${prefix} type(string) = ${defaultType|default('solid')}
-
-<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
-
-${name}线的类型。
-
-可选：
-+ `'solid'`
-+ `'dashed'`
-+ `'dotted'`
+{{ use: partial-line-border-style(
+ prefix = ${prefix},
+ name = ${name},
+ defaultType = ${defaultType}
+) }}
{{ use: partial-style-shadow-opacity(
prefix = ${prefix},
diff --git a/zh/option/partial/text-style.md b/zh/option/partial/text-style.md
index 98dff0a..5624c79 100644
--- a/zh/option/partial/text-style.md
+++ b/zh/option/partial/text-style.md
@@ -258,6 +258,13 @@ backgroundColor: {
文字块边框宽度。
+{{ use: partial-line-border-style(
+ prefix = ${prefix},
+ type = 'border',
+ name = '文字块边框',
+ defaultType = ${defaultType}
+) }}
+
#${prefix} borderRadius(number|Array) = 0
<ExampleUIControlVector min="0" dims="LT,RT, RB, LB" />
@@ -335,6 +342,16 @@ backgroundColor: {
文字本身的描边宽度。
+{{ use: partial-line-border-style(
+ prefix = ${prefix},
+ name = ${name},
+ type = 'text',
+ defaultType = ${defaultType},
+ noCap = true,
+ noJoin = true,
+ noMiterLimit = true
+) }}
+
#${prefix} textShadowColor(Color) = 'transparent'
<ExampleUIControlColor default="#000" />
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 02/02: feat(border): add new border options brought
by v5.(en)
Posted by wa...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch feat/new-border-options
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit c2793dc85fa9592eaa846a883a04750aed9e1bf5
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Mon Mar 8 17:25:48 2021 +0800
feat(border): add new border options brought by v5.(en)
---
en/option/partial/item-style.md | 11 +--
en/option/partial/line-border-style.md | 147 +++++++++++++++++++++++++++++++++
en/option/partial/line-style.md | 15 ++--
en/option/partial/text-style.md | 17 ++++
4 files changed, 175 insertions(+), 15 deletions(-)
diff --git a/en/option/partial/item-style.md b/en/option/partial/item-style.md
index 9c2369b..d2cb08f 100644
--- a/en/option/partial/item-style.md
+++ b/en/option/partial/item-style.md
@@ -35,11 +35,12 @@ ${name} border color, whose format is similar to that of `color`.
${name} border width. No border when it is set to be 0.
-#${prefix} borderType(string) = 'solid'
-
-<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
-
-Border type, which can be `'solid'`, `'dashed'`, or `'dotted'`. `'solid'` by default.
+{{ use: partial-line-border-style(
+ prefix = ${prefix},
+ name = ${name},
+ type = 'border',
+ defaultType = ${defaultType}
+) }}
{{ use: partial-style-shadow-opacity(
prefix = ${prefix},
diff --git a/en/option/partial/line-border-style.md b/en/option/partial/line-border-style.md
new file mode 100644
index 0000000..7a7aa23
--- /dev/null
+++ b/en/option/partial/line-border-style.md
@@ -0,0 +1,147 @@
+{{ target: partial-line-border-style }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderType(string|number|Array) = ${defaultType|default("'solid'")}
+{{ elif: ${type} === 'text' }}
+#${prefix} textBorderType(string|number|Array) = ${defaultType|default("'solid'")}
+{{ else }}
+#${prefix} type(string|number|Array) = ${defaultType|default("'solid'")}
+{{ /if }}
+
+<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
+
+{{ if: ${type} === 'border' }}
+${name} border type.
+{{ elif: ${type} === 'text' }}
+Stroke line type of the text.
+{{ else }}
+line type.
+{{ /if }}
+
+Possible values are:
++ `'solid'`
++ `'dashed'`
++ `'dotted'`
+
+Since `v5.0.0`, it can also be a number or a number array to specify the [dash array](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) of the line. With {{ if: ${type} === 'border' }}
+`borderDashOffset`
+{{ elif: ${type} === 'text' }}
+`textBorderDashOffset`
+{{ else }}
+`dashOffset`
+{{ /if }}, we can make the line style more flexible.
+
+For example：
+```js
+{
+ {{ if: ${type} === 'border' }}borderType{{ elif: ${type} === 'text' }}textBorderType{{ else }}type{{ /if }}: [5, 10],
+ {{ if: ${type} === 'border' }}borderDashOffset{{ elif: ${type} === 'text' }}textBorderDashOffset{{ else }}dashOffset{{ /if }}: 5
+}
+```
+
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderDashOffset(number) = 0
+{{ elif: ${type} === 'text' }}
+#${prefix} textBorderDashOffset(number) = 0
+{{ else }}
+#${prefix} dashOffset(number) = 0
+{{ /if }}
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+<ExampleUIControlNumber min="0" step="1" default="0" />
+
+To set the line dash offset. With {{ if: ${type} === 'border' }}
+`borderType`
+{{ elif: ${type} === 'text' }}
+`textBorderType`
+{{ else }}
+`type`
+{{ /if }}, we can make the line style more flexible.
+
+Refer to MDN [lineDashOffset](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset) for more details.
+
+
+{{ if: !${noCap} }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderCap(string) = 'butt'
+{{ else }}
+#${prefix} cap(string) = 'butt'
+{{ /if }}
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+<ExampleUIControlEnum default="butt" options="butt,round,square" />
+
+To specify how to draw the end points of the line.
+Possible values are:
++ `'butt'`: The ends of lines are squared off at the endpoints.
++ `'round'`: The ends of lines are rounded.
++ `'square'`: The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
+
+Default value is `'butt'`. Refer to MDN [lineCap](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap) for more details.
+
+{{ /if }}
+
+
+{{ if: !${noJoin} }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderJoin(string) = 'bevel'
+{{ else }}
+#${prefix} join(string) = 'bevel'
+{{ /if }}
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+<ExampleUIControlEnum default="bevel" options="bevel,round,miter" />
+
+To determine the shape used to join two line segments where they meet.
+
+Possible values are:
++ `'bevel'`: Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
++ `'round'`: Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
++ `'miter'`: Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the {{ if: ${type} === 'border' }}
+`borderMiterLimit`
+{{ else }}
+`miterLimit`
+{{ /if }} property.
+
+Default value is `'bevel'`. Refer to MDN [lineJoin](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) for more details.
+
+{{ /if }}
+
+
+{{ if: !${noMiterLimit} }}
+
+{{ if: ${type} === 'border' }}
+#${prefix} borderMiterLimit(number) = 10
+{{ else }}
+#${prefix} miterLimit(number) = 10
+{{ /if }}
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+<ExampleUIControlNumber min="0" step="1" default="10" />
+
+To set the miter limit ratio. Only works when {{ if: ${type} === 'border' }}
+`borderJoin`
+{{ else }}
+`join`
+{{ /if }} is set as `miter`.
+
+Default value is `10`. Negative、`0`、`Infinity` and `NaN` values are ignored.
+
+Refer to MDN [miterLimit](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit) for more details.
+
+{{ /if }}
\ No newline at end of file
diff --git a/en/option/partial/line-style.md b/en/option/partial/line-style.md
index 9d12c96..54178c9 100644
--- a/en/option/partial/line-style.md
+++ b/en/option/partial/line-style.md
@@ -23,16 +23,11 @@ Input parameters are `seriesIndex`, `dataIndex`, `data`, `value`, and etc. of da
${name} line width.
-#${prefix} type(string) = ${defaultType|default('solid')}
-
-<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
-
-${name} line type.
-
-Options are:
-+ `'solid'`
-+ `'dashed'`
-+ `'dotted'`
+{{ use: partial-line-border-style(
+ prefix = ${prefix},
+ name = ${name},
+ defaultType = ${defaultType}
+) }}
{{ use: partial-style-shadow-opacity(
prefix = ${prefix},
diff --git a/en/option/partial/text-style.md b/en/option/partial/text-style.md
index bb3d73b..08e6f2e 100644
--- a/en/option/partial/text-style.md
+++ b/en/option/partial/text-style.md
@@ -257,6 +257,13 @@ Border color of the text fragment.
Border width of the text fragment.
+{{ use: partial-line-border-style(
+ prefix = ${prefix},
+ type = 'border',
+ name = 'the text fragment',
+ defaultType = ${defaultType}
+) }}
+
#${prefix} borderRadius(number) = 0
<ExampleUIControlVector min="0" dims="LT,RT, RB, LB" />
@@ -335,6 +342,16 @@ Storke color of the text.
Storke line width of the text.
+{{ use: partial-line-border-style(
+ prefix = ${prefix},
+ name = ${name},
+ type = 'text',
+ defaultType = ${defaultType},
+ noCap = true,
+ noJoin = true,
+ noMiterLimit = true
+) }}
+
#${prefix} textShadowColor(Color) = 'transparent'
<ExampleUIControlColor default="#000" />
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org