You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/12/09 07:21:43 UTC
[incubator-echarts-doc] branch next updated: doc: decal for series
in EN
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/next by this push:
new 71cb56c doc: decal for series in EN
71cb56c is described below
commit 71cb56c7e4ef509bd14189810bd743e8db50ba41
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Dec 9 15:21:29 2020 +0800
doc: decal for series in EN
---
en/option/component/aria.md | 68 +++-------------------------------
en/option/partial/decal.md | 79 ++++++++++++++++++++++++++++++++++++++++
en/option/partial/item-style.md | 13 +++++++
en/option/series/bar.md | 12 ++++++
en/option/series/boxplot.md | 7 +++-
en/option/series/custom.md | 6 ++-
en/option/series/funnel.md | 22 ++++-------
en/option/series/gauge.md | 12 +++++-
en/option/series/line.md | 4 +-
en/option/series/pictorialBar.md | 6 ++-
en/option/series/pie.md | 6 ++-
en/option/series/radar.md | 3 +-
en/option/series/sankey.md | 9 +++--
en/option/series/sunburst.md | 15 ++++----
en/option/series/themeRiver.md | 3 +-
en/option/series/treemap.md | 9 +++++
16 files changed, 174 insertions(+), 100 deletions(-)
diff --git a/en/option/component/aria.md b/en/option/component/aria.md
index 1b6a91f..8658910 100644
--- a/en/option/component/aria.md
+++ b/en/option/component/aria.md
@@ -214,6 +214,8 @@ aria: {
~[700x300](${galleryViewPath}doc-example/aria-decal-simple&edit=1&reset=1)
+Most series types are supported, including: `'line'`, `'bar'`, `'pie'`, `'radar'`, `'treemap'`, `'sunburst'`, `'boxplot'`, `'sankey'`, `'funnel'`, `'gauge'`, `'pictorialBar'`, `'themeRiver'`, `'custom'` and so on. Among them, some series have no filling color by default (such as `'line'`, `'radar'`, `'boxplot'`), which take effect only if the `'areaStyle'` is set.
+
### show(boolean) = false
Whether or not to display the decal pattern is not shown by default. If you want to display the applique, you need to make sure [aria.enabled](~aria.enabled) and `aria.decal.show` are both `true`.
@@ -222,66 +224,6 @@ Whether or not to display the decal pattern is not shown by default. If you want
The style of the decal pattern. If it is an `Object` type, it means all data will have the same style, if it is an array, then each item in the array will have one style and the data will be looped through the array in order.
-#### symbol(string|string[]) = 'rect'
-
-The symbol type of the decal. If it is in the type of `string[]`, it means the symbols are used one by one.
-
-{{ use: partial-icon() }}
-
-#### symbolSize(number) = 1
-
-Range of values: `0` to `1`, representing the size of symbol relative to decal.
-
-#### symbolKeepAspect(boolean) = true
-
-Whether or not to keep the aspect ratio of the pattern.
-
-#### color(string) = 'rgba(0, 0, 0, 0.2)'
-
-For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.
-
-#### backgroundColor(string) = null
-
-The background color of the decal will be over the color of the series itself, under the decal pattern.
-
-#### dashArrayX(number | number[] | (number | number[])[]) = 5
-
-The basic pattern of the decal pattern is an infinite loop in the form of `Pattern - Blank - Pattern - Blank - Pattern - Blank` both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.
-
-`dashArrayX` controls the horizontal pattern pattern. When its value is of type `number` or `number[]`, it is similar to [SVG stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray).
-
-- If it is of type `number`, it means that the pattern and the blank space are of this value respectively. For example, `5` means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...
-
-- In the case of `number[]` type, it means that the pattern and empty space are loops of an array of values. For example: `[5, 10, 2, 6]` means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...
-
-- If of type `(number | number[])[]`, it means that each row is a loop with an array of values for the pattern and blank space. For example: `[10, [2, 5]]` means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...
-
-This interface can be better understood with the following examples.
-
-~[700x300](${galleryViewPath}doc-example/aria-decal&edit=1&reset=1)
-
-#### dashArrayY(number | number[]) = 5
-
-The basic pattern of the decal pattern is an infinite loop in the form of `Pattern - Blank - Pattern - Blank - Pattern - Blank` both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.
-
-`dashArrayY` controls the horizontal pattern pattern. Similar to [SVG stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray).
-
-- If it is a `number` type, it means the pattern and the blank are each of this value. For example, `5` means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...
-
-- In the case of `number[]` type, it means that the pattern and empty space are loops of sequential array values. For example: `[5, 10, 2, 6]` means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...
-
-This interface can be better understood with the following examples.
-
-~[700x300](${galleryViewPath}doc-example/aria-decal&edit=1&reset=1)
-
-#### rotation(number) = 0
-
-The overall rotation angle (in radians) of the pattern, in the range from `-Math.
-
-#### maxTileWidth(number) = 512
-
-The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.
-
-#### maxTileHeight(number) = 512
-
-The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.
+{{ use: partial-decal(
+ prefix = "###"
+) }}
diff --git a/en/option/partial/decal.md b/en/option/partial/decal.md
new file mode 100644
index 0000000..0f3e8db
--- /dev/null
+++ b/en/option/partial/decal.md
@@ -0,0 +1,79 @@
+{{ target: partial-decal-desc }}
+
+The style of the decal pattern. It works only if [aria.enabled](~aria.enabled) and [aria.decal.show](~aria.decal.show) are both set to be `true`.
+
+If it is set to be `'none'`, no decal will be used.
+
+{{ if: ${onlyWithAreaStyle} }}
+
+It works only if `areaStyle` is set.
+
+{{ /if }}
+
+
+
+{{ target: partial-decal }}
+
+#${prefix|default('#')} symbol(string|string[]) = 'rect'
+
+The symbol type of the decal. If it is in the type of `string[]`, it means the symbols are used one by one.
+
+{{ use: partial-icon() }}
+
+#${prefix|default('#')} symbolSize(number) = 1
+
+Range of values: `0` to `1`, representing the size of symbol relative to decal.
+
+#${prefix|default('#')} symbolKeepAspect(boolean) = true
+
+Whether or not to keep the aspect ratio of the pattern.
+
+#${prefix|default('#')} color(string) = 'rgba(0, 0, 0, 0.2)'
+
+For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.
+
+#${prefix|default('#')} backgroundColor(string) = null
+
+The background color of the decal will be over the color of the series itself, under the decal pattern.
+
+#${prefix|default('#')} dashArrayX(number | number[] | (number | number[])[]) = 5
+
+The basic pattern of the decal pattern is an infinite loop in the form of `Pattern - Blank - Pattern - Blank - Pattern - Blank` both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.
+
+`dashArrayX` controls the horizontal pattern pattern. When its value is of type `number` or `number[]`, it is similar to [SVG stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray).
+
+- If it is of type `number`, it means that the pattern and the blank space are of this value respectively. For example, `5` means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...
+
+- In the case of `number[]` type, it means that the pattern and empty space are loops of an array of values. For example: `[5, 10, 2, 6]` means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...
+
+- If of type `(number | number[])[]`, it means that each row is a loop with an array of values for the pattern and blank space. For example: `[10, [2, 5]]` means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...
+
+This interface can be better understood with the following examples.
+
+~[700x300](${galleryViewPath}doc-example/aria-decal&edit=1&reset=1)
+
+#${prefix|default('#')} dashArrayY(number | number[]) = 5
+
+The basic pattern of the decal pattern is an infinite loop in the form of `Pattern - Blank - Pattern - Blank - Pattern - Blank` both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.
+
+`dashArrayY` controls the horizontal pattern pattern. Similar to [SVG stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray).
+
+- If it is a `number` type, it means the pattern and the blank are each of this value. For example, `5` means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...
+
+- In the case of `number[]` type, it means that the pattern and empty space are loops of sequential array values. For example: `[5, 10, 2, 6]` means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...
+
+This interface can be better understood with the following examples.
+
+~[700x300](${galleryViewPath}doc-example/aria-decal&edit=1&reset=1)
+
+#${prefix|default('#')} rotation(number) = 0
+
+The overall rotation angle (in radians) of the pattern, in the range from `-Math.
+
+#${prefix|default('#')} maxTileWidth(number) = 512
+
+The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.
+
+#${prefix|default('#')} maxTileHeight(number) = 512
+
+The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.
diff --git a/en/option/partial/item-style.md b/en/option/partial/item-style.md
index 8d737d7..5b14e3a 100644
--- a/en/option/partial/item-style.md
+++ b/en/option/partial/item-style.md
@@ -50,3 +50,16 @@ Border type, which can be `'solid'`, `'dashed'`, or `'dotted'`. `'solid'` by def
defaultShadowOffsetY = ${defaultShadowOffsetY}
) }}
+{{ if: ${useDecal} }}
+
+#${prefix} decal(Object | 'none')
+
+{{ use: partial-decal-desc(
+ onlyWithAreaStyle = ${decalOnlyWithAreaStyle}
+) }}
+
+{{ use: partial-decal(
+ prefix = '#' + ${prefix}
+) }}
+
+{{ /if }}
diff --git a/en/option/series/bar.md b/en/option/series/bar.md
index 8c0fac3..ae0ca09 100644
--- a/en/option/series/bar.md
+++ b/en/option/series/bar.md
@@ -285,6 +285,7 @@ Rectangle style configurations of single data.
{{ use: partial-bar-item-style(
prefix = "#" + ${prefix},
useColorPalatte = ${topLevel && isNormal},
+ useDecal = ${isNormal},
hasCallback = ${topLevel && isNormal}
) }}
@@ -324,3 +325,14 @@ Border type. Can be `'dashed'`, `'dotted'`.
prefix = ${prefix}
) }}
+{{ if: ${useDecal} }}
+
+#${prefix} decal(Object | 'none')
+
+{{ use: partial-decal-desc() }}
+
+{{ use: partial-decal(
+ prefix = '#' + ${prefix}
+) }}
+
+{{ /if }}
diff --git a/en/option/series/boxplot.md b/en/option/series/boxplot.md
index abd2515..41af84c 100644
--- a/en/option/series/boxplot.md
+++ b/en/option/series/boxplot.md
@@ -67,7 +67,8 @@ Style of boxplot.
useColorPalatte = true,
name = "boxplot",
defaultColor = "#fff",
- defaultBorderWidth = 1
+ defaultBorderWidth = 1,
+ useDecal = true
) }}
## emphasis(Object)
@@ -220,7 +221,9 @@ Select state of single data.
{{ use: partial-item-style(
prefix = "####",
- name = "boxplot"
+ name = "boxplot",
+ useDecal = true,
+ decalOnlyWithAreaStyle = true
) }}
{{ use: partial-tooltip-in-series-data() }}
diff --git a/en/option/series/custom.md b/en/option/series/custom.md
index bce4936..810a5e8 100644
--- a/en/option/series/custom.md
+++ b/en/option/series/custom.md
@@ -386,7 +386,8 @@ For example:
{{ use: partial-item-style(
prefix = "##",
useColorPalatte = true,
- hasCallback = false
+ hasCallback = false,
+ useDecal = true
) }}
## labelLine(Object)
@@ -438,7 +439,8 @@ Value of data item.
### itemStyle(Object)
{{ use: partial-item-style(
- prefix = "###"
+ prefix = "###",
+ useDecal = true
) }}
### emphasis(Object)
diff --git a/en/option/series/funnel.md b/en/option/series/funnel.md
index ade0899..d3b5a1e 100644
--- a/en/option/series/funnel.md
+++ b/en/option/series/funnel.md
@@ -102,7 +102,8 @@ The visual guide line style of label. When [label position](~series-funnel.label
{{ use: partial-item-style(
prefix = "##",
useColorPalatte = true,
- hasCallback = true
+ hasCallback = true,
+ useDecal = true
) }}
## labelLayout(Object|Function)
@@ -183,16 +184,17 @@ data value.
### itemStyle(Object)
+#### height(string|number)
+
+Height of this data item. By default, the height is evenly divided for all data items. The height can be set to percentage (e.g.: '10%') or pixel value (e.g.: 20). Please make sure that the total height of all data items is 100%.
+
{{ use: partial-item-style-desc() }}
{{ use: partial-item-style(
- prefix = "###"
+ prefix = "###",
+ useDecal = true
) }}
-#### height(string|number)
-
-Height of this data item. By default, the height is evenly divided for all data items. The height can be set to percentage (e.g.: '10%') or pixel value (e.g.: 20). Please make sure that the total height of all data items is 100%.
-
### label(Object)
The label configuration of a single data item.
@@ -210,14 +212,6 @@ The label configuration of a single data item.
length = true
) }}
-### itemStyle(Object)
-
-{{ use: partial-item-style-desc() }}
-
-{{ use: partial-item-style(
- prefix = "###"
-) }}
-
### emphasis(Object)
{{ use: partial-funnel-state(
diff --git a/en/option/series/gauge.md b/en/option/series/gauge.md
index 5378b3c..1cf0d24 100644
--- a/en/option/series/gauge.md
+++ b/en/option/series/gauge.md
@@ -64,6 +64,15 @@ Data name.
Data value.
+### itemStyle(Object)
+
+The style of data pointer.
+
+{{ use: partial-item-style(
+ prefix = "###",
+ useDecal = true
+) }}
+
## min(number) = 0
<ExampleUIControlNumber default="0" step="1" />
@@ -398,7 +407,8 @@ The border color of anchor.
The style of gauge chart.
{{ use: partial-item-style(
- prefix = "##"
+ prefix = "##",
+ useDecal = true
) }}
<!-- overwrite color -->
diff --git a/en/option/series/line.md b/en/option/series/line.md
index 023803d..6bfed35 100644
--- a/en/option/series/line.md
+++ b/en/option/series/line.md
@@ -132,7 +132,9 @@ The style of the symbol point of broken line.
{{ use: partial-item-style(
prefix = "##",
useColorPalatte = true,
- hasCallback = true
+ hasCallback = true,
+ useDecal = true,
+ decalOnlyWithAreaStyle = true
) }}
## lineStyle(Object)
diff --git a/en/option/series/pictorialBar.md b/en/option/series/pictorialBar.md
index f95356c..b86437b 100644
--- a/en/option/series/pictorialBar.md
+++ b/en/option/series/pictorialBar.md
@@ -105,7 +105,8 @@ See the example below:
{{ use: partial-item-style(
prefix = "##",
useColorPalatte = true,
- hasCallback = false
+ hasCallback = false,
+ useDecal = true
) }}
## emphasis(Object)
@@ -204,7 +205,8 @@ The style setting of the text label in a single bar.
### itemStyle(Object)
{{ use: partial-item-style(
- prefix = "###"
+ prefix = "###",
+ useDecal = true
) }}
### emphasis(Object)
diff --git a/en/option/series/pie.md b/en/option/series/pie.md
index 8024cfa..c8a7d45 100644
--- a/en/option/series/pie.md
+++ b/en/option/series/pie.md
@@ -177,7 +177,8 @@ Can be 0 - 180 degree.
{{ use: partial-item-style(
prefix = "##",
useColorPalatte = true,
- hasCallback = true
+ hasCallback = true,
+ useDecal = true
) }}
## emphasis(Object)
@@ -285,7 +286,8 @@ The label configuration of a single sector.
{{ use: partial-item-style-desc() }}
{{ use: partial-item-style(
- prefix = "###"
+ prefix = "###",
+ useDecal = true
) }}
### emphasis(Object)
diff --git a/en/option/series/radar.md b/en/option/series/radar.md
index 2d987a9..59c8b61 100644
--- a/en/option/series/radar.md
+++ b/en/option/series/radar.md
@@ -54,7 +54,8 @@ Item style of the inflection point of the lines.
{{ use: partial-item-style(
prefix = "##",
useColorPalatte = true,
- hasCallback = true
+ hasCallback = true,
+ useDecal = true
) }}
## lineStyle(Object)
diff --git a/en/option/series/sankey.md b/en/option/series/sankey.md
index ce82257..8f9556e 100644
--- a/en/option/series/sankey.md
+++ b/en/option/series/sankey.md
@@ -184,7 +184,8 @@ The style of node rectangle in Sankey diagram.
prefix = "##",
useColorPalatte = true,
defaultBorderWidth = 1,
- defaultBorderColor = "'#aaa'"
+ defaultBorderColor = "'#aaa'",
+ useDecal = true
) }}
## lineStyle(Object)
@@ -270,7 +271,8 @@ The style of this node.
{{ use: partial-item-style(
prefix = "###",
- useColorPalatte = true
+ useColorPalatte = true,
+ useDecal = true
) }}
### label(Object)
@@ -447,7 +449,8 @@ The curveness of the edge in Sankey diagram.
#${prefix} itemStyle(Object)
{{ use: partial-item-style(
- prefix = "#" + ${prefix}
+ prefix = "#" + ${prefix},
+ useDecal = true
) }}
#${prefix} lineStyle(Object)
diff --git a/en/option/series/sunburst.md b/en/option/series/sunburst.md
index 14e505d..112b635 100644
--- a/en/option/series/sunburst.md
+++ b/en/option/series/sunburst.md
@@ -93,7 +93,8 @@ If angle of data piece is smaller than this value (in degrees), then text is not
useColorPalatte = true,
defaultBorderWidth = 1,
defaultBorderColor = "'white'",
- defaultOpacity = 1
+ defaultOpacity = 1,
+ useDecal = ${isNormal}
) }}
@@ -200,7 +201,7 @@ See [series-sunburst.data.target](~series-sunburst.data.target).
Like `target` attribute of HTML `<a>`, which can either be `'blank'` or `'self'`. See [series-sunburst.data.link](~series-sunburst.data.link).
-{{ use: partial-sunburst-label-props(
+{{ use: partial-sunburst-state(
prefix = "##",
isNormal = true
) }}
@@ -208,11 +209,8 @@ Like `target` attribute of HTML `<a>`, which can either be `'blank'` or `'self'`
## labelLayout(Object|Function)
{{ use: partial-label-layout(
- prefix = "##"
-) }}
-
-{{ use: partial-sunburst-itemStyle-props(
- prefix = "##"
+ prefix = "##",
+ isNormal = true
) }}
### emphasis
@@ -289,7 +287,8 @@ Configurations of emphasis state.
) }}
{{ use: partial-sunburst-state(
- prefix = "##"
+ prefix = "##",
+ isNormal = true
) }}
## blur
diff --git a/en/option/series/themeRiver.md b/en/option/series/themeRiver.md
index d8a2dd2..dfdda9a 100644
--- a/en/option/series/themeRiver.md
+++ b/en/option/series/themeRiver.md
@@ -90,7 +90,8 @@ The index of single time axis, which defaults to be 0 because it contains only o
style of each ribbon-shape river branch in theme river.
{{ use: partial-item-style(
- prefix = "##"
+ prefix = "##",
+ isNormal = true
) }}
## emphasis(Object)
diff --git a/en/option/series/treemap.md b/en/option/series/treemap.md
index 064ab70..14ade86 100644
--- a/en/option/series/treemap.md
+++ b/en/option/series/treemap.md
@@ -722,6 +722,15 @@ In this way, a effect can be implemented: different sections have different hue
{{ use: partial-style-shadow-opacity(
prefix = ${prefix}
) }}
+
+#${prefix} decal(Object | 'none')
+
+{{ use: partial-decal-desc() }}
+
+{{ use: partial-decal(
+ prefix = '#' + ${prefix}
+) }}
+
{{ /if }}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org