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 130e593 example: add UI on axis,grid,legend component
130e593 is described below
commit 130e593fc5cadda2d784384dd8cfc0def1357706
Author: pissang <bm2736...@gmail.com>
AuthorDate: Thu Jun 18 00:05:10 2020 +0800
example: add UI on axis,grid,legend component
---
zh/option/component/axis-common.md | 116 ++++++++++++++++++++++++++++++++++++-
zh/option/component/grid.md | 41 +++++++++++++
zh/option/component/legend.md | 106 +++++++++++++++++++++++++++++++++
zh/option/component/x-axis.md | 43 ++++++++++++++
zh/option/component/y-axis.md | 87 ++++++++++++++++++++++++++++
zh/option/series/pie.md | 2 +-
zh/option/series/scatter.md | 2 +-
7 files changed, 394 insertions(+), 3 deletions(-)
diff --git a/zh/option/component/axis-common.md
b/zh/option/component/axis-common.md
index 630c3c3..7b675cd 100644
--- a/zh/option/component/axis-common.md
+++ b/zh/option/component/axis-common.md
@@ -22,11 +22,18 @@
#${prefix} axisLine(Object)
坐标轴轴线相关设置。
+
##${prefix} show(boolean) = ${defaultShow|default(true)}
+
+<ExampleUIControlBoolean default="true" />
+
是否显示坐标轴轴线。
{{ if: ${componentType} == 'xAxis' || ${componentType} == 'yAxis' }}
##${prefix} onZero(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
##${prefix} onZeroAxisIndex(number)
@@ -34,13 +41,21 @@ X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一
{{ /if }}
##${prefix} symbol(string|Array) = 'none'
+
+<ExampleUIControlEnum default="none"
options="none,circle,rect,roundRect,triangle,diamond,pin,arrow" />
+
轴线两边的箭头。可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即
`'none'`。两端都显示箭头可以设置为 `'arrow'`，只在末端显示箭头可以设置为 `['none', 'arrow']`。
##${prefix} symbolSize(Array) = [10, 15]
+
+<ExampleUIControlVector default="10,15" />
+
轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）。
##${prefix} symbolOffset(Array|number) = [0, 0]
+<ExampleUIControlVector default="0,0" />
+
轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；如果是数字，表示这两个箭头使用同样的偏移。
##${prefix} lineStyle(Object)
@@ -53,11 +68,17 @@ X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一
{{if: !${hideShow} }}
##${prefix} show(boolean) = ${defaultShow|default(true)}
+
+<ExampleUIControlBoolean default="${defaultShow|default(true)}" />
+
是否显示刻度标签。
{{ /if }}
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix} interval(number|Function) = 'auto'
+
+<ExampleUIControlNumber min="0" step="1" />
+
{{ use: partial-axis-interval(
name="坐标轴刻度标签",
isAxisLabel=true,
@@ -67,26 +88,41 @@ X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一
{{ if: ${hasInside|default(true)} }}
##${prefix} inside(boolean) = false
+
+<ExampleUIControlBoolean />
+
刻度标签是否朝内，默认朝外。
{{ /if }}
{{ if: ${componentType} !== 'angleAxis' }}
##${prefix} rotate(number) = 0
+
+<ExampleUIControlAngle min="-90" max="90" step="1" />
+
刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。
{{ /if }}
##${prefix} margin(number) = 8
+
+<ExampleUIControlNumber default="8" step="0.5" />
+
刻度标签与轴线之间的距离。
##${prefix} formatter(string|Function) = null
{{use: axis-common-formatter-desc}}
##${prefix} showMinLabel(boolean) = null
+
+<ExampleUIControlBoolean />
+
是否显示最小 tick 的 label。可取值 `true`, `false`, `null`。默认自动判定（即如果标签重叠，不会显示最小 tick 的
label）。
##${prefix} showMaxLabel(boolean) = null
+
+<ExampleUIControlBoolean />
+
是否显示最大 tick 的 label。可取值 `true`, `false`, `null`。默认自动判定（即如果标签重叠，不会显示最大 tick 的
label）。
{{ use: partial-text-style(
@@ -99,6 +135,8 @@ X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一
<!-- Overwrite color -->
##${prefix} color(Color|Function)
+<ExampleUIControlColor />
+
刻度标签文字的颜色，默认取
[axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color)。支持回调函数，格式如下
```js
@@ -120,10 +158,16 @@ textStyle: {
#${prefix} axisTick(Object)
坐标轴刻度相关设置。
##${prefix} show(boolean) = ${defaultShow|default(true)}
+
+<ExampleUIControlBoolean default="${defaultShow|default(true)}" />
+
是否显示坐标轴刻度。
{{ if: ${hasAlignWithLabel|default(true)} }}
##${prefix} alignWithLabel(boolean) = false
+
+<ExampleUIControlBoolean default="false" />
+
类目轴中在 `boundaryGap` 为 `true` 的时候有效，可以保证刻度线和标签对齐。如下图：
@@ -131,6 +175,9 @@ textStyle: {
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix} interval(number|Function) = 'auto'
+
+<ExampleUIControlNumber min="0" step="1" />
+
{{ use: partial-axis-interval(
name="坐标轴刻度",
componentType=${componentType}
@@ -139,10 +186,16 @@ textStyle: {
{{ if: ${hasInside|default(true)} }}
##${prefix} inside(boolean) = false
+
+<ExampleUIControlBoolean />
+
坐标轴刻度是否朝内，默认朝外。
{{ /if }}
##${prefix} length(number) = 5
+
+<ExampleUIControlNumber min="0" step="0.5" default="5" />
+
坐标轴刻度的长度。
##${prefix} lineStyle(Object)
@@ -178,12 +231,21 @@ textStyle: {
~[600x350](${galleryViewPath}line-log&edit=1&reset=1)
##${prefix} show(boolean) = ${defaultShow|default(false)}
+
+<ExampleUIControlBoolean default="${defaultShow|default(true)}" />
+
是否显示次刻度线。
##${prefix} splitNumber(number) = 5
+
+<ExampleUIControlNumber min="1" step="1" default="5" />
+
次刻度线分割数，默认会分割成 5 段
##${prefix} length(number) = 3
+
+<ExampleUIControlNumber min="0" step="0.5" default="3" />
+
次刻度线的长度。
##${prefix} lineStyle(Object)
@@ -196,6 +258,9 @@ textStyle: {
) }}
<!-- Overwrite color -->
###${prefix} color(Color)
+
+<ExampleUIControlColor />
+
刻度线的颜色，默认取
[axisLine.lineStyle.color](~${componentType}.axisLine.lineStyle.color)。
@@ -204,11 +269,18 @@ textStyle: {
#${prefix} splitLine(Object)
坐标轴在 [grid](~grid) 区域中的分隔线。
+
##${prefix} show(boolean) = ${defaultShow|default(true)}
+
+<ExampleUIControlBoolean default="${defaultShow|default(true)}" />
+
是否显示分隔线。默认数值轴显示，类目轴不显示。
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix} interval(number|Function) = 'auto'
+
+<ExampleUIControlNumber min="0" step="1" />
+
{{ use: partial-axis-interval(
name="坐标轴分隔线",
componentType=${componentType}
@@ -226,6 +298,9 @@ textStyle: {
<!-- overwrite color -->
###${prefix} color(Array|string) = ['#ccc']
+
+<ExampleUIControlColor />
+
分隔线颜色，可以设置成单个颜色。
也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
@@ -247,6 +322,9 @@ splitLine: {
坐标轴在 [grid](~grid) 区域中的次分隔线。次分割线会对齐次刻度线
[minorTick](~${componentType}.minorTick)
##${prefix} show(boolean) = ${defaultShow|default(false)}
+
+<ExampleUIControlBoolean default="${defaultShow|default(true)}" />
+
是否显示次分隔线。默认不显示。
@@ -267,6 +345,9 @@ splitLine: {
{{ if: ${hasLabelInterval|default(true)} }}
##${prefix} interval(number|Function) = 'auto'
+
+<ExampleUIControlNumber min="0" step="1" />
+
{{ use: partial-axis-interval(
name="坐标轴分隔区域",
componentType=${componentType}
@@ -274,7 +355,11 @@ splitLine: {
{{ /if }}
##${prefix} show(boolean) = ${defaultShow|default(false)}
+
+<ExampleUIControlBoolean default="${defaultShow|default(true)}" />
+
是否显示分隔区域。
+
##${prefix} areaStyle(Object)
分隔区域的样式设置。
###${prefix} color(Array) = ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
@@ -310,10 +395,14 @@ splitLine: {
{{ if: ${componentType} !== 'angleAxis' }}
#${prefix} name(string)
+<ExampleUIControlText />
+
坐标轴名称。
#${prefix} nameLocation(string) = 'end'
+<ExampleUIControlEnum options="start,middle,end" default="end" />
+
坐标轴名称显示位置。
**可选：**
@@ -334,19 +423,28 @@ splitLine: {
#${prefix} nameGap(number) = 15
+<ExampleUIControlNumber step="0.5" default="15" />
+
坐标轴名称与轴线之间的距离。
#${prefix} nameRotate(number) = null
+<ExampleUIControlAngle min="-360" max="360" step="1" />
+
坐标轴名字旋转，角度值。
#${prefix} inverse(boolean) = false
-是否是反向坐标轴。ECharts 3 中新加。
+<ExampleUIControlBoolean />
+
+是否是反向坐标轴。
{{/if}}
#${prefix} boundaryGap(boolean|Array)
+
+<ExampleUIControlBoolean />
+
坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
类目轴中 `boundaryGap` 可以配置为 `true` 和 `false`。默认为
`true`，这时候[刻度](~${componentType}.axisTick)只是作为分隔线，标签和数据点都会在两个[刻度](~${componentType}.axisTick)之间的带(band)中间。
@@ -359,6 +457,8 @@ boundaryGap: ['20%', '20%']
#${prefix} min(number|string|Function) = null
+<ExampleUIControlNumber />
+
坐标轴刻度最小值。
可以设置成特殊值 `'dataMin'`，此时取数据在该轴上的最小值作为最小刻度。
@@ -379,6 +479,8 @@ min: function (value) {
#${prefix} max(number|string|Function) = null
+<ExampleUIControlNumber />
+
坐标轴刻度最大值。
可以设置成特殊值 `'dataMax'`，此时取数据在该轴上的最大值作为最大刻度。
@@ -399,6 +501,8 @@ max: function (value) {
#${prefix} scale(boolean) = false
+<ExampleUIControlBoolean />
+
只在数值轴中（[type](~${componentType}.type): 'value'）有效。
是否是脱离 0 值比例。设置成 `true` 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
@@ -407,12 +511,16 @@ max: function (value) {
#${prefix} splitNumber(number) = 5
+<ExampleUIControlNumber min="1" step="1" default="5" />
+
坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
在类目轴中无效。
#${prefix} minInterval(number) = 0
+<ExampleUIControlNumber />
+
自动计算的坐标轴最小间隔大小。
例如可以设置成`1`保证坐标轴分割刻度显示成整数。
@@ -427,6 +535,8 @@ max: function (value) {
#${prefix} maxInterval(number)
+<ExampleUIControlNumber />
+
自动计算的坐标轴最大间隔大小。
例如，在时间轴（（[type](~${componentType}.type): 'time'））可以设置成 `3600 * 24 * 1000`
保证坐标轴分割刻度最大为一天。
@@ -441,6 +551,8 @@ max: function (value) {
#${prefix} interval(number)
+<ExampleUIControlNumber />
+
强制设置坐标轴分割间隔。
因为 [splitNumber](~${componentType}.splitNumber)
是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合
[min](~${componentType}.min)、[max](~${componentType}.max) 强制设定刻度划分，一般不建议使用。
@@ -449,6 +561,8 @@ max: function (value) {
#${prefix} logBase(number) = 10
+<ExampleUIControlNumber default="10" />
+
对数轴的底数，只在对数轴中（[type](~${componentType}.type): 'log'）有效。
diff --git a/zh/option/component/grid.md b/zh/option/component/grid.md
index 853e639..010e860 100644
--- a/zh/option/component/grid.md
+++ b/zh/option/component/grid.md
@@ -11,10 +11,49 @@
~[600x400](${galleryViewPath}scatter-anscombe-quartet&edit=1&reset=1)
+<ExampleBaseOption title="基础网格示例" name="grid">
+const option = {
+ color: ['#3398DB'],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+ }
+ },
+ grid: {
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ axisTick: {
+ alignWithLabel: true
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: '直接访问',
+ type: 'bar',
+ barWidth: '60%',
+ data: [10, 52, 200, 334, 390, 330, 220]
+ }
+ ]
+};
+
+</ExampleBaseOption>
+
{{use: partial-component-id(prefix="#")}}
## show(boolean) = false
+<ExampleUIControlBoolean default="false" />
+
是否显示直角坐标系网格。
{{ use: partial-rect-layout-width-height(
@@ -27,6 +66,8 @@
## containLabel(boolean) = false
+<ExampleUIControlBoolean default="false" />
+
grid 区域是否包含坐标轴的[刻度标签](~yAxis.axisLabel)。
+ containLabel 为 `false` 的时候：
diff --git a/zh/option/component/legend.md b/zh/option/component/legend.md
index dfeb113..ac15747 100644
--- a/zh/option/component/legend.md
+++ b/zh/option/component/legend.md
@@ -12,8 +12,93 @@ ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便
当图例数量过多时，可以使用 [滚动图例（垂直）](${galleryEditorPath}pie-legend&edit=1&reset=1) 或
[滚动图例（水平）](${galleryEditorPath}radar2&edit=1&reset=1)，参见：[legend.type](~legend.type)
+<ExampleBaseOption name="legend" title="基础图例">
+
+option = {
+ color: ['#003366', '#006699', '#4cabce', '#e5323e'],
+ dataset: {
+ source: [
+ ['type', '2012', '2013', '2014', '2015', '2016'],
+ ['Forest', 320, 332, 301, 334, 390],
+ ['Steppe', 220, 182, 191, 234, 290],
+ ['Desert', 150, 232, 201, 154, 190],
+ ['Wetland', 98, 77, 101, 99, 40]
+ ]
+ },
+ legend: {
+ },
+ xAxis: {
+ type: 'category',
+ axisTick: {show: false}
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ seriesLayoutBy: 'row'
+ },
+ {
+ type: 'bar',
+ seriesLayoutBy: 'row'
+ },
+ {
+ type: 'bar',
+ seriesLayoutBy: 'row'
+ },
+ {
+ type: 'bar',
+ seriesLayoutBy: 'row'
+ }
+ ]
+};
+</ExampleBaseOption>
+
+<ExampleBaseOption name="legend-more" title="多源图例">
+const option = {
+ legend: {
+ width: 350,
+ left: 0
+ },
+ tooltip: {},
+ dataset: {
+ source: [
+ ['product', '2012', '2013', '2014', '2015'],
+ ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
+ ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
+ ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
+ ]
+ },
+ xAxis: [
+ {type: 'category', gridIndex: 0},
+ {type: 'category', gridIndex: 1}
+ ],
+ yAxis: [
+ {gridIndex: 0},
+ {gridIndex: 1}
+ ],
+ grid: [
+ {bottom: '55%'},
+ {top: '55%'}
+ ],
+ series: [
+ // These series are in the first grid.
+ {type: 'bar', seriesLayoutBy: 'row'},
+ {type: 'bar', seriesLayoutBy: 'row'},
+ {type: 'bar', seriesLayoutBy: 'row'},
+ // These series are in the second grid.
+ {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
+ {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
+ {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
+ {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
+ ]
+};
+
+</ExampleBaseOption>
+
## type(string)
+<ExampleUIControlEnum options="plain,scroll" />
+
图例的类型。可选值：
+ `'plain'`：普通图例。缺省就是普通图例。
@@ -39,6 +124,7 @@ ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便
## show(boolean) = true
+<ExampleUIControlBoolean default="true" />
{{use: partial-rect-layout-width-height(componentName="图例")}}
@@ -107,12 +193,16 @@ formatter: function (name) {
## selectedMode(string|boolean) = true
+<ExampleUIControlBoolean options="true,false,single,multiple" />
+
图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 `false` 关闭。
除此之外也可以设成 `'single'` 或者 `'multiple'` 使用单选或者多选模式。
## inactiveColor(Color) = '#ccc'
+<ExampleUIControlColor default="#ccc" />
+
图例关闭时的颜色。
## selected(Object)
@@ -293,6 +383,8 @@ data: [{
## pageIconColor(string) = '#2f4554'
+<ExampleUIControlColor default="#2f4554" />
+
[legend.type](~legend.type) 为 `'scroll'` 时有效。
翻页按钮的颜色。
@@ -301,6 +393,8 @@ data: [{
## pageIconInactiveColor(string) = '#aaa'
+<ExampleUIControlColor default="#aaa" />
+
[legend.type](~legend.type) 为 `'scroll'` 时有效。
翻页按钮不激活时（即翻页到头时）的颜色。
@@ -309,6 +403,8 @@ data: [{
## pageIconSize(number|Array) = 15
+<ExampleUIControlVector default="15,15" dims="w,h" />
+
[legend.type](~legend.type) 为 `'scroll'` 时有效。
翻页按钮的大小。可以是数字，也可以是数组，如 `[10, 3]`，表示 `[宽，高]`。
@@ -325,10 +421,14 @@ data: [{
## animation(boolean)
+<ExampleUIControlBoolean default="true" />
+
图例翻页是否使用动画。
## animationDurationUpdate(number) = 800
+<ExampleUIControlNumber min="0" default="800" step="20" />
+
图例翻页时的动画时长。
@@ -391,18 +491,24 @@ selector: ['all', 'inverse']
## selectorPosition(string) = 'auto'
+<ExampleUIControlEnum options="auto,start,end" />
+
{{ use: partial-version(version = "4.4.0") }}
选择器的位置，可以放在图例的尾部或者头部，对应的值分别为 `'end'` 和
`'start'`。默认情况下，图例横向布局的时候，选择器放在图例的尾部；图例纵向布局的时候，选择器放在图例的头部。
## selectorItemGap(number) = 7
+<ExampleUIControlNumber min="0" default="7" step="0.5" />
+
{{ use: partial-version(version = "4.4.0") }}
选择器按钮之间的间隔。
## selectorButtonGap(number) = 10
+<ExampleUIControlNumber min="0" default="10" step="0.5" />
+
{{ use: partial-version(version = "4.4.0") }}
选择器按钮与图例组件之间的间隔。
diff --git a/zh/option/component/x-axis.md b/zh/option/component/x-axis.md
index 68f2e44..5d7c626 100644
--- a/zh/option/component/x-axis.md
+++ b/zh/option/component/x-axis.md
@@ -5,10 +5,49 @@
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置
[offset](~xAxis.offset) 属性防止同个位置多个 x 轴的重叠。
+<ExampleBaseOption title="基础 x 轴示例" name="x-axis">
+const option = {
+ color: ['#3398DB'],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {},
+ xAxis: [
+ {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: '直接访问',
+ type: 'bar',
+ barWidth: '60%',
+ data: [10, 52, 200, 334, 390, 330, 220]
+ }
+ ]
+};
+</ExampleBaseOption>
+
+<ExampleBaseOption title="Minor Ticks" name="minor-ticks-x-axis">
+// https://echarts.apache.org/examples/zh/editor.html?c=line-function
+const option =
{"animation":false,"grid":{"top":40,"left":50,"right":40,"bottom":50},"xAxis":{"name":"x","minorTick":{"show":true},"splitLine":{"lineStyle":{"color":"#999"}},"minorSplitLine":{"show":true,"lineStyle":{"color":"#ddd"}}},"yAxis":{"name":"y","min":-100,"max":100,"minorTick":{"show":true},"splitLine":{"lineStyle":{"color":"#999"}},"minorSplitLine":{"show":true,"lineStyle":{"color":"#ddd"}}},"dataZoom":[{"show":true,"type":"inside","filterMode":"none","xAxisIndex":[0],"startVa
[...]
+</ExampleBaseOption>
+
{{use: partial-component-id(prefix="#")}}
## show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
是否显示 x 轴。
## gridIndex(number) = 0
@@ -17,6 +56,8 @@ x 轴所在的 grid 的索引，默认位于第一个 grid。
## position(string)
+<ExampleUIControlEnum options="top,bottom" default="bottom" />
+
x 轴的位置。
可选：
@@ -27,6 +68,8 @@ x 轴的位置。
## offset(number) = 0
+<ExampleUIControlNumber step="0.5" />
+
X 轴相对于默认位置的偏移，在相同的 `position` 上有多个 X 轴的时候有用。
{{ use: axis-common(
diff --git a/zh/option/component/y-axis.md b/zh/option/component/y-axis.md
index a5d2924..bc3eadc 100644
--- a/zh/option/component/y-axis.md
+++ b/zh/option/component/y-axis.md
@@ -5,10 +5,93 @@
直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置
[offset](~yAxis.offset) 属性防止同个位置多个 Y 轴的重叠。
+<ExampleBaseOption title="基础 y 轴示例" name="y-axis">
+const option = {
+ color: ['#3398DB'],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {},
+ xAxis: [
+ {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: '直接访问',
+ type: 'bar',
+ barWidth: '60%',
+ data: [10, 52, 200, 334, 390, 330, 220]
+ }
+ ]
+};
+</ExampleBaseOption>
+
+<ExampleBaseOption title="Log 轴示例" name="y-axis-log">
+option = {
+ legend: {
+ left: 'left',
+ data: ['2的指数', '3的指数']
+ },
+ xAxis: {
+ type: 'category',
+ name: 'x',
+ splitLine: {show: false},
+ data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ yAxis: {
+ type: 'log',
+ name: 'y',
+ minorTick: {
+ show: true
+ },
+ minorSplitLine: {
+ show: true
+ }
+ },
+ series: [
+ {
+ name: '3的指数',
+ type: 'line',
+ data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
+ },
+ {
+ name: '2的指数',
+ type: 'line',
+ data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
+ },
+ {
+ name: '1/2的指数',
+ type: 'line',
+ data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
+ }
+ ]
+};
+
+</ExampleBaseOption>
+
{{use: partial-component-id(prefix="#")}}
## show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
是否显示 y 轴。
## gridIndex(number) = 0
@@ -17,6 +100,8 @@ y 轴所在的 grid 的索引，默认位于第一个 grid。
## position(string)
+<ExampleUIControlEnum options="left,right" default="left" />
+
y 轴的位置。
可选：
@@ -27,6 +112,8 @@ y 轴的位置。
## offset(number) = 0
+<ExampleUIControlNumber step="0.5" />
+
Y 轴相对于默认位置的偏移，在相同的 `position` 上有多个 Y 轴的时候有用。
{{ use: axis-common(
diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md
index ad49f16..aa9b486 100644
--- a/zh/option/series/pie.md
+++ b/zh/option/series/pie.md
@@ -85,7 +85,7 @@ const option = {
## selectedMode(boolean|string) = false
-<ExampleUIControlEnum options="single,multiple" />
+<ExampleUIControlEnum options="true,false,single,multiple" />
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选`'single'`，`'multiple'`，分别表示单选还是多选。
diff --git a/zh/option/series/scatter.md b/zh/option/series/scatter.md
index a24acc5..d9f697c 100644
--- a/zh/option/series/scatter.md
+++ b/zh/option/series/scatter.md
@@ -12,7 +12,7 @@ const option = {
title: {
text: '身高体重分布',
subtext: '抽样调查来自: Heinz 2003',
- left: 'center
+ left: 'center'
},
grid: {
left: '3%',
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
