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/10/30 10:42:11 UTC
[incubator-echarts-doc] branch next updated: add labelLine on some
of the 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 2bece68 add labelLine on some of the series
2bece68 is described below
commit 2bece689ca0944cc28caaae75079ea8faed62144
Author: pissang <bm...@gmail.com>
AuthorDate: Fri Oct 30 18:40:00 2020 +0800
add labelLine on some of the series
---
src/components/DocContentItemCard.vue | 20 ++++++-------
zh/option/partial/2d-data.md | 5 ----
zh/option/partial/label-line.md | 55 +++++++++++++++++++++++++++++++++++
zh/option/series/bar.md | 12 ++++++++
zh/option/series/custom.md | 22 +++++++-------
zh/option/series/effectScatter.md | 33 ++++++++++++++++++++-
zh/option/series/line.md | 33 +++++++++++++++++++++
zh/option/series/map.md | 31 ++++++++++++++++++++
zh/option/series/pictorialBar.md | 33 +++++++++++++++++++++
zh/option/series/pie.md | 51 +++++++-------------------------
zh/option/series/scatter.md | 35 +++++++++++++++++++++-
11 files changed, 262 insertions(+), 68 deletions(-)
diff --git a/src/components/DocContentItemCard.vue b/src/components/DocContentItemCard.vue
index 9f35d6a..acaaa76 100644
--- a/src/components/DocContentItemCard.vue
+++ b/src/components/DocContentItemCard.vue
@@ -11,11 +11,12 @@
<div class="hierarchy-line" v-if="expanded"></div>
<h4>
<span class="guider" v-if="depth > 1"></span>
- <el-button plain circle size="mini"
+ <i
+ class="expand-toggle"
v-if="supportsExpandable"
- :icon="expanded ? 'el-icon-minus' : 'el-icon-plus'"
+ :class="expanded ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline'"
@click="toggleExpanded"
- ></el-button>
+ ></i>
<!-- <a v-else class="anchor" href="">#</a> -->
<span class="path-parent" v-if="!shared.isMobile">
<a :href="'#' + item.link" :key="item.link" v-for="item in parentPath">{{item.text}}.</a>
@@ -260,16 +261,13 @@ $hierarchy-guider-color: #E0E6F1;
}
// opacity: 0.9;
- .el-button {
- padding: 2px;
- font-size: 12px;
+ .expand-toggle {
+ font-size: 18px;
margin-left: -23px;
- color: darken($hierarchy-guider-color, 30%);
- border-color: darken($hierarchy-guider-color, 10%);
- border-radius: 10px;
-
- background: #fff;
+ color: darken($hierarchy-guider-color, 20%);
+ cursor: pointer;
position: relative;
+ background-color: #fff;
}
.anchor {
diff --git a/zh/option/partial/2d-data.md b/zh/option/partial/2d-data.md
index a6ef408..12b5b58 100644
--- a/zh/option/partial/2d-data.md
+++ b/zh/option/partial/2d-data.md
@@ -92,7 +92,6 @@ series: [{
}]
```
-<br>
**『值』与 [轴类型](~xAxis.type) 的关系：**
+ 当某维度对应于数值轴（axis.type 为 `'value'` 或者 `'log'`）的时候：
@@ -138,7 +137,6 @@ series: [{
+ 例如：在 chrome 中，`new Date('2012-01-01')` 表示 UTC 时间的 2012 年 1 月 1 日，而 `new Date('2012-1-1')` 和 `new Date('2012/01/01')` 表示本地时间的 2012 年 1 月 1 日。在 safari 中，不支持 `new Date('2012-1-1')` 这种表示方法。
+ 所以，使用 `new Date(dataString)` 时，可使用第三方库解析（如 [moment](https://momentjs.com/)），或者使用 `echarts.number.parseDate`，或者参见 [这里](http://dygraphs.com/date-formats.html)。
-<br>
**当需要对个别数据进行个性化定义时：**
数组项可用对象，其中的 `value` 像表示具体的数值，如：
@@ -168,12 +166,9 @@ series: [{
]
```
-<br>
**空值：**
当某数据不存在时（ps：*不存在*不代表值为 0），可以用 `'-'` 或者 `null` 或者 `undefined` 或者 `NaN` 表示。
例如，无数据在折线图中可表现为该点是断开的，在其它图中可表示为图形不存在。
-<br><br>
-
diff --git a/zh/option/partial/label-line.md b/zh/option/partial/label-line.md
new file mode 100644
index 0000000..a176458
--- /dev/null
+++ b/zh/option/partial/label-line.md
@@ -0,0 +1,55 @@
+{{ target: partial-label-line-desc }}
+
+标签的视觉引导线配置。
+
+{{ target: partial-label-line }}
+
+#${prefix} show(boolean)
+
+<ExampleUIControlBoolean />
+
+是否显示视觉引导线。
+
+{{ if: ${showAbove} }}
+#${prefix} showAbove(boolean)
+
+是否显示在图形上方。
+{{ /if }}
+
+{{ if: ${length} }}
+#${prefix} length(number)
+
+<ExampleUIControlNumber default="15" min="0" step="1" />
+
+视觉引导线第一段的长度。
+{{ /if }}
+
+{{ if: ${length2} }}
+#${prefix} length2(number)
+
+<ExampleUIControlNumber default="15" min="0" step="1" />
+
+视觉引导项第二段的长度。
+{{ /if }}
+
+{{ if: ${smooth} }}
+#${prefix} smooth(boolean|number) = false
+
+<ExampleUIControlBoolean />
+
+是否平滑视觉引导线，默认不平滑，可以设置成 `true` 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。
+{{ /if }}
+
+{{ if: ${minTurnAngle} }}
+#${prefix} minTurnAngle(number) = ${defaultMinTurnAngle|default(null)}
+
+通过调整第二段线的长度，限制引导线两端之间最小的夹角，以防止过小的夹角导致显示不美观。
+
+可以设置为 0 - 180 度。
+{{ /if }}
+
+#${prefix} lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix = "#" + ${prefix}
+) }}
diff --git a/zh/option/series/bar.md b/zh/option/series/bar.md
index ab67fb0..208bfa7 100644
--- a/zh/option/series/bar.md
+++ b/zh/option/series/bar.md
@@ -313,6 +313,18 @@ option = {
formatter = ${topLevel}
) }}
+#${prefix} labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '#' + ${prefix},
+ length2 = ${isNormal},
+ minTurnAngle = ${isNormal},
+ showAbove = ${isNormal},
+ smooth = ${isNormal}
+) }}
+
#${prefix} itemStyle(Object)
{{ if: ${topLevel} }}
diff --git a/zh/option/series/custom.md b/zh/option/series/custom.md
index 69cb5b7..37bc453 100644
--- a/zh/option/series/custom.md
+++ b/zh/option/series/custom.md
@@ -381,20 +381,22 @@ renderItem 函数的第二个参数。
hasCallback = false
) }}
-## labelLayout(Object|Function)
+## labelLine(Object)
-{{ use: partial-label-layout(
- prefix = "##"
-) }}
+{{ use: partial-label-line-desc() }}
-## emphasis(Object)
-
-高亮图形样式
+{{ use: partial-label-line(
+ prefix = '##',
+ length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ smooth = true
+) }}
-### itemStyle(Object)
+## labelLayout(Object|Function)
-{{ use: partial-item-style(
- prefix = "###"
+{{ use: partial-label-layout(
+ prefix = "##"
) }}
{{ use: partial-selected-mode(
diff --git a/zh/option/series/effectScatter.md b/zh/option/series/effectScatter.md
index a0cf6e2..09b6484 100644
--- a/zh/option/series/effectScatter.md
+++ b/zh/option/series/effectScatter.md
@@ -111,6 +111,18 @@ const option = {
formatter = true
) }}
+## labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '##',
+ length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ smooth = true
+) }}
+
## labelLayout(Object|Function)
{{ use: partial-label-layout(
@@ -194,6 +206,18 @@ const option = {
defaultPosition = "inside"
) }}
+### labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '###',
+ length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ smooth = true
+) }}
+
### itemStyle(Object)
{{ use: partial-item-style(
@@ -248,7 +272,6 @@ const option = {
{{ use: partial-tooltip-in-series() }}
-
{{ target: effectScatter-state }}
#${prefix} label(Object)
@@ -258,6 +281,14 @@ const option = {
formatter = ${prefix} === '##'
) }}
+#${prefix} labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '#' + ${prefix}
+) }}
+
#${prefix} itemStyle(Object)
{{ use: partial-item-style(
diff --git a/zh/option/series/line.md b/zh/option/series/line.md
index 01e98bd..226e09a 100644
--- a/zh/option/series/line.md
+++ b/zh/option/series/line.md
@@ -123,6 +123,18 @@ const option = {
formatter = true
) }}
+## labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '##',
+ length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ smooth = true
+) }}
+
## labelLayout(Object|Function)
{{ use: partial-label-layout(
@@ -261,6 +273,18 @@ const option = {
defaultPosition = "top"
) }}
+### labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '###',
+ length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ smooth = true
+) }}
+
### itemStyle(Object)
单个拐点标志的样式设置。
@@ -323,6 +347,15 @@ const option = {
formatter = true
) }}
+### labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '###'
+) }}
+
+
### itemStyle(Object)
{{ use: partial-item-style(
diff --git a/zh/option/series/map.md b/zh/option/series/map.md
index dc96363..2f7bd33 100644
--- a/zh/option/series/map.md
+++ b/zh/option/series/map.md
@@ -57,6 +57,18 @@
prefix = "##"
) }}
+## labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '##',
+ length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ smooth = true
+) }}
+
## data(Array)
{{ use: partial-1d-data-desc(
@@ -101,6 +113,18 @@
noVerticalAlign = true
) }}
+### labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '###',
+ length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ smooth = true
+) }}
+
### emphasis(Object)
该数据所在区域的多边形高亮状态
@@ -152,3 +176,10 @@
noVerticalAlign = true
) }}
+#### labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '####'
+) }}
diff --git a/zh/option/series/pictorialBar.md b/zh/option/series/pictorialBar.md
index 1f7916a..7c0b54d 100644
--- a/zh/option/series/pictorialBar.md
+++ b/zh/option/series/pictorialBar.md
@@ -129,6 +129,18 @@ option = {
formatter = true
) }}
+## labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '##',
+ length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ smooth = true
+) }}
+
## labelLayout(Object|Function)
{{ use: partial-label-layout(
@@ -218,6 +230,18 @@ option = {
defaultPosition = "inside"
) }}
+### labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '###',
+ length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ smooth = true
+) }}
+
### itemStyle(Object)
{{ use: partial-item-style(
@@ -627,6 +651,15 @@ series: [{
formatter = ${prefix} === '##'
) }}
+
+#${prefix} labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = "#" + ${prefix}
+) }}
+
#${prefix} itemStyle(Object)
{{ use: partial-item-style(
diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md
index 2e5fc2e..f4d62a0 100644
--- a/zh/option/series/pie.md
+++ b/zh/option/series/pie.md
@@ -170,15 +170,24 @@ const option = {
## labelLine(Object)
-标签的视觉引导线样式，在 [label 位置](~series-pie.label.position) 设置为`'outside'`的时候会显示视觉引导线。
+标签的视觉引导线配置。在 [label 位置](~series-pie.label.position) 设置为`'outside'`的时候会显示视觉引导线。
-{{ use: partial-pie-label-line(
+{{ use: partial-label-line(
prefix = '##',
length = true,
length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ defaultMinTurnAngle = 90,
smooth = true
) }}
+### maxSurfaceAngle(number)
+
+通过调整第二段线的长度，限制引导线与扇区法线的最大夹角。设置为小于 90 度的值保证引导线不会和扇区交叉。
+
+可以设置为 0 - 180 度。
+
## labelLayout(Object|Function)
{{ use: partial-label-layout(
@@ -402,44 +411,6 @@ const option = {
-{{ target: partial-pie-label-line }}
-
-#${prefix} show(boolean)
-
-<ExampleUIControlBoolean />
-
-是否显示视觉引导线。
-
-{{ if: ${length} }}
-#${prefix} length(number)
-
-<ExampleUIControlNumber default="15" min="0" step="1" />
-
-视觉引导线第一段的长度。
-{{ /if }}
-
-{{ if: ${length2} }}
-#${prefix} length2(number)
-
-<ExampleUIControlNumber default="15" min="0" step="1" />
-
-视觉引导项第二段的长度。
-{{ /if }}
-
-{{ if: ${smooth} }}
-#${prefix} smooth(boolean|number) = false
-
-<ExampleUIControlBoolean />
-
-是否平滑视觉引导线，默认不平滑，可以设置成 `true` 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。
-{{ /if }}
-
-#${prefix} lineStyle(Object)
-
-{{ use: partial-line-style(
- prefix = "#" + ${prefix}
-) }}
-
{{ target: pie-state }}
diff --git a/zh/option/series/scatter.md b/zh/option/series/scatter.md
index d376a04..0ae8861 100644
--- a/zh/option/series/scatter.md
+++ b/zh/option/series/scatter.md
@@ -120,6 +120,18 @@ const option = {
formatter = true
) }}
+## labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '##',
+ length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ smooth = true
+) }}
+
## labelLayout(Object|Function)
{{ use: partial-label-layout(
@@ -150,7 +162,8 @@ const option = {
{{ use: partial-focus-blur-scope() }}
{{ use: scatter-state(
- prefix = "##"
+ prefix = "##",
+ isNormal = true
) }}
## blur(Object)
@@ -213,6 +226,18 @@ const option = {
defaultPosition = "inside"
) }}
+### labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '###',
+ length2 = true,
+ minTurnAngle = true,
+ showAbove = true,
+ smooth = true
+) }}
+
### itemStyle(Object)
单个数据点（气泡）的样式设置。
@@ -284,6 +309,14 @@ const option = {
formatter = ${prefix} === '##'
) }}
+#${prefix} labelLine(Object)
+
+{{ use: partial-label-line-desc() }}
+
+{{ use: partial-label-line(
+ prefix = '#' + ${prefix}
+) }}
+
#${prefix} itemStyle(Object)
{{ use: partial-item-style(
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org