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/06/10 15:44:04 UTC
[incubator-echarts-doc] branch master updated: fix: enhance section
title.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/master by this push:
new 1d46c8b fix: enhance section title.
1d46c8b is described below
commit 1d46c8bd7349ba84aa11bd256d2e73724b1f6e44
Author: 100pah <su...@gmail.com>
AuthorDate: Wed Jun 10 23:43:40 2020 +0800
fix: enhance section title.
---
en/tutorial/custom-series.md | 22 +++------
en/tutorial/data-zoom.md | 9 +---
en/tutorial/dataset.md | 105 +++++------------------------------------
en/tutorial/drag-example.md | 11 ++---
en/tutorial/media-query.md | 15 +++---
en/tutorial/rich-text.md | 51 +++-----------------
en/tutorial/visual-map.md | 12 ++---
zh/tutorial/custom-series.md | 21 +++------
zh/tutorial/data-zoom.md | 7 +--
zh/tutorial/dataset.md | 109 +++++--------------------------------------
zh/tutorial/drag-example.md | 9 ++--
zh/tutorial/graphic.md | 3 +-
zh/tutorial/media-query.md | 6 +--
zh/tutorial/rich-text.md | 50 +++-----------------
zh/tutorial/visual-map.md | 8 +---
15 files changed, 74 insertions(+), 364 deletions(-)
diff --git a/en/tutorial/custom-series.md b/en/tutorial/custom-series.md
index 9185319..63e5bbd 100644
--- a/en/tutorial/custom-series.md
+++ b/en/tutorial/custom-series.md
@@ -14,8 +14,7 @@ Why echarts supports `custom series`? There are endless chart types in the world
Let's begin the tutorial.
-<br>
-<h2>(I) The method `renderItem`</h2>
+## (I) The method `renderItem`
The snippet of graphic elements rendering should be written in `renderItem` method my developers. For example:
@@ -117,8 +116,7 @@ Having `renderItem` provided, 90% of the work of creating custom series has been
-<br>
-<h2>(II) Make the extent of axes fit the data</h2>
+## (II) Make the extent of axes fit the data
There is axes in some coordinate systems, such as [cartesian2d (grid)](option.html#grid)and [polar](option.html#polar). The extent of an axis should fit the data automatically, otherwise the graphic elements would be overflow the bounding box of the coordinate system. So, for example, in [cartesian2d (grid)](option.html#grid), developers should specify that which dimensions correspond to `x` axis and which to `y` axis use the property [encode](option.html#series-custom.encode):
@@ -148,8 +146,7 @@ option = {
-<br>
-<h2>(III) Set tooltip content</h2>
+## (III) Set tooltip content
Of course [tooltip.formatter](option.html#tooltip.formatter) can be used to define the content in tooltip. But it is easier to do that by setting [encode](option.html#series-custom.encode) and [dimensions](option.html#series-custom.dimensions):
@@ -189,8 +186,7 @@ option = {
Several other issues about `custom series` are introduced below.
-<br>
-<h2>(IV) Shape clipping when overflow the coordinates area</h2>
+## (IV) Shape clipping when overflow the coordinates area
When use `custom series` with [dataZoom](option.html#dataZoom), [dataZoom.filterMode](option.html#dataZoom.filterMode) usually be set as `'weakFilter'`, which prevent `dataItem` from being filtered when only part of its dimensions are out of the current data window. For example:
@@ -224,11 +220,9 @@ option = {
In the example above, `dim` and `dim2` corresponds to `x` axis, and the `dataZoom` component constrols the data window of `x` axis. If part of a `dataItem` is overflow the extent of `x` axis (the value on `dim1` is overflow and the value on `dim2` is not) while zooming, the `dataItem` will not be filtered if `dataZoom.filterMode = 'weakFilter'` set. Thus the `dataItem` can be still rendered (usually be partially rendered by using `echarts.graphic.clipRectByRect` to clip the exceeding part).
See the example mentioned above [Profile](${galleryEditorPath}custom-profile).
-<br>
-<br>
-<h2>(V) About dataIndex</h2>
+## (V) About dataIndex
Developers had better notice that in [renderItem.arguments.params](option.html#series-custom.renderItem.arguments.params) `dataIndexInside` and `dataIndex` is different:
@@ -240,8 +234,7 @@ Developers had better notice that in [renderItem.arguments.params](option.html#s
[renderItem.arguments.api](option.html#series-custom.renderItem.arguments.api) uses `dataIndexInside` as the input parameter but not `dataIndex`, because conversion from `dataIndex` to `dataIndexInside` is time-consuming.
-<br>
-<h2>(VI) Event listener</h2>
+## (VI) Event listener
```js
@@ -276,8 +269,7 @@ chart.on('click', {element: 'aaa'}, function (params) {
```
-<br>
-<h2>(VII) Custom vector shapes</h2>
+## (VII) Custom vector shapes
[SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData) is supported, which enables to use shapes that are created in vector tool. See [path](option.html#series-custom.renderItem.return_path), and examples: [icons](https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-calendar-icon), [shapes](https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-gantt-flight).
diff --git a/en/tutorial/data-zoom.md b/en/tutorial/data-zoom.md
index 9e4a6d0..dfaa2c2 100644
--- a/en/tutorial/data-zoom.md
+++ b/en/tutorial/data-zoom.md
@@ -11,10 +11,7 @@ Following is an example of `datazoom component` [dataZoom](option.html#dataZoom)
-
-
-<br>
-<h2>Introduction of data zoom component (dataZoom)</h2>
+## Introduction of data zoom component (dataZoom)
Data overview by default, and detail by requirement is a basic interaction need of data visualization. `dataZoom` component can implement this function in rectangular coordinate ([grid](option.html#grid)) and polar coordinate ([polar](option.html#polar).
@@ -52,9 +49,7 @@ Data overview by default, and detail by requirement is a basic interaction need
-
-<br>
-<h2>Adding dataZoom component</h2>
+## Adding dataZoom component
First, only add dataZoom component to x-axis. Following examples shows the code.
diff --git a/en/tutorial/dataset.md b/en/tutorial/dataset.md
index c06565c..0ed62fd 100644
--- a/en/tutorial/dataset.md
+++ b/en/tutorial/dataset.md
@@ -44,13 +44,7 @@ ECharts4 starts to provide `dataset` component, which brings benefits below:
+ Support more common data format (like 2d-array, object-array), to avoid data transform works for users.
-<br>
-
----
-
-<br>
-
-**Get started**
+## Get started
This is a simplest example of `dataset`:
@@ -117,13 +111,7 @@ option = {
};
```
-<br>
-
----
-
-<br>
-
-**Mapping from data to graphic**
+## Mapping from data to graphic
In this tutorial, we make charts following this methodology: base on data, config the rule to map data to graphic, namely, encode the data to graphic.
@@ -135,13 +123,7 @@ Generally, this mapping can be performed:
Let's illustrate them in detail below.
-<br>
-
----
-
-<br>
-
-**Mapping by column or row**
+## Mapping by column or row
Giving dataset, users can configure whether columns or rows of a dataset will be mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by [series.seriesLayoutBy](option.html#series.seriesLayoutBy). The optional values are:
@@ -195,14 +177,7 @@ This is the result:
~[800x600](${galleryViewPath}dataset-series-layout-by&edit=1&reset=1)
-
-<br>
-
----
-
-<br>
-
-**Dimension**
+## Dimension
Before introducing `encode`, we should clarify the concept of `dimension`.
@@ -256,15 +231,7 @@ The optional values of dimension types can be:
-
-<br>
-
----
-
-<br>
-
-
-**Mapping from data to graphic (encode)**
+## Mapping from data to graphic (encode)
Having the concept of dimension clarified, we can use [encode](option.html#series.encode) to map data to graphic:
@@ -362,14 +329,7 @@ There is an other example for `encode`:
-<br>
-
----
-
-<br>
-
-
-**Visual encoding (color, symbol, etc.)**
+## Visual encoding (color, symbol, etc.)
We can use [visualMap](option.html#visualMap) component to map data to visual channel like color, symbol size, etc.. More info about it can be checked in its [doc](option.html#visualMap).
@@ -377,14 +337,7 @@ We can use [visualMap](option.html#visualMap) component to map data to visual ch
-<br>
-
----
-
-<br>
-
-
-**Default encoding**
+## Default encoding
For some common cases (line chart, bar chart, scatter plot, candlestick, pie, funnel, etc.), EChart provides default encoding settings, by which chart will be displayed even if no `encode` option is specified. (If `encode` option is specified, default encoding will not be applied.) The rule of default encoding should not be too complicated. Basically it is:
@@ -399,14 +352,7 @@ If the default rule does not meet the requirements, configure the `encode` yours
~[800x400](${galleryViewPath}dataset-default&edit=1&reset=1)
-<br>
-
----
-
-<br>
-
-
-**Q & A**
+## Q & A
Q: How to map the third column to X axis, and map the fifth column to Y axis?
@@ -512,14 +458,7 @@ Q: We have specified `encode`, but why it does not work?
A: Maybe we can try to check typo, for example, the dimension name is `'Life Expectancy'`, be we typed `'Life Expectency'` in `encode` option.
-
-<br>
-
----
-
-<br>
-
-**Various formats in dataset**
+## Various formats in dataset
In lots of cases, data is described in 2d-table. For example, some data processing software like MS Excel, Numbers are based on 2d-table. The data can be exported as JSON format and input to `dataset.source`.
@@ -549,13 +488,7 @@ dataset: [{
```
-<br>
-
----
-
-<br>
-
-**Multiple datasets and references**
+## Multiple datasets and references
Multiple datasets can be defined, and series can refer them by [series.datasetIndex](option.html#series.datasetIndex).
@@ -579,14 +512,7 @@ var option = {
```
-
-<br>
-
----
-
-<br>
-
-**ECharts3 data setting approach (series.data) can be used normally**
+## ECharts3 data setting approach (series.data) can be used normally
The data setting approach before ECharts4 can still be used normally. If a series has declared [series.data](option.html#series.data), it will be used but not `dataset`.
@@ -616,14 +542,7 @@ The data setting approach before ECharts4 can still be used normally. If a serie
In fact, setting data via [series.data](option.html#series.data) is not deprecated and useful in some cases. For example, for some charts, like [treemap](option.html#series-treemap), [graph](option.html#series-graph), [lines](option.html#series-lines), that do not apply table data, `dataset` is not supported for yet. Moreover, for the case of large data rendering (for example, millions of data), [appendData](api.html#echartsInstance.appendData) is probably needed to load data incremental [...]
-<br>
-
----
-
-<br>
-
-
-**Others**
+## Others
Currently, not all types of series support dataset. Series that support dataset includes:
diff --git a/en/tutorial/drag-example.md b/en/tutorial/drag-example.md
index 3be7716..bf19a37 100644
--- a/en/tutorial/drag-example.md
+++ b/en/tutorial/drag-example.md
@@ -10,8 +10,7 @@ This example mainly implements that dragging points of a curve and by which the
-<br>
-<h2>[ Part 1 ] Implement basic dragging</h2>
+## [ Part 1 ] Implement basic dragging
First of all, we create a basic [line chart (line series)](option.html#series-line):
@@ -134,9 +133,7 @@ window.addEventListener('resize', function () {
-
-<br>
-<h2>[ Part 2 ] Add tooltip component</h2>
+## [ Part 2 ] Add tooltip component
Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use [tooltip component](option.html#tooltip) to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.
@@ -186,9 +183,7 @@ function hideTooltip(dataIndex) {
The API [dispatchAction](api.html#echartsInstance.dispatchAction) is used to show/hide tooltip content, where actions [showTip](api.html#action.tooltip.showTip) and [hideTip](api.html#action.tooltip.hideTip) is dispatched.
-
-<br>
-<h2>[ Part 3 ] Full code</h2>
+## [ Part 3 ] Full code
Full code is shown as follow:
diff --git a/en/tutorial/media-query.md b/en/tutorial/media-query.md
index 50969ef..4822b99 100644
--- a/en/tutorial/media-query.md
+++ b/en/tutorial/media-query.md
@@ -10,11 +10,10 @@ 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](http://www.w3.org/TR/css3-mediaqueries/).
-<br>
-<h2>Location and layout of ECharts components</h2>
+## Location and layout of ECharts components
-Most *component* and *series* follow two locating methods:
+Most *component* and *series* follow two locating methods:
<br>
**left/right/top/bottom/width/height locating method:**
@@ -35,7 +34,7 @@ Each of those six parameters can be *absolute value* or *percentage* or *locatio
+ can be set to `top: 'middle'`, for vertically centering.
-The concept of these six parameters is similar to that in CSS:
+The concept of these six parameters is similar to that in CSS:
+ left: distance to left border of DOM container.
+ right: distance to right border of DOM container.
@@ -77,13 +76,11 @@ Naming of `x/x2/y/y2` in ECharts2 is still compatible, as well as the newly adde
To be compatible with ECharts2, there may be settings that seems to be odd, e.g.: `left: 'right'`, `left: 'left'`, `top: 'bottom'`, `top: 'top'`, which are equal to: `right: 0`, `left: 0`, `bottom: 0`, `top: 0`, in a more normal expression.
-
-<br>
-<h2>Media Query</h2>
+## Media Query
[Media Query](http://www.w3.org/TR/css3-mediaqueries/#media1) provides the ability to be responsive with container size.
-As shown in the following example, you may drag **the circle in bottom-right corner** to see the legend and series change layout position and method with container size.
+As shown in the following example, you may drag **the circle in bottom-right corner** to see the legend and series change layout position and method with container size.
~[750x600](${galleryViewPath}doc-example/pie-media&edit=1&reset=1)
The following format should be followed if you need to set Media Query in option:
@@ -126,7 +123,7 @@ In the above example, `baseOption` and every option in `media` are all *simple o
**query: **
-A `query` is in the following format:
+A `query` is in the following format:
```javascript
{
diff --git a/en/tutorial/rich-text.md b/en/tutorial/rich-text.md
index 157e38b..4d9da14 100644
--- a/en/tutorial/rich-text.md
+++ b/en/tutorial/rich-text.md
@@ -39,14 +39,7 @@ For example:
~[340x240](${galleryViewPath}doc-example/text-block-fragment&edit=1&reset=1)
-<br>
-
----
-
-<br>
-
-
-**Options about Text**
+## Options about Text
echarts provides plenty of text options, including:
@@ -111,14 +104,7 @@ label: {
> Notice: `width` 和 `height` only work when `rich` specified.
-
-<br>
-
----
-
-<br>
-
-**Basic Styles of Text, Text Block and Text Fragment**
+## Basic Styles of Text, Text Block and Text Fragment
Basic font style can be set to text: `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`.
@@ -132,14 +118,7 @@ For example:
~[700x300](${galleryViewPath}doc-example/text-options&edit=1&reset=1)
-
-<br>
-
----
-
-<br>
-
-**Label Position**
+## Label Position
`label` option can be use in charts like `bar`, `line`, `scatter`, etc. The position of a label, can be specified by [label.position](option.html#series-scatter.label.position)、[label.distance](option.html#series-scatter.label.distance).
@@ -149,14 +128,7 @@ For example:
> Notice, there are different optional values of `position` by different chart types. And `distance` is not supported in every chart. More detailed info can be checked in [option doc](option.html).
-
-<br>
-
----
-
-<br>
-
-**Label Rotation**
+## Label Rotation
Sometimes label is needed to be rotated. For example:
@@ -166,13 +138,8 @@ Sometimes label is needed to be rotated. For example:
Notice, `align` and `verticalAlign` are applied firstly, then rotate.
-<br>
-
----
-
-<br>
-**Layout and Alignment of Text fragment**
+## Layout and Alignment of Text fragment
To understand the layout rule, every text fragment can be imagined as a `inline-block` dom element in CSS.
@@ -205,13 +172,7 @@ For example:
-<br>
-
----
-
-<br>
-
-**Effects: Icon, Horizontal Rule, Title Block, Simple Table**
+## Effects: Icon, Horizontal Rule, Title Block, Simple Table
See example:
diff --git a/en/tutorial/visual-map.md b/en/tutorial/visual-map.md
index 5a75308..1b951a6 100644
--- a/en/tutorial/visual-map.md
+++ b/en/tutorial/visual-map.md
@@ -14,8 +14,8 @@ Besides, ECharts provides [visualMap component](option.html#visualMap) for gener
Next, we are going to introduce how to use `visualMap` component.
-<br>
-<h2>Data and Dimension</h2>
+
+## Data and Dimension
Data are usually stored in [series.data](option.html#series.data) in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of `dataItem`s. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).
@@ -55,13 +55,7 @@ series: {
Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, `visualMap` is what you need. Most likely, [scatter charts](option.html#series-scatter) use radius to represent the third dimension.
-
-
-
-
-
-<br>
-<h2>visualMap Component</h2>
+## visualMap Component
visualMap component defines the mapping from *which dimension of data* to *what visual elements*.
diff --git a/zh/tutorial/custom-series.md b/zh/tutorial/custom-series.md
index c345560..4d7a7de 100644
--- a/zh/tutorial/custom-series.md
+++ b/zh/tutorial/custom-series.md
@@ -14,8 +14,7 @@ echarts 为什么会要支持 `自定义系列` 呢？echarts 内置支持的图
下面来介绍开发者怎么使用 [自定义系列（custom series）](option.html#series-custom)。
-<br>
-<h2>（一）renderItem 方法</h2>
+## （一）renderItem 方法
开发者自定义的图形元素渲染逻辑，是通过书写 `renderItem` 函数实现的，例如：
@@ -111,8 +110,7 @@ var option = {
-<br>
-<h2>（二）使坐标轴的范围自适应数据范围</h2>
+## （二）使坐标轴的范围自适应数据范围
在 [直角坐标系（grid）](option.html#grid)、[极坐标系（polar）](option.html#polar) 中都有坐标轴。坐标轴的刻度范围需要自适应当前显示出的数据的范围，否则绘制出的图形会超出去。所以，例如，在 [直角坐标系（grid）](option.html#grid) 中，使用自定义系列的开发者，需要设定，`data` 中的哪些维度会对应到 `x` 轴上，哪些维度会对应到 `y` 轴上。这件事通过 [encode](option.html#series-custom.encode) 来设定。例如：
@@ -142,8 +140,7 @@ option = {
-<br>
-<h2>（三）设定 tooltip</h2>
+## （三）设定 tooltip
当然，使用 [tooltip.formatter](option.html#tooltip.formatter) 可以任意定制 tooltip 中的内容。但是还有更简单的方法，通过[encode](option.html#series-custom.encode) 和 [dimensions](option.html#series-custom.dimensions) 来设定：
@@ -185,8 +182,7 @@ option = {
下面介绍几个其他细节要点。
-<br>
-<h2>（四）超出坐标系范围的截取</h2>
+## （四）超出坐标系范围的截取
与 [dataZoom](option.html#dataZoom) 结合使用的时候，常常使用会设置 [dataZoom.filterMode](option.html#dataZoom.filterMode) 为 'weakFilter'。这个设置的意思是：当 `dataItem` 部分超出坐标系边界的时候，`dataItem` 不会整体被过滤掉。例如：
@@ -221,8 +217,7 @@ option = {
-<br>
-<h2>（五）关于 dataIndex</h2>
+## （五）关于 dataIndex
开发者如果使用到的话应注意，[renderItem.arguments.params](option.html#series-custom.renderItem.arguments.params) 中的 `dataIndex` 和 `dataIndexInside` 是有区别的：
@@ -233,8 +228,7 @@ option = {
-<br>
-<h2>（六）事件监听</h2>
+## （六）事件监听
```js
@@ -268,8 +262,7 @@ chart.on('click', {element: 'aaa'}, function (params) {
-<br>
-<h2>（七）自定义矢量图形</h2>
+## （七）自定义矢量图形
自定义系列能支持使用 [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData) 定义矢量路径。从而可以使用矢量图工具中做出的图形。参见：[path](option.html#series-custom.renderItem.return_path)，以及例子：[icons](${websitePath}/examples/editor.html?c=custom-calendar-icon) 和 [shapes](${websitePath}/examples/editor.html?c=custom-gantt-flight)。
diff --git a/zh/tutorial/data-zoom.md b/zh/tutorial/data-zoom.md
index 2844ca0..4c3b28b 100644
--- a/zh/tutorial/data-zoom.md
+++ b/zh/tutorial/data-zoom.md
@@ -12,9 +12,7 @@
-
-<br>
-<h2>数据区域缩放组件（dataZoom）介绍</h2>
+## 数据区域缩放组件（dataZoom）介绍
『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。`dataZoom` 组件能够在直角坐标系（[grid](option.html#grid)）、极坐标系（[polar](option.html#polar)）中实现这一功能。
@@ -53,8 +51,7 @@
-<br>
-<h2>在代码加入 dataZoom 组件</h2>
+## 在代码加入 dataZoom 组件
先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：
diff --git a/zh/tutorial/dataset.md b/zh/tutorial/dataset.md
index 0ee4d60..b9eeeb1 100644
--- a/zh/tutorial/dataset.md
+++ b/zh/tutorial/dataset.md
@@ -44,13 +44,7 @@ option = {
+ 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。
-<br>
-
----
-
-<br>
-
-**入门例子**
+## 入门例子
下面是一个最简单的 `dataset` 的例子：
@@ -112,13 +106,7 @@ option = {
```
-<br>
-
----
-
-<br>
-
-**数据到图形的映射**
+## 数据到图形的映射
本篇里，我们制作数据可视化图表的逻辑是这样的：基于数据，在配置项中指定如何映射到图形。
@@ -132,13 +120,7 @@ option = {
-<br>
-
----
-
-<br>
-
-**按行还是按列做映射**
+## 按行还是按列做映射
有了数据表之后，使用者可以灵活得配置：数据如何对应到轴和图形系列。
@@ -192,14 +174,7 @@ option = {
~[800x600](${galleryViewPath}dataset-series-layout-by&edit=1&reset=1)
-
-<br>
-
----
-
-<br>
-
-**维度（dimension）**
+## 维度（dimension）
介绍 `encode` 之前，首先要介绍“维度（dimension）”的概念。
@@ -251,16 +226,7 @@ var option2 = {
+ `'int'`: 如果设置成 `'int'`，在存储时候会使用 `TypedArray`，对性能优化有好处。
-
-
-<br>
-
----
-
-<br>
-
-
-**数据到图形的映射（encode）**
+## 数据到图形的映射（encode）
了解了维度的概念后，我们就可以使用 [encode](option.html#series.encode) 来做映射。总体是这样的感觉：
@@ -354,31 +320,14 @@ encode: {
~[800x600](${galleryViewPath}dataset-encode1&edit=1&reset=1)
-
-
-<br>
-
----
-
-<br>
-
-
-**视觉通道（颜色、尺寸等）的映射**
+## 视觉通道（颜色、尺寸等）的映射
我们可以使用 [visualMap](option.html#visualMap) 组件进行视觉通道的映射。详见 `visualMap` 文档的介绍。这是一个示例：
~[500x400](${galleryViewPath}dataset-encode0&edit=1&reset=1)
-
-<br>
-
----
-
-<br>
-
-
-**默认的映射**
+## 默认的映射
指的一提的是，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K线图等）、饼图、漏斗图，给出了简单的默认的映射，从而不需要配置 `encode` 也可以出现图表（一旦给出了 `encode`，那么就不会采用默认映射）。默认的映射规则不易做得复杂，基本规则大体是：
+ 在坐标系中（如直角坐标系、极坐标系等）
@@ -392,14 +341,7 @@ encode: {
~[800x400](${galleryViewPath}dataset-default&edit=1&reset=1)
-<br>
-
----
-
-<br>
-
-
-**几个常见的映射设置方式**
+## 几个常见的映射设置方式
问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？
@@ -503,14 +445,7 @@ var option = {
答：可以查查有没有拼错，比如，维度名是：`'Life Expectancy'`，encode 中拼成了 `'Life Expectency'`。
-
-<br>
-
----
-
-<br>
-
-**数据的各种格式**
+## 数据的各种格式
多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 `dataset.source` 中，在不少情况下可以免去一些数据处理的步骤。
@@ -540,13 +475,7 @@ dataset: [{
```
-<br>
-
----
-
-<br>
-
-**多个 dataset 和他们的引用**
+## 多个 dataset 和他们的引用
可以同时定义多个 dataset。系列可以通过 [series.datasetIndex](option.html#series.datasetIndex) 来指定引用哪个 dataset。例如：
@@ -573,14 +502,7 @@ var option = {
```
-
-<br>
-
----
-
-<br>
-
-**ECharts 3 的数据设置方式（series.data）仍正常使用**
+## ECharts 3 的数据设置方式（series.data）仍正常使用
ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 [series.data](option.html#series.data)， 那么就会使用 [series.data](option.html#series.data) 而非 `dataset`。
@@ -610,14 +532,7 @@ ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果
其实，[series.data](option.html#series.data) 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 [treemap](option.html#series-treemap)、[graph](option.html#series-graph)、[lines](option.html#series-lines) 等，现在仍不支持在 dataset 中设置，仍然需要使用 [series.data](option.html#series.data)。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 [appendData](api.html#echartsInstance.appendData) 进行增量加载，这种情况不支持使用 `dataset`。
-<br>
-
----
-
-<br>
-
-
-**其他**
+## 其他
目前并非所有图表都支持 dataset。支持 dataset 的图表有：
`line`、`bar`、`pie`、`scatter`、`effectScatter`、`parallel`、`candlestick`、`map`、`funnel`、`custom`。
diff --git a/zh/tutorial/drag-example.md b/zh/tutorial/drag-example.md
index 6464bac..df1533a 100644
--- a/zh/tutorial/drag-example.md
+++ b/zh/tutorial/drag-example.md
@@ -11,8 +11,7 @@
echarts 本身没有提供封装好的『拖拽改变图表』功能，因为现在认为这个功能并不足够有通用性。那么这个功能就留给开发者用 API 实现，这也有助于开发者按自己的需要个性定制。
-<br>
-<h2>（一）实现基本的拖拽功能</h2>
+## （一）实现基本的拖拽功能
在这个例子中，基础的图表是一个 [折线图 (series-line)](option.html#series-line)。参见如下配置：
@@ -127,8 +126,7 @@ window.addEventListener('resize', function () {
-<br>
-<h2>（二）添加 tooltip 组件</h2>
+## （二）添加 tooltip 组件
到此，拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中，被拖拽的点的 data 值的变化状况，我们可以使用 [tooltip](option.html#tooltip) 组件来实时显示这个值。但是，tooltip 有其默认的『显示』『隐藏』触发规则，在我们拖拽的场景中并不适用，所以我们还要手动定制 tooltip 的『显示』『隐藏』行为。
@@ -179,8 +177,7 @@ function hideTooltip(dataIndex) {
-<br>
-<h2>（三）全部代码</h2>
+## （三）全部代码
总结一下，全部的代码如下：
diff --git a/zh/tutorial/graphic.md b/zh/tutorial/graphic.md
index 54426de..6baad4b 100644
--- a/zh/tutorial/graphic.md
+++ b/zh/tutorial/graphic.md
@@ -7,8 +7,7 @@
-<br>
-<h2>图形元素介绍</h2>
+## 图形元素介绍
**如下例子：**
diff --git a/zh/tutorial/media-query.md b/zh/tutorial/media-query.md
index ac9e782..d5ff7cd 100644
--- a/zh/tutorial/media-query.md
+++ b/zh/tutorial/media-query.md
@@ -10,8 +10,7 @@ ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的
为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 [CSS Media Query](http://www.w3.org/TR/css3-mediaqueries/) 的自适应能力。
-<br>
-<h2>ECharts组件的定位和布局</h2>
+## ECharts组件的定位和布局
大部分『组件』和『系列』会遵循两种定位方式：
@@ -80,8 +79,7 @@ ECharts2 中的 `x/x2/y/y2` 的命名方式仍被兼容，对应于 `left/right/
-<br>
-<h2>Media Query</h2>
+## Media Query
[Media Query](http://www.w3.org/TR/css3-mediaqueries/#media1) 提供了『随着容器尺寸改变而改变』的能力。
diff --git a/zh/tutorial/rich-text.md b/zh/tutorial/rich-text.md
index b718a93..a064227 100644
--- a/zh/tutorial/rich-text.md
+++ b/zh/tutorial/rich-text.md
@@ -40,14 +40,7 @@ echarts v3.7 以后，支持了富文本标签，能够：
~[340x240](${galleryViewPath}doc-example/text-block-fragment&edit=1&reset=1)
-<br>
-
----
-
-<br>
-
-
-**文本样式相关的配置项**
+## 文本样式相关的配置项
echarts 提供了丰富的文本标签配置项，包括：
@@ -112,13 +105,7 @@ label: {
> 注意：如果不定义 `rich`，不能指定文字块的 `width` 和 `height`。
-<br>
-
----
-
-<br>
-
-**文本、文本框、文本片段的基本样式和装饰**
+## 文本、文本框、文本片段的基本样式和装饰
每个文本可以设置基本的字体样式：`fontStyle`、`fontWeight`、`fontSize`、`fontFamily`。
@@ -132,13 +119,7 @@ label: {
~[700x300](${galleryViewPath}doc-example/text-options&edit=1&reset=1)
-<br>
-
----
-
-<br>
-
-**标签的位置**
+## 标签的位置
对于折线图、柱状图、散点图等，均可以使用 `label` 来设置标签。标签的相对于图形元素的位置，一般使用 [label.position](option.html#series-scatter.label.position)、[label.distance](option.html#series-scatter.label.distance) 来配置。
@@ -148,13 +129,7 @@ label: {
> 注意：`position` 在不同的图中可取值有所不同。`distance` 并不是在每个图中都支持。详情请参见 [option 文档](option.html)。
-<br>
-
----
-
-<br>
-
-**标签的旋转**
+## 标签的旋转
某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：
@@ -164,13 +139,8 @@ label: {
注意，逻辑是，先使用 `align` 和 `verticalAlign` 定位，再旋转。
-<br>
-
----
-
-<br>
-**文本片段的排版和对齐**
+## 文本片段的排版和对齐
关于排版方式，每个文本片段，可以想象成 CSS 中的 `inline-block`，在文档流中按行放置。
@@ -202,13 +172,7 @@ label: {
~[800x220](${galleryViewPath}doc-example/text-fragment-align&edit=1&reset=1)
-<br>
-
----
-
-<br>
-
-**特殊效果：图标、分割线、标题块、简单表格**
+## 特殊效果：图标、分割线、标题块、简单表格
看下面的例子：
@@ -280,5 +244,3 @@ rich: {
简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。参见本文最开始的 [例子](${galleryViewPath}pie-rich-text&edit=1&reset=1)。
-
-
diff --git a/zh/tutorial/visual-map.md b/zh/tutorial/visual-map.md
index 64af24f..9bed0d2 100644
--- a/zh/tutorial/visual-map.md
+++ b/zh/tutorial/visual-map.md
@@ -15,8 +15,7 @@ ECharts 的每种图表本身就内置了这种映射过程，比如折线图把
下面对 `visualMap` 组件的使用方式进行简要的介绍。
-<br>
-<h2>数据和维度</h2>
+## 数据和维度
ECharts中的数据，一般存放于 [series.data](option.html#series.data) 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是『线性表』、『树』、『图』等。但他们都有个共性：都是『数据项（dataItem）』的集合。每个数据项含有『数据值（value）』和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。
@@ -58,10 +57,7 @@ series: {
-
-
-<br>
-<h2>visualMap 组件</h2>
+## visualMap 组件
visualMap 组件定义了把数据的『哪个维度』映射到『什么视觉元素上』。
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org