You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/08/27 11:15:17 UTC
[incubator-echarts-doc] branch next updated: add more states doc in
bar series
This is an automated email from the ASF dual-hosted git repository.
shenyi 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 39be829 add more states doc in bar series
39be829 is described below
commit 39be829143cdd2866dff361aa3ca2a870fb48d45
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Aug 27 19:14:53 2020 +0800
add more states doc in bar series
---
build.js | 1 -
en/option/series/bar.md | 9 +-
en/option/series/line.md | 4 +-
en/option/series/radar.md | 4 +-
zh/option/partial/focus-blur-scope.md | 41 +++++++++
zh/option/partial/label-layout.md | 12 ++-
zh/option/partial/label.md | 2 +-
zh/option/partial/selected-mode.md | 11 +++
zh/option/series/bar.md | 154 +++++++++++++++++++++-------------
zh/option/series/boxplot.md | 4 -
zh/option/series/funnel.md | 34 ++++++--
zh/option/series/pie.md | 4 +-
zh/option/series/radar.md | 4 +-
13 files changed, 196 insertions(+), 88 deletions(-)
diff --git a/build.js b/build.js
index 9e3bc24..7b654f8 100644
--- a/build.js
+++ b/build.js
@@ -26,7 +26,6 @@ const assert = require('assert');
const chokidar = require('chokidar');
const debounce = require('lodash.debounce');
const {getDocJSONPVarNname} = require('./src/shared');
-const { basename } = require('path');
const projectDir = __dirname;
diff --git a/en/option/series/bar.md b/en/option/series/bar.md
index 1aa31ae..0353ab9 100644
--- a/en/option/series/bar.md
+++ b/en/option/series/bar.md
@@ -41,8 +41,7 @@ If to add round caps at the end of the bar sectors. Valid only for bar series on
{{use:partial-bar-item-style(
prefix="##",
useColorPalatte=true,
- hasCallback=true,
- barBorderRadius=true
+ hasCallback=true
)}}
## showBackground(boolean) = false
@@ -61,7 +60,6 @@ Background style of each bar if [showBackground](~series-bar.showBackground) is
prefix="##",
useColorPalatte=false,
hasCallback=true,
- barBorderRadius=true,
defaultColor="'rgba(180, 180, 180, 0.2)'"
)}}
@@ -135,8 +133,7 @@ The style setting of the text label in a single bar.
### itemStyle(Object)
{{use:partial-bar-item-style(
- prefix="###",
- barBorderRadius=true
+ prefix="###"
)}}
#### emphasis(Object)
{{use:partial-bar-item-style(prefix="####")}}
@@ -191,12 +188,10 @@ The border color of bar.
The border width of bar. defaults to have no border.
-{{ if: ${barBorderRadius} }}
{{use: partial-border-radius(
propName: 'barBorderRadius',
prefix: ${prefix}
)}}
-{{ /if }}
{{ use:partial-style-shadow-opacity(prefix=${prefix}) }}
diff --git a/en/option/series/line.md b/en/option/series/line.md
index b181a55..7519108 100644
--- a/en/option/series/line.md
+++ b/en/option/series/line.md
@@ -187,13 +187,13 @@ The style of the text of single data point.
### itemStyle(Object)
The style of the symbol of single data point.
-{{use: partial-bar-item-style(prefix="###")}}
+{{use: partial-item-style(prefix="###")}}
### emphasis(Object)
#### itemStyle(Object)
-{{use: partial-bar-item-style(prefix="####")}}
+{{use: partial-item-style(prefix="####")}}
#### label(Object)
{{ use: partial-label(prefix="####") }}
diff --git a/en/option/series/radar.md b/en/option/series/radar.md
index e3e2363..138ea50 100644
--- a/en/option/series/radar.md
+++ b/en/option/series/radar.md
@@ -111,7 +111,7 @@ Style setting of the text on single inflection point.
### itemStyle(Object)
Style setting of the symbol on single inflection point.
-{{use: partial-bar-item-style(prefix="###")}}
+{{use: partial-item-style(prefix="###")}}
### lineStyle(Object)
Line style of a single item.
@@ -127,7 +127,7 @@ Area filling style of a single item.
prefix="####", defaultPosition="top"
) }}
#### itemStyle(Object)
-{{use: partial-bar-item-style(prefix="####")}}
+{{use: partial-item-style(prefix="####")}}
#### lineStyle(Object)
{{use: partial-line-style(prefix="####")}}
#### areaStyle(Object)
diff --git a/zh/option/partial/focus-blur-scope.md b/zh/option/partial/focus-blur-scope.md
new file mode 100644
index 0000000..16b46f8
--- /dev/null
+++ b/zh/option/partial/focus-blur-scope.md
@@ -0,0 +1,41 @@
+{{target:partial-focus-blur-scope}}
+
+### focus(string) = 'none'
+
+{{ use: partial-version(version = "5.0.0") }}
+
+在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：
+
++ `'none'` 不淡出其它图形，默认使用该配置。
++ `'self'` 只聚焦（不淡出）当前高亮的数据的图形。
++ `'series'` 聚焦当前高亮的数据所在的系列的所有图形。
+{{if: ${isGraph} }}
++ `'adjacency'` 聚焦关系图中的邻接点和边的图形
+{{/if}}
+{{if: ${isTree} }}
++ `'ancestor'` 聚焦所有祖先节点
++ `'descendant'` 聚焦所有子孙节点
+{{/if}}
+
+**示例：**
+
+下面代码配置了柱状图在高亮一个图形的时候，淡出当前直角坐标系所有其它的系列。
+
+```js
+emphasis: {
+ focus: 'series',
+ blurScope: 'coordinateSystem'
+}
+```
+
+~[600x400](${galleryViewPath}bar-y-category-stack&reset=1&edit=1)
+
+### blurScope(string) = 'coordinateSystem'
+
+{{ use: partial-version(version = "5.0.0") }}
+
+在开启`focus`的时候，可以通过`blurScope`配置淡出的范围。支持如下配置
+
++ `'coordinateSystem'` 淡出范围为坐标系，默认使用该配置。
++ `'series'` 淡出范围为系列。
++ `'global'` 淡出范围为全局。
diff --git a/zh/option/partial/label-layout.md b/zh/option/partial/label-layout.md
index 1babaa8..626ec43 100644
--- a/zh/option/partial/label-layout.md
+++ b/zh/option/partial/label-layout.md
@@ -1,5 +1,7 @@
{{target: partial-label-layout}}
+{{ use: partial-version(version = "5.0.0") }}
+
标签的统一布局配置。
该配置项是在每个系列默认的标签布局基础上，统一调整标签的`(x, y)`位置，标签对齐等属性以实现想要的标签布局效果。
@@ -59,6 +61,10 @@ labelLayout(params) {
是否隐藏重叠的标签。
+下面示例演示了在关系图中开启该配置后，在缩放时可以实现自动的标签隐藏。
+
+~[600x400](${galleryViewPath}graph-label-overlap&edit=1&reset=1)
+
#${prefix} moveOverlap(string)
在标签重叠的时候是否挪动标签位置以防止重叠。
@@ -68,6 +74,10 @@ labelLayout(params) {
+ `'shiftX'` 水平方向依次位移，在水平方向对齐时使用
+ `'shiftY'` 垂直方向依次位移，在垂直方向对齐时使用
+下面是标签右对齐并配置垂直方向依次位移以防止重叠的示例。
+
+~[600x400](${galleryViewPath}scatter-label-align-right&edit=1&reset=1)
+
#${prefix} x(number|string)
标签的 x 位置。支持绝对的像素值或者`'20%'`这样的相对值。
@@ -112,7 +122,7 @@ labelLayout(params) {
标签是否可以允许用户通过拖拽二次调整位置。
-#${prefix} labelLinePoints(Array.<Array.<number>>)
+#${prefix} labelLinePoints(Array)
标签引导线三个点的位置。格式为：
diff --git a/zh/option/partial/label.md b/zh/option/partial/label.md
index 61dae82..f44faba 100644
--- a/zh/option/partial/label.md
+++ b/zh/option/partial/label.md
@@ -1,6 +1,6 @@
{{target:partial-label-desc}}
-${name}图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，`label`选项在 ECharts 2.x 中放置于`itemStyle`下，在 ECharts 3 中为了让整个配置项结构更扁平合理，`label` 被拿出来跟 `itemStyle` 平级，并且跟 `itemStyle` 一样拥有 `emphasis` 状态。
+${name}图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
{{target:partial-label}}
diff --git a/zh/option/partial/selected-mode.md b/zh/option/partial/selected-mode.md
new file mode 100644
index 0000000..e674aef
--- /dev/null
+++ b/zh/option/partial/selected-mode.md
@@ -0,0 +1,11 @@
+{{ target: partial-selected-mode }}
+
+## selectedMode(boolean|string) = false
+
+{{ if: ${version} }}
+{{ use: partial-version(version = ${version}) }}
+{{ /if }}
+
+<ExampleUIControlEnum options="true,false,single,multiple" />
+
+选中模式的配置，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选`'single'`，`'multiple'`，分别表示单选还是多选。
diff --git a/zh/option/series/bar.md b/zh/option/series/bar.md
index c1e1f03..dd50ed5 100644
--- a/zh/option/series/bar.md
+++ b/zh/option/series/bar.md
@@ -111,28 +111,6 @@ option = {
~[800x500](${galleryViewPath}polar-roundCap&reset=1&edit=1)
-## label(Object)
-{{use:partial-label-desc}}
-{{use:partial-label(
- prefix="##",
- defaultPosition="'inside'",
- formatter=true
-)}}
-
-## labelLayout(Object)
-
-{{ use: partial-label-layout(
- prefix="##"
-) }}
-
-## itemStyle(Object)
-{{use:partial-item-style-desc}}
-{{use:partial-bar-item-style(
- prefix="##",
- useColorPalatte=true,
- hasCallback=true,
- barBorderRadius=true
-)}}
## showBackground(boolean) = false
{{ use: partial-version(version = "4.7.0") }}
@@ -153,25 +131,57 @@ option = {
prefix="##",
useColorPalatte=false,
hasCallback=true,
- barBorderRadius=true,
defaultColor="'rgba(180, 180, 180, 0.2)'"
)}}
+<!-- NORMAL STATE -->
+{{ use: partial-bar-state(
+ prefix="#",
+ topLevel=true,
+ isNormal=true
+) }}
+
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="#" + ${prefix}
+) }}
+
## emphasis(Object)
高亮的图形样式和标签样式。
-### label(Object)
-{{use:partial-label(
- prefix="###",
- formatter=true
-)}}
+{{use:partial-focus-blur-scope()}}
+
+{{ use: partial-bar-state(
+ prefix="##",
+ topLevel=true,
+ isNormal=false
+) }}
+
+## blur(Object)
-### itemStyle(Object)
-{{use:partial-bar-item-style(prefix="###")}}
+淡出时的图形样式和标签样式。开启 [emphasis.focus](~series-bar.emphasis.focus) 后有效
+{{ use: partial-bar-state(
+ prefix="##",
+ topLevel=true,
+ isNormal=false
+) }}
+## select(Object)
+
+数据选中时的图形样式和标签样式。开启 [selectedMode](~series-bar.selectedMode) 后有效。
+
+{{ use: partial-bar-state(
+ prefix="##",
+ topLevel=true,
+ isNormal=false
+) }}
+<!-- SELECTED MODE -->
+{{ use: partial-selected-mode(
+ version='5.0.0'
+) }}
## stack(string) = null
数据堆叠，同个类目轴上系列配置相同的`stack`值可以堆叠放置。
@@ -219,42 +229,42 @@ option = {
### value(number)
单个数据项的数值。
-### label(Object)
-单个柱条文本的样式设置。
-{{ use:partial-label(
- prefix="###",
- defaultPosition="inside"
+{{ use: partial-bar-state(
+ prefix="##",
+ topLevel=false,
+ isNormal=true
) }}
-### itemStyle(Object)
-{{use:partial-bar-item-style(
- prefix="###",
- barBorderRadius=true
-)}}
+### emphasis(Object)
+单个数据的高亮状态配置。
-### emphasis(Object)
+{{ use: partial-bar-state(
+ prefix="###",
+ topLevel=false,
+ isNormal=false
+) }}
-高亮状态的柱状图图形与标签样式。
+### blur(Object)
-#### label(Object)
+单个数据的淡出状态配置。
-{{ use:partial-label(prefix="####") }}
+{{ use: partial-bar-state(
+ prefix="###",
+ topLevel=false,
+ isNormal=false
+) }}
-#### itemStyle(Object)
-{{use:partial-bar-item-style(prefix="####")}}
+### select(Object)
-{{use: partial-tooltip-in-series-data(
- galleryViewPath=${galleryViewPath}
-)}}
+单个数据的选中状态配置。
+
+{{ use: partial-bar-state(
+ prefix="###",
+ topLevel=false,
+ isNormal=false
+) }}
-{{use: partial-marker(
- prefix="#",
- seriesType="bar",
- galleryEditorPath=${galleryEditorPath},
- hasCoord=true,
- hasType=true
-)}}
{{use:partial-clip(
prefix="#"
@@ -279,6 +289,34 @@ option = {
)}}
+{{ target:partial-bar-state }}
+
+#${prefix} label(Object)
+{{ if: ${topLevel} }}
+{{use:partial-label-desc}}
+{{ else: }}
+单个数据的文本配置。
+{{ /if }}
+
+{{use:partial-label(
+ prefix="#" + ${prefix},
+ defaultPosition="'inside'",
+ formatter=${topLevel}
+)}}
+
+#${prefix} itemStyle(Object)
+{{ if: ${topLevel} }}
+{{use:partial-item-style-desc}}
+{{ else: }}
+单个数据的图形样式设置。
+{{ /if }}
+{{use:partial-bar-item-style(
+ prefix="#" + ${prefix},
+ useColorPalatte=${topLevel && isNormal},
+ hasCallback=${topLevel && isNormal},
+)}}
+
+
{{ target:partial-bar-item-style }}
#${prefix} color(Color) = ${defaultColor|default('自适应')}
@@ -305,13 +343,9 @@ option = {
柱条的描边类型，默认为实线，支持 `'dashed'`, `'dotted'`。
-{{ if: ${barBorderRadius} }}
-
{{use: partial-border-radius(
- propName: 'barBorderRadius',
prefix: ${prefix}
)}}
-{{ /if }}
{{ use:partial-style-shadow-opacity(prefix=${prefix}) }}
diff --git a/zh/option/series/boxplot.md b/zh/option/series/boxplot.md
index d6b4df7..32c27d9 100644
--- a/zh/option/series/boxplot.md
+++ b/zh/option/series/boxplot.md
@@ -9,12 +9,8 @@
~[600x400](${galleryViewPath}boxplot-light-velocity&edit=1&reset=1)
-<br>
也支持多个 `series` 在同一个坐标系中，参见 [例子](${galleryEditorPath}boxplot-multi&edit=1&reset=1)。
-<br>
-<br>
-
<ExampleBaseOption name="boxplot" title="盒须图" title-en="Boxplot">
const option = {
title: [{
diff --git a/zh/option/series/funnel.md b/zh/option/series/funnel.md
index 4a7d1c8..492bed6 100644
--- a/zh/option/series/funnel.md
+++ b/zh/option/series/funnel.md
@@ -93,11 +93,6 @@ option = {
formatter=true
)}}
-## labelLayout(Object)
-{{ use: partial-label-layout(
- prefix="##"
-) }}
-
## labelLine(Object)
标签的视觉引导线样式，在 [label 位置](~series-funnel.label.position) 设置为`'left'`或者`'right'`的时候会显示视觉引导线。
{{ use: partial-funnel-label-line(
@@ -113,9 +108,38 @@ option = {
hasCallback=true
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## emphasis(Object)
+
高亮的标签和图形样式。
+{{use:partial-focus-blur-scope()}}
+
+### label(Object)
+{{use:partial-funnel-label(
+ prefix="###",
+ position=false,
+ formatter=true
+)}}
+
+### labelLine(Object)
+{{ use: partial-funnel-label-line(
+ prefix='###',
+ length=false
+)}}
+
+### itemStyle(Object)
+{{use:partial-item-style(prefix="###")}}
+
+
+## blur(Object)
+
+淡出时的图形样式和标签样式。开启 [emphasis.focus](~series-funnel.emphasis.focus) 后有效
+
### label(Object)
{{use:partial-funnel-label(
prefix="###",
diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md
index 0ed829e..0e48279 100644
--- a/zh/option/series/pie.md
+++ b/zh/option/series/pie.md
@@ -63,9 +63,7 @@ const option = {
## selectedMode(boolean|string) = false
-<ExampleUIControlEnum options="true,false,single,multiple" />
-
-选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选`'single'`，`'multiple'`，分别表示单选还是多选。
+{{ use: partial-selected-mode() }}
## selectedOffset(number) = 10
diff --git a/zh/option/series/radar.md b/zh/option/series/radar.md
index 1fe6a4a..6d267aa 100644
--- a/zh/option/series/radar.md
+++ b/zh/option/series/radar.md
@@ -151,7 +151,7 @@ data : [
### itemStyle(Object)
单个拐点标志的样式设置。
-{{use: partial-bar-item-style(prefix="###")}}
+{{use: partial-item-style(prefix="###")}}
### lineStyle(Object)
单项线条样式。
@@ -168,7 +168,7 @@ data : [
prefix="####", defaultPosition="top"
) }}
#### itemStyle(Object)
-{{use: partial-bar-item-style(prefix="####")}}
+{{use: partial-item-style(prefix="####")}}
#### lineStyle(Object)
{{use: partial-line-style(prefix="####")}}
#### areaStyle(Object)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org