Supplement coord sys related API doc, custom series doc, media query doc.

Author: 100pah

README.md

@@ -63,21 +63,24 @@ These global variables can be used in doc:
 + `${galleryViewPath}`
 + `${galleryEditorPath}`
 + `${websitePath}`
++ `${handbookPath}`
+
+Note: All of them are ended with a `/`, therefore, use them like `${galleryEditorPath}pie-legend`.
 
 See samples in "Reference of echarts-examples or other links"
 
 ### Reference of echarts-examples or Other Links
 
-Embed an example in doc:
+Embed an example in doc (display the example directly in doc with an iframe. To avoid performance issues, do not overuse it.):
 ```md
-~[700X300](${galleryEditorPath}pie-legend&edit=1&reset=1)
+~[700X300](${galleryViewPath}pie-legend&edit=1&reset=1)
 ~[700x300](${galleryViewPath}doc-example/aria-pie&edit=1&reset=1)
 ```
 
 Provide an example link in doc:
 ```md
 [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1)
-[aria pie](${galleryViewPath}doc-example/aria-pie&edit=1&reset=1)
+[aria pie](${galleryEditorPath}doc-example/aria-pie&edit=1&reset=1)
 ```
 
 Provide a website link in doc:
@@ -94,8 +97,10 @@ A `~` can be used to refer to a option item in the same doc. For example:
 
 If intending to reference an anchor in different doc, it can be:
 ```md
-In api.html, reference
 [itemStyle](option.html#series.itemStyle)
+[action.highlight](api.html#action.highlight)
+[Custom Series](tutorial.html#Custom%20Series)
+[Use ECharts with bundler and NPM](${handbookPath}basics/import)
 ```
 
 

en/api/echarts-instance.md

@@ -169,7 +169,7 @@ Most series only support `coordinateSystemUsage: 'data'` - such as [series-line]
 
 See also [${componentNameInLink}.coordinateSystem](~${componentNameInLink}.coordinateSystem).
 
-## coord(Array|string)
+## coord(Array|number|string)
 
 {{ use: partial-version(version = ${version|minVersion('6.0.0')}) }}
 
@@ -185,6 +185,8 @@ Examples: [sparkline in matrix](${galleryEditorPath}matrix-sparkline&edit=1&rese
 
 > Note: when [coordinateSystemUsage](~${componentNameInLink}.coordinateSystemUsage) is `'data'`, the input of coordinate system is `series.data[i]` rather than this `coord`.
 
+The format this `coord` is defined by each coordinate system, and it's the same as the second parameter of [chart.convertToPixel](api.html#echartsInstance.convertToPixel).
+
 
 {{ if: ${cartesian2d} }}
 ## xAxisIndex(number) = 0

en/option/partial/coord-sys.md

@@ -147,10 +147,10 @@ The first parameter of `renderItem`, including:
     },
     coordSys: {
         type: 'calendar',
-        x: // {number} x of calendar rect
-        y: // {number} y of calendar rect
-        width: // {number} width of calendar rect
-        height: // {number} height of calendar rect
+        x: // {number} x of the calendar component rect
+        y: // {number} y of the calendar component rect
+        width: // {number} width of the calendar component rect
+        height: // {number} height of the calendar component rect
         cellWidth: // {number} calendar cellWidth
         cellHeight: // {number} calendar cellHeight
         rangeInfo: {
@@ -160,6 +160,13 @@ The first parameter of `renderItem`, including:
             dayCount: // day count in calendar.
         }
     },
+    coordSys: {
+        type: 'matrix',
+        x: // {number} x of the matrix component rect
+        y: // {number} y of the matrix component rect
+        width: // {number} width of the matrix component rect
+        height: // {number} height of the matrix component rect
+    },
     coordSys: {
         type: 'geo',
         x: // {number} x of geo rect
@@ -207,12 +214,15 @@ Get value on the given dimension.
 
 Convert data to coordinate.
 
-```
-@param {Array.<number>} data.
-@return {Array.<number>} Point on canvas, at least includes [x, y].
-        In polar, it also contains:
-        polar: [x, y, radius, angle]
-```
+The behavior, parameters and returns are the same as [chart.convertToPixel](api.html#echartsInstance.convertToPixel) (only exclude its first parameter `finder`).
+
+##### layout(Function)
+
+Convert data to the corresponding layout info based on the current coordinate system.
+
+The behavior, parameters and returns are the same as [chart.convertToLayout](api.html#echartsInstance.convertToLayout) (only exclude its first parameter `finder`).
+
+See [matrix api.layout example](${galleryEditorPath}matrix-mini-bar-data-collection).
 
 ##### size(Function)
 

en/option/series/custom.md

@@ -10,7 +10,7 @@ Besides, sometimes one chart may need to be displayed on both PC and mobile-end,
 To solve this problem, ECharts improved component location algorithm, and implemented responsive ability similar to [CSS Media Query](https://www.w3.org/TR/css3-mediaqueries/).
 
 
-## Location and layout of ECharts components
+## Location and Layout of ECharts Components
 
 
 Most *component* and *series* follow two locating methods:
@@ -212,7 +212,11 @@ But if the container DOM node needs to change size with dragging, you need to pa
 
 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:
 
-~[750x700](${galleryViewPath}doc-example/bar-media-timeline&edit=1&reset=1)
+## Some Examples
+
+Use [matrix coordinate system (grid layout)](option.html#matrix) and media query:
+
+~[750x500](${galleryViewPath}matrix-grid-layout&edit=1&reset=1)
+
+This is another [media query example](${galleryEditorPath}doc-example/bar-media-timeline&edit=1&reset=1).