You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/12/22 09:43:22 UTC
[incubator-echarts-doc] 02/02: doc: update doc for media query.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
commit b8da83dc8657beb52749fa400a7d6eb474c3cbf2
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Dec 22 17:42:49 2020 +0800
doc: update doc for media query.
---
en/option/option.md | 23 ++++++++++++++++++++++-
en/tutorial/media-query.md | 13 ++++++-------
zh/option/option.md | 26 +++++++++++++++++++++++++-
zh/tutorial/media-query.md | 13 ++++++-------
4 files changed, 59 insertions(+), 16 deletions(-)
diff --git a/en/option/option.md b/en/option/option.md
index 03c946f..239096d 100644
--- a/en/option/option.md
+++ b/en/option/option.md
@@ -110,4 +110,25 @@ For how time value (like `1491339540396`, `'2013-01-04'`, ...) is parsed in echa
# options(Array) = undefined
-Option array used in [timeline](option.html#timeline) or [media query](option.html#media). Each item of this array is an echarts option (`ECUnitOption`).
+Option array used in [timeline](option.html#timeline). Each item of this array is an echarts option (`ECUnitOption`).
+
+
+# media(Array)
+
+See [Responsive Mobile-End](tutorial.html#Responsive%20Mobile-End) for details.
+
+## query(Object)
+
+If more than one properties used, it means "and".
+
+### minWidth(number) = undefined
+
+### maxHeight(number) = undefined
+
+### minAspectRatio(number) = undefined
+
+That is the radio of `width / height`. The value can be like `1.3`.
+
+## option(Object)
+
+Each item of this array is an echarts option (`ECUnitOption`). It will be applied when this query is matched.
diff --git a/en/tutorial/media-query.md b/en/tutorial/media-query.md
index 34d88ab..a30216e 100644
--- a/en/tutorial/media-query.md
+++ b/en/tutorial/media-query.md
@@ -87,12 +87,11 @@ The following format should be followed if you need to set Media Query in option
```javascript
option = {
- baseOption: { // here defines base option
- title: {...},
- legend: {...},
- series: [{...}, {...}, ...],
- ...
- },
+ // here defines baseOption
+ title: {...},
+ legend: {...},
+ series: [{...}, {...}, ...],
+ ...,
media: [ // each rule of media query is defined here
{
query: {...}, // write rule here
@@ -211,7 +210,7 @@ But if the container DOM node needs to change size with dragging, you need to pa
**`media` in *composite option* does not support merge**
-When `chart.setOption(rawOption)` for the second, third, fourth, fifth, and etc. times, if `rawOption` is `composite option` (which means it contains `media` list), then, the new `rawOption.media` list will not merge with the old `media`. instead, it will simply replace the option. Of course, `rawOption.baseOption` will still merge with the old option normally.
+When `chart.setOption(rawOption)` for the second, third, fourth, fifth, and etc. times, if `rawOption` is `composite option` (which means it contains `media` list), then, the new `rawOption.media` list will not merge with the old `media`. instead, it will simply replace the option. Of course, `baseOption` will still merge with the old option normally.
<br>
Finally, let's see an example combining with timeline:
diff --git a/zh/option/option.md b/zh/option/option.md
index 58b4579..22b48c0 100644
--- a/zh/option/option.md
+++ b/zh/option/option.md
@@ -125,5 +125,29 @@ ECharts 2 里是底层强制使用单独的层绘制高亮图形，但是会带
# options(Array)
-用于 [timeline](option.html#timeline) 或者 [media query](option.html#media) 的 option 数组。数组的每一项是一个 echarts option (`ECUnitOption`)。
+用于 [timeline](option.html#timeline) 的 option 数组。数组的每一项是一个 echarts option (`ECUnitOption`)。
+
+# media(Array)
+
+请参见 [移动端自适应](tutorial.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94)。
+
+## query(Object)
+
+同时写两个属性，表示 “且”。
+
+### minWidth(number) = undefined
+
+`minWidth: 200` 表示『大于等于 200px 宽度』。
+
+### maxHeight(number) = undefined
+
+`minHeight: 200` 表示『大于等于 200px 高度』。
+
+### minAspectRatio(number) = undefined
+
+长宽比。值如 `1.3`。
+
+## option(Object)
+
+数组的每一项是一个 echarts option (`ECUnitOption`)，当此 query 被匹配时，会使用这个 option 。
diff --git a/zh/tutorial/media-query.md b/zh/tutorial/media-query.md
index 02c559d..b37557f 100644
--- a/zh/tutorial/media-query.md
+++ b/zh/tutorial/media-query.md
@@ -90,12 +90,11 @@ ECharts2 中的 `x/x2/y/y2` 的命名方式仍被兼容，对应于 `left/right/
```javascript
option = {
- baseOption: { // 这里是基本的『原子option』。
- title: {...},
- legend: {...},
- series: [{...}, {...}, ...],
- ...
- },
+ // 这里是基本的『原子option』。
+ title: {...},
+ legend: {...},
+ series: [{...}, {...}, ...],
+ ...,
media: [ // 这里定义了 media query 的逐条规则。
{
query: {...}, // 这里写规则。
@@ -214,7 +213,7 @@ media: [
**『复合 option』 中的 `media` 不支持 merge**
-也就是说，当第二（或三、四、五 ...）次 `chart.setOption(rawOption)` 时，如果 `rawOption` 是 `复合option`（即包含 `media` 列表），那么新的 `rawOption.media` 列表不会和老的 `media` 列表进行 merge，而是简单替代。当然，`rawOption.baseOption` 仍然会正常和老的 option 进行merge。
+也就是说，当第二（或三、四、五 ...）次 `chart.setOption(rawOption)` 时，如果 `rawOption` 是 `复合option`（即包含 `media` 列表），那么新的 `rawOption.media` 列表不会和老的 `media` 列表进行 merge，而是简单替代。当然，`baseOption` 仍然会正常和老的 option 进行merge。
其实，很少有场景需要使用『复合 option』来多次 `setOption`，而我们推荐的做法是，使用 mediaQuery 时，第一次setOption使用『复合 option』，后面 `setOption` 时仅使用 『原子 option』，也就是仅仅用 setOption 来改变 `baseOption`。
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org