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/11/04 08:15:20 UTC
[incubator-echarts-doc] branch next updated: add zh docs for new
options in dataZoom, visualMap, timeline
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 5cdc590 add zh docs for new options in dataZoom, visualMap, timeline
5cdc590 is described below
commit 5cdc590afaf20a8252b594cdddca152a1ffc5b3c
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Nov 4 16:15:01 2020 +0800
add zh docs for new options in dataZoom, visualMap, timeline
---
asset/img/dataZoom-zone.png | Bin 0 -> 70513 bytes
en/option/series/bar.md | 11 +++
en/option/series/line.md | 1 +
zh/option/component/axisPointer.md | 4 +-
zh/option/component/data-zoom-slider.md | 133 ++++++++++++++++++++++++---
zh/option/component/timeline.md | 72 ++++++++-------
zh/option/component/tooltip.md | 4 +-
zh/option/component/visual-map-continuous.md | 70 ++++++++++++++
zh/option/partial/mark-point.md | 2 +-
zh/option/series/bar.md | 12 +++
zh/option/series/gauge.md | 8 ++
zh/option/series/line.md | 1 +
12 files changed, 270 insertions(+), 48 deletions(-)
diff --git a/asset/img/dataZoom-zone.png b/asset/img/dataZoom-zone.png
new file mode 100644
index 0000000..3f6f71b
Binary files /dev/null and b/asset/img/dataZoom-zone.png differ
diff --git a/en/option/series/bar.md b/en/option/series/bar.md
index 96a4f68..6323401 100644
--- a/en/option/series/bar.md
+++ b/en/option/series/bar.md
@@ -120,6 +120,17 @@ Configurations of select state. Available when [selectedMode](~series-bar.select
Name of stack. On the same category axis, the series with the same `stack` name would be put on top of each other.
+## sampling(string)
+
+The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.
+
+Options:
++ `'lttb'` Use Largest-Triangle-Three-Bucket algorithm to filter points. It will keep the trends and extremas.
++ `'average'` Use average value of filter points
++ `'max'` Use maximum value of filter points
++ `'min'` Use minimum value of filter points
++ `'sum'` Use sum of filter points
+
{{ use: partial-cursor() }}
{{ use: partial-barGrid(
diff --git a/en/option/series/line.md b/en/option/series/line.md
index ae5a3ee..1d17ecc 100644
--- a/en/option/series/line.md
+++ b/en/option/series/line.md
@@ -185,6 +185,7 @@ Here are 2 examples of broken line chart with dual value axis, showing the diffe
The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.
Options:
++ `'lttb'` Use Largest-Triangle-Three-Bucket algorithm to filter points. It will keep the trends and extremas.
+ `'average'` Use average value of filter points
+ `'max'` Use maximum value of filter points
+ `'min'` Use minimum value of filter points
diff --git a/zh/option/component/axisPointer.md b/zh/option/component/axisPointer.md
index cb39104..d5a4fc7 100644
--- a/zh/option/component/axisPointer.md
+++ b/zh/option/component/axisPointer.md
@@ -84,7 +84,7 @@ option = {
smooth: true,
symbol: 'circle',
symbolSize: 5,
- sampling: 'average',
+ sampling: 'lttb',
itemStyle: {
color: '#8ec6ad'
},
@@ -100,7 +100,7 @@ option = {
stack: 'a',
symbol: 'circle',
symbolSize: 5,
- sampling: 'average',
+ sampling: 'lttb',
itemStyle: {
color: '#d68262'
},
diff --git a/zh/option/component/data-zoom-slider.md b/zh/option/component/data-zoom-slider.md
index 24b10c3..f8d0c86 100644
--- a/zh/option/component/data-zoom-slider.md
+++ b/zh/option/component/data-zoom-slider.md
@@ -3,9 +3,11 @@
# dataZoom.slider(Object)
-**滑动条型数据区域缩放组件（dataZoomSlider）**
+**滑动条型数据区域缩放组件（dataZoomInside）**
-（参考[数据区域缩放组件（dataZoom）的介绍](~dataZoom)）
+滑动条型数据区域缩放组件提供了数据缩略图显示，缩放，刷选，拖拽，点击快速定位等数据筛选的功能。下图显示了该组件可交互部分
+
+
<ExampleBaseOption name="data-zoom-slider" title="滑块缩放的 dataZoom" title-en="DataZoom with Slider">
const data = [["2014-07-14",156],["2014-07-15",140],["2014-07-16",133],["2014-07-17",186],["2014-07-18",182],["2014-07-19",106],["2014-07-20",119],["2014-07-21",68],["2014-07-22",54],["2014-07-23",82],["2014-07-24",90],["2014-07-25",134],["2014-07-26",188],["2014-07-27",194],["2014-07-28",159],["2014-07-29",159],["2014-07-30",169],["2014-07-31",244],["2014-08-01",199],["2014-08-02",163],["2014-08-03",149],["2014-08-05",80],["2014-08-06",67],["2014-08-07",162],["2014-08-08",140],["2014-08 [...]
@@ -66,8 +68,7 @@ const option = {
{{ use: partial-line-style(
prefix = "###",
defaultWidth = 0.5,
- defaultOpacity = 0.3,
- defaultColor = '#2f4554'
+ defaultColor = '#d2dbee'
) }}
### areaStyle(Object)
@@ -76,8 +77,36 @@ const option = {
{{ use: partial-area-style(
prefix = "###",
- defaultOpacity = 0.3,
- defaultColor = 'rgba(47,69,84,0.3)'
+ defaultOpacity = 0.2,
+ defaultColor = 'd2dbee'
+) }}
+
+## selectedDataBackground(Object)
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+选中部分数据阴影的样式。
+
+### lineStyle(Object)
+
+选中部分阴影的线条样式
+
+{{ use: partial-line-style(
+ prefix = "###",
+ defaultWidth = 0.5,
+ defaultColor = '#8fb0f7'
+) }}
+
+### areaStyle(Object)
+
+选中部分阴影的填充样式
+
+{{ use: partial-area-style(
+ prefix = "###",
+ defaultOpacity = 0.2,
+ defaultColor = '#8fb0f7'
) }}
## fillerColor(Color) = 'rgba(167,183,204,0.4)'
@@ -96,14 +125,13 @@ const option = {
<ExampleUIControlIcon />
-手柄的 icon 形状，支持路径字符串，默认为：
+两侧缩放手柄的 icon 形状，支持路径字符串，默认为：
```js
-'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z'
+'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z'
```
{{ use: partial-icon-image-path() }}
-自定义 icon 见 [示例 area-simple](${galleryEditorPath}area-simple)
## handleSize(number|string) = '100%'
@@ -113,11 +141,51 @@ const option = {
## handleStyle(Object)
-手柄的样式配置，见 [示例 area-simple](${galleryEditorPath}area-simple)
+两侧缩放手柄的样式配置。
+
+{{ use: partial-item-style(
+ prefix = "##",
+ defaultColor = "#fff",
+ defaultBorderColor = "#ACB8D1"
+) }}
+
+## moveHandleIcon(string)
+
+<ExampleUIControlIcon />
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+移动手柄中间的 icon，支持路径字符串，默认为：
+
+```js
+'M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z'
+```
+
+{{ use: partial-icon-image-path() }}
+
+## moveHandleSize(number) = 7
+
+<ExampleUIControlNumber min="0" step="1" default="7" />
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+移动手柄的尺寸高度。
+
+## moveHandleStyle(Object)
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+移动手柄的样式配置。
{{ use: partial-item-style(
prefix = "##",
- defaultColor = "#a7b7cc"
+ defaultColor = "#D2DBEE"
) }}
## labelPrecision(number|string) = 'auto'
@@ -180,3 +248,46 @@ labelFormatter: function (value) {
componentName = 'dataZoom-slider'
) }}
+
+## brushSelect(boolean) = true
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+是否开启刷选功能。在下图的 brush 区域你可以按住鼠标左键后框选出选中部分。
+
+
+
+## brushStyle(Object)
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+刷选框样式设置。
+
+{{ use: partial-item-style(
+ prefix = "##",
+ defaultColor = "rgba(135,175,274,0.15)"
+) }}
+
+## emphasis(Object)
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+高亮样式设置。
+
+### handleStyle(Object)
+
+{{ use: partial-item-style(
+ prefix = "###"
+) }}
+
+### moveHandleStyle(Object)
+
+{{ use: partial-item-style(
+ prefix = "###"
+) }}
\ No newline at end of file
diff --git a/zh/option/component/timeline.md b/zh/option/component/timeline.md
index 6118781..1a65914 100644
--- a/zh/option/component/timeline.md
+++ b/zh/option/component/timeline.md
@@ -567,7 +567,7 @@ const option = {
prefix = "##",
name = "timeline ",
defaultWidth = 2,
- defaultColor = "'#304654'"
+ defaultColor = "'#DAE1F5'"
) }}
## label(Object)
@@ -605,7 +605,7 @@ const option = {
{{ use: partial-timeline-label(
prefix = "##",
- textStyleDefaultColor = "'#304654'"
+ textStyleDefaultColor = "'#A4B1D7'"
) }}
## itemStyle(Object)
@@ -617,7 +617,7 @@ const option = {
{{ use: partial-item-style(
prefix = "##",
name = "timeline ",
- defaultColor = "'#304654'",
+ defaultColor = "'#A4B1D7'",
defaultBorderWidth = 1
) }}
@@ -632,23 +632,16 @@ const option = {
name = 'timeline.checkpointStyle '
) }}
-### color(Color) = '#c23531'
-
-<ExampleUIControlColor default="#c23531" />
-
-`timeline`组件中『当前项』（`checkpoint`）的颜色。
-
-### borderWidth(number) = 5
-
-<ExampleUIControlNumber min="0" step="0.5" default="5" />
-
-`timeline`组件中『当前项』（`checkpoint`）的边框宽度。
-
-### borderColor(Color) = 'rgba(194,53,49, 0.5)'
-
-<ExampleUIControlColor default="rgba(194,53,49, 0.5)" />
-
-`timeline`组件中『当前项』（`checkpoint`）的边框颜色。
+{{ use: partial-item-style(
+ prefix = '##',
+ defaultColor = "'#316bf3'",
+ defaultBorderColor = "'#fff'",
+ defaultBorderWidth = 2,
+ defaultShadowBlur = 2,
+ defaultShadowOffsetX = 1,
+ defaultShadowOffsetY = 1,
+ defaultShadowColor = "'rgba(0, 0, 0, 0.3)'"
+) }}
### animation(boolean) = true
@@ -696,7 +689,7 @@ const option = {
是否显示『前进按钮』。
-### itemSize(number) = 22
+### itemSize(number) = 24
<ExampleUIControlNumber min="0" step="0.5" default="22" />
@@ -750,23 +743,38 @@ const option = {
{{ use: partial-icon-image-path() }}
-### color(Color) = '#304654'
+{{ use: partial-item-style(
+ prefix = '##',
+ defaultColor = "'#A4B1D7'",
+ defaultBorderColor = "'#A4B1D7'",
+ defaultBorderWidth = 1
+) }}
-<ExampleUIControlColor default="#304654" />
+## progress(Object)
-按钮颜色。
+进度条中的线条，拐点，标签的样式。
-### borderColor(Color) = '#304654'
+### lineStyle(Object)
-<ExampleUIControlColor default="#304654" />
+{{ use: partial-line-style(
+ prefix = "###",
+ defaultColor = "'#316BF3'"
+) }}
-按钮边框颜色。
+### itemStyle(Object)
-### borderWidth(number) = 1
+{{ use: partial-item-style(
+ prefix = "###",
+ defaultColor = "'#316BF3'"
+) }}
+
+### label(Object)
-<ExampleUIControlNumber min="0" step="0.5" default="1" />
+{{ use: partial-timeline-label(
+ prefix = "###",
+ textStyleDefaultColor = "'#6f778d'"
+) }}
-按钮边框线宽。
## emphasis(Object)
@@ -775,7 +783,7 @@ const option = {
{{ use: partial-timeline-label(
prefix = "###",
state = "emphasis",
- textStyleDefaultColor = "'#c23531'"
+ textStyleDefaultColor = "'#6f778d'"
) }}
### itemStyle(Object)
@@ -783,7 +791,7 @@ const option = {
{{ use: partial-item-style(
prefix = "###",
name = "timeline ",
- defaultColor = "'#c23531'",
+ defaultColor = "'#316BF3'",
defaultBorderWidth = 1
) }}
diff --git a/zh/option/component/tooltip.md b/zh/option/component/tooltip.md
index 84162c7..93d2289 100644
--- a/zh/option/component/tooltip.md
+++ b/zh/option/component/tooltip.md
@@ -88,7 +88,7 @@ const option = {
smooth: true,
symbol: 'circle',
symbolSize: 5,
- sampling: 'average',
+ sampling: 'lttb',
itemStyle: {
color: '#8ec6ad'
},
@@ -104,7 +104,7 @@ const option = {
stack: 'a',
symbol: 'circle',
symbolSize: 5,
- sampling: 'average',
+ sampling: 'lttb',
itemStyle: {
color: '#d68262'
},
diff --git a/zh/option/component/visual-map-continuous.md b/zh/option/component/visual-map-continuous.md
index 1c62bbe..9d61e9d 100644
--- a/zh/option/component/visual-map-continuous.md
+++ b/zh/option/component/visual-map-continuous.md
@@ -171,3 +171,73 @@ formatter: function (value) {
}
```
+## handleIcon(string)
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+<ExampleUIControlIcon />
+
+两端手柄的形状。默认为
+```js
+'M-11.39,9.77h0a3.5,3.5,0,0,1-3.5,3.5h-22a3.5,3.5,0,0,1-3.5-3.5h0a3.5,3.5,0,0,1,3.5-3.5h22A3.5,3.5,0,0,1-11.39,9.77Z'
+```
+
+{{ use: partial-icon-image-path() }}
+
+## handleSize(number|string) = '120%'
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+手柄的大小。可以是相对于组件尺寸的百分比大小。
+
+## handleStyle(Object)
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+手柄的样式配置。
+
+{{ use: partial-item-style(
+ prefix = "##",
+ defaultBorderColor = "#fff",
+ defaultBorderWidth = 1
+) }}
+
+
+## indicatorIcon(string) = 'circle'
+
+指示器的形状，默认为圆形。指示器在鼠标移到组件上，或者在移到系列图形上联动高亮的时候出现。
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+<ExampleUIControlIcon />
+
+
+## indicatorSize(number|string) = '50%'
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+指示器的大小。可以是相对于组件尺寸的百分比大小。
+
+## indicatorStyle(Object)
+
+指示器样式。
+
+{{ use: partial-item-style(
+ prefix = "##",
+ defaultBorderColor = "#fff",
+ defaultBorderWidth = 2,
+ defaultShadowBlur = 2,
+ defaultShadowOffsetX = 1,
+ defaultShadowOffsetY = 1,
+ defaultShadowColor = 'rgba(0,0,0,0.2)'
+) }}
diff --git a/zh/option/partial/mark-point.md b/zh/option/partial/mark-point.md
index fe028be..215494a 100644
--- a/zh/option/partial/mark-point.md
+++ b/zh/option/partial/mark-point.md
@@ -83,7 +83,7 @@
{{ if: ${hasCoord} }}
2. 用 [coord](~series-${seriesType}.markPoint.data.coord) 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置 `'min'`, `'max'`, `'average'`。
{{ /if }}{{ if: ${hasType} }}
-3. 直接用 [type](~series-${seriesType}.markPoint.data.type) 属性标注系列中的最大值，最小值。这时候可以使用 [valueIndex](~series-${seriesType}.markPoint.data.valueIndex) 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 [valueDim](~series-${seriesType}.markPoint.data.valueDim) 指定在哪个维度上的最大值、最小值、平均值。
+3. 直接用 [type](~series-${seriesType}.markPoint.data.type) 属性标注系列中的最大值，最小值。这时候可以使用 [valueIndex](~series-${seriesType}.markPoint.data.valueIndex) 或者 [valueDim](~series-${seriesType}.markPoint.data.valueDim) 指定是在哪个维度上的最大值、最小值、平均值。
{{ /if }}
当多个属性同时存在时，优先级按上述的顺序。
diff --git a/zh/option/series/bar.md b/zh/option/series/bar.md
index d225ba4..6c90c10 100644
--- a/zh/option/series/bar.md
+++ b/zh/option/series/bar.md
@@ -198,6 +198,18 @@ option = {
数据堆叠，同个类目轴上系列配置相同的`stack`值可以堆叠放置。
+## sampling(string)
+
+柱状图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点。
+
+可选：
++ `'lttb'` 采用 Largest-Triangle-Three-Bucket 算法，可以最大程度保证采样后线条的趋势，形状和极值。
++ `'average'` 取过滤点的平均值
++ `'max'` 取过滤点的最大值
++ `'min'` 取过滤点的最小值
++ `'sum'` 取过滤点的和
+
+
{{ use: partial-cursor() }}
{{ use: partial-barGrid(
diff --git a/zh/option/series/gauge.md b/zh/option/series/gauge.md
index e84af88..142a7bf 100644
--- a/zh/option/series/gauge.md
+++ b/zh/option/series/gauge.md
@@ -479,6 +479,10 @@ formatter: function (value) {
##${prefix} valueAnimation(boolean) = true
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
是否开启标签的数字动画。
#${prefix} detail(Object)
@@ -503,6 +507,10 @@ formatter: function (value) {
##${prefix} valueAnimation(boolean) = true
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
是否开启标签的数字动画。
##${prefix} width(number) = 100
diff --git a/zh/option/series/line.md b/zh/option/series/line.md
index b39986a..383830a 100644
--- a/zh/option/series/line.md
+++ b/zh/option/series/line.md
@@ -274,6 +274,7 @@ const option = {
折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点。
可选：
++ `'lttb'` 采用 Largest-Triangle-Three-Bucket 算法，可以最大程度保证采样后线条的趋势，形状和极值。
+ `'average'` 取过滤点的平均值
+ `'max'` 取过滤点的最大值
+ `'min'` 取过滤点的最小值
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org