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/06/15 15:07:56 UTC
[incubator-echarts-doc] branch live-example updated: example: add
UI def in line
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch live-example
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/live-example by this push:
new 5068f70 example: add UI def in line
5068f70 is described below
commit 5068f70a28b604403e90d5c674ef796d91d83327
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Jun 15 23:07:45 2020 +0800
example: add UI def in line
---
en/option/partial/line-style.md | 2 +-
zh/option/partial/area-style.md | 2 ++
zh/option/partial/item-style.md | 7 ++++++-
zh/option/partial/label.md | 2 +-
zh/option/partial/line-style.md | 6 ++++++
zh/option/partial/symbol.md | 8 ++++++++
zh/option/series/line.md | 42 +++++++++++++++++++++++++++++++++++++++++
7 files changed, 66 insertions(+), 3 deletions(-)
diff --git a/en/option/partial/line-style.md b/en/option/partial/line-style.md
index c65f25b..a4a09e1 100644
--- a/en/option/partial/line-style.md
+++ b/en/option/partial/line-style.md
@@ -22,7 +22,7 @@ ${name} line width.
${name} line type.
-Options are:
+Options are:
+ `'solid'`
+ `'dashed'`
+ `'dotted'`
diff --git a/zh/option/partial/area-style.md b/zh/option/partial/area-style.md
index 071f49c..0b5054e 100644
--- a/zh/option/partial/area-style.md
+++ b/zh/option/partial/area-style.md
@@ -2,6 +2,8 @@
#${prefix} color(Color)={{ if: !${useColorPalatte} }} ${defaultColor|default('"#000"')} {{ else }}'自适应'{{ /if }}
+<ExampleUIControlColor />
+
填充的颜色。{{ if: ${useColorPalatte} }} 默认从[option.color 调色盘](~color)获取颜色 {{/if}}
{{ use: partial-color-desc }}
diff --git a/zh/option/partial/item-style.md b/zh/option/partial/item-style.md
index 33075ab..6c93b29 100644
--- a/zh/option/partial/item-style.md
+++ b/zh/option/partial/item-style.md
@@ -5,6 +5,8 @@ ${name} 图形样式。
#${prefix} color(Color{{if: ${hasCallback} }}|Function{{/if}})=${defaultColor|default('自适应')}
+<ExampleUIControlColor />
+
${name}图形的颜色。{{ if: ${useColorPalatte} }} 默认从全局调色盘 [option.color](~color) 获取颜色 {{/if}}
{{ use: partial-color-desc }}
@@ -19,11 +21,14 @@ ${name}图形的颜色。{{ if: ${useColorPalatte} }} 默认从全局调色盘 [
#${prefix} borderColor(Color) = ${defaultBorderColor|default('"#000"')}
-${name}图形的描边颜色。支持的颜色格式同 `color`，不支持回调函数。
+<ExampleUIControlColor />
+${name}图形的描边颜色。支持的颜色格式同 `color`，不支持回调函数。
#${prefix} borderWidth(number) = ${defaultBorderWidth|default(0)}
+<ExampleUIControlNumber value="${defaultBorderWidth|default(0)}" min="0" step="0.5" />
+
${name}描边线宽。为 0 时无描边。
#${prefix} borderType(string) = 'solid'
diff --git a/zh/option/partial/label.md b/zh/option/partial/label.md
index 7de01eb..9d3847b 100644
--- a/zh/option/partial/label.md
+++ b/zh/option/partial/label.md
@@ -13,7 +13,7 @@ ${name}图形上的文本标签，可用于说明图形的一些数据信息，
{{ if: !${noPosition} }}
#${prefix} position(string|Array) = ${defaultPosition}
-<ExampleUIControlEnum default="${defaultPosition|default('inside')}" options="top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight" />
+<ExampleUIControlEnum options="top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight" />
{{use:partial-label-position}}
{{ /if }}
diff --git a/zh/option/partial/line-style.md b/zh/option/partial/line-style.md
index dd47d08..1ab25be 100644
--- a/zh/option/partial/line-style.md
+++ b/zh/option/partial/line-style.md
@@ -2,6 +2,8 @@
#${prefix} color(Color)={{ if: !${useColorPalatte} }} ${defaultColor|default('"#000"')} {{ else }}'自适应'{{ /if }}
+<ExampleUIControlColor />
+
${name}线的颜色。{{ if: ${useColorPalatte} }} 默认从[option.color 调色盘](~color) 获取颜色{{/if}}
{{ if: ${hasCallback} }}
@@ -16,10 +18,14 @@ ${name}线的颜色。{{ if: ${useColorPalatte} }} 默认从[option.color 调色
#${prefix} width(number) = ${defaultWidth|default(1)}
+<ExampleUIControlNumber value="${defaultWidth|default(1)}" min="0" step="0.5" />
+
${name}线宽。
#${prefix} type(string) = ${defaultType|default('solid')}
+<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
+
${name}线的类型。
可选：
diff --git a/zh/option/partial/symbol.md b/zh/option/partial/symbol.md
index bf0aa42..ebe6a8d 100644
--- a/zh/option/partial/symbol.md
+++ b/zh/option/partial/symbol.md
@@ -2,6 +2,8 @@
#${prefix} symbol(string{{ if: ${hasCallback} }}|Function{{ /if}}) = ${defaultSymbol}
+<ExampleUIControlEnum default="circle" options="circle,rect,roundRect,triangle,diamond,pin,arrow,none" />
+
${name}标记的图形。
{{ use: partial-icon }}
@@ -16,6 +18,8 @@ ${name}标记的图形。
#${prefix} symbolSize(number|Array{{ if: ${hasCallback} }}|Function{{ /if}}) = ${defaultSymbolSize}
+<ExampleUIControlNumber min="0" />
+
${name}标记的大小，可以设置成诸如 `10` 这样单一的数字，也可以用数组分开表示宽和高，例如 `[20, 10]` 表示标记宽为`20`，高为`10`。
{{ if: ${hasCallback} }}
@@ -28,6 +32,8 @@ ${name}标记的大小，可以设置成诸如 `10` 这样单一的数字，也
#${prefix} symbolRotate(number{{ if: ${hasCallback} }}|Function{{ /if}})
+<ExampleUIControlAngle min="-180" max="180" step="1" />
+
${name}标记的旋转角度（而非弧度）。正值表示逆时针旋转。注意在 `markLine` 中当 `symbol` 为 `'arrow'` 时会忽略 `symbolRotate` 强制设置为切线的角度。
{{ if: ${hasCallback} }}
@@ -46,6 +52,8 @@ ${name}标记的旋转角度（而非弧度）。正值表示逆时针旋转。
#${prefix} symbolOffset(Array) = [0, 0]
+<ExampleUIControlVector separate="true" dims="x,y" />
+
${name}标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置，但是如果 symbol 是自定义的矢量路径或者图片，就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。
例如 `[0, '50%']` 就是把自己向上移动了一半的位置，在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
diff --git a/zh/option/series/line.md b/zh/option/series/line.md
index c0d8ba0..00d834d 100644
--- a/zh/option/series/line.md
+++ b/zh/option/series/line.md
@@ -12,6 +12,34 @@
~[600x400](${galleryViewPath}line-aqi&edit=1&reset=1)
+<ExampleBaseOption name="cartesian-line" title="基础折线图">
+const option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line'
+ }]
+};
+</ExampleBaseOption>
+
+<ExampleBaseOption name="cartesian-line-empty-data" title="有空数据的折线图">
+const option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ data: [820, 932, 901, '-', 1290, 1330, 1320],
+ type: 'line'
+ }]
+};
+</ExampleBaseOption>
+
## type(string) = 'line'
{{use: partial-component-id(prefix="#")}}
@@ -35,9 +63,15 @@
) }}
## showSymbol(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否显示 symbol, 如果 `false` 则只有在 tooltip hover 的时候显示。
## showAllSymbol(boolean) = 'auto'
+
+<ExampleUIControlBoolean />
+
只在主轴为类目轴（`axis.type` 为 `'category'`）时有效。
可选值：
+ `'auto'`：默认，如果有足够空间则显示标志图形，否则随主轴标签间隔隐藏策略。
@@ -45,6 +79,9 @@
+ `false`：随主轴标签间隔隐藏策略。
## hoverAnimation(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否开启 hover 在拐点标志上的提示动画效果。
{{ use: partial-legend-hover-link }}
@@ -59,6 +96,9 @@
{{ use: partial-cursor }}
## connectNulls(boolean) = false
+
+<ExampleUIControlBoolean />
+
是否连接空数据。
{{use:partial-clip(
@@ -67,6 +107,8 @@
## step(string|boolean) = false
+<ExampleUIControlEnum options='start,middle,end' />
+
是否是阶梯线图。可以设置为 `true` 显示成阶梯线图，也支持设置成 `'start'`, `'middle'`, `'end'` 分别配置在当前点，当前点与下个点的中间点，下个点拐弯。
不同的配置效果如下：
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org