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:13 UTC

[echarts-doc] 02/02: feat(border): add new border options brought by v5.(en)

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