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/06/15 14:40:24 UTC
[incubator-echarts-doc] branch live-example updated: example: add
more ui config on bar
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 2e8a355 example: add more ui config on bar
2e8a355 is described below
commit 2e8a3555eb3f5a29fd18cc4fff95caba125a34bc
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Jun 15 22:40:08 2020 +0800
example: add more ui config on bar
---
src/App.vue | 5 +++
src/components/DocContent.vue | 5 ++-
src/components/LiveExample.vue | 6 ++-
src/components/OptionControl.vue | 17 ++++++--
src/controls/ControlAngle.vue | 12 ------
src/controls/ControlBoolean.vue | 2 +-
src/controls/ControlEnum.vue | 44 +++++++++++++++++++++
src/controls/ControlNumber.vue | 4 +-
src/controls/ControlPercent.vue | 65 +++++++++++++++++++++++++++++++
src/controls/ControlVector.vue | 6 +--
src/main.js | 4 +-
src/store.js | 2 +-
zh/option/partial/animation.md | 6 +++
zh/option/partial/barGrid.md | 10 +++++
zh/option/partial/item-style.md | 2 +
zh/option/partial/label.md | 43 ++++++++++++--------
zh/option/partial/style-shadow-opacity.md | 12 +++---
zh/option/partial/text-style.md | 46 ++++++++++++++++++++++
zh/option/series/bar.md | 27 ++++++++++++-
19 files changed, 268 insertions(+), 50 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index e0b69da..f3784a8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -157,4 +157,9 @@ export default {
}
}
}
+
+// For dropdown select in global
+.el-select-dropdown.el-popper {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
</style>
\ No newline at end of file
diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue
index efa24ca..3b9031b 100644
--- a/src/components/DocContent.vue
+++ b/src/components/DocContent.vue
@@ -309,8 +309,11 @@ export default {
}
.ec-doc-mobile {
- .doc-content {
+ .doc-main {
margin-left: 0;
+ }
+
+ .doc-content {
background: #f2f2f2;
margin-bottom: 100px;
}
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index f5860c0..2af3f34 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -173,7 +173,7 @@ export default {
const examplePanel = this.$el;
const previewMain = examplePanel.querySelector('.preview-main');
if (this.isDownLayout) {
- examplePanel.style.height = (window.innerHeight * 0.45 - 60) + 'px';
+ examplePanel.style.height = (window.innerHeight * 0.5 - 60) + 'px';
examplePanel.style.width = 'auto';
}
else {
@@ -292,6 +292,10 @@ export default {
position: absolute;
top: 20px;
right: 10px;
+
+ .example-list {
+ width: 220px;
+ }
}
diff --git a/src/components/OptionControl.vue b/src/components/OptionControl.vue
index 57d0612..9e30a38 100644
--- a/src/components/OptionControl.vue
+++ b/src/components/OptionControl.vue
@@ -14,19 +14,30 @@ import ControlColor from '../controls/ControlColor.vue';
import ControlBoolean from '../controls/ControlBoolean.vue';
import ControlNumber from '../controls/ControlNumber.vue';
import ControlVector from '../controls/ControlVector.vue';
+import ControlEnum from '../controls/ControlEnum.vue';
+import ControlPercent from '../controls/ControlPercent.vue';
import {store, changeOption} from '../store';
const uiComponentMap = {
boolean: ControlBoolean,
color: ControlColor,
number: ControlNumber,
- vector: ControlVector
+ vector: ControlVector,
+ enum: ControlEnum,
+ // Use number for angle temporary
+ angle: ControlNumber,
+ percent: ControlPercent
};
const uiComponentDefault = {
boolean: () => false,
color: () => null,
number: () => 0,
+ angle: () => 0,
+ percent: () => '50',
+ enum: (controlConfig) => {
+ return controlConfig.options.split(',')[0].trim();
+ },
vector: (conntrolConfig) => {
if (!conntrolConfig.dims) {
throw new Error('Must specify dims in vector');
@@ -89,7 +100,5 @@ export default {
</script>
<style lang="scss">
-.option-control {
- margin-top: 10px;
-}
+
</style>
\ No newline at end of file
diff --git a/src/controls/ControlAngle.vue b/src/controls/ControlAngle.vue
deleted file mode 100644
index fd2cda3..0000000
--- a/src/controls/ControlAngle.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style lang="scss">
-
-</style>
\ No newline at end of file
diff --git a/src/controls/ControlBoolean.vue b/src/controls/ControlBoolean.vue
index e291996..1bf1ba1 100644
--- a/src/controls/ControlBoolean.vue
+++ b/src/controls/ControlBoolean.vue
@@ -9,7 +9,7 @@ export default {
props: ['value'],
data() {
return {
- innerValue: this.value
+ innerValue: this.value === 'true'
}
},
diff --git a/src/controls/ControlEnum.vue b/src/controls/ControlEnum.vue
index fd2cda3..870d137 100644
--- a/src/controls/ControlEnum.vue
+++ b/src/controls/ControlEnum.vue
@@ -1,12 +1,56 @@
<template>
+<div class="control-enum">
+<el-select size="mini" v-model="innerValue" @change="onValueChange">
+ <el-option v-for="item in optionsArr"
+ :key="item"
+ :value="item"
+ :label="item"
+ ></el-option>
+</el-select>
+</div>
</template>
<script>
export default {
+ props: ['value', 'options'],
+
+ computed: {
+ optionsArr() {
+ return this.options.split(',').map(item => item.trim());
+ }
+ },
+
+ data() {
+ return {
+ innerValue: this.value
+ }
+ },
+
+ watch: {
+ value(val) {
+ this.innerValue = val;
+ }
+ },
+
+ methods: {
+ onValueChange() {
+ this.$emit('change', this.innerValue);
+ }
+ }
}
</script>
<style lang="scss">
+.control-color {
+ &>* {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ span {
+ font-size: 12px;
+ font-weight: bold;
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/controls/ControlNumber.vue b/src/controls/ControlNumber.vue
index 2e0e347..e14544b 100644
--- a/src/controls/ControlNumber.vue
+++ b/src/controls/ControlNumber.vue
@@ -3,7 +3,7 @@
<el-input-number
v-model="innerValue"
controls-position="right"
- :min="+min"
+ :min="min == null ? -1e4 : +min"
:max="max == null ? 1e4 : +max"
:step="step == null ? 1 : +step"
size="mini"
@@ -40,7 +40,7 @@ export default {
<style lang="scss">
.control-number {
.el-input-number {
- width: 90px;
+ width: 120px;
}
}
</style>
\ No newline at end of file
diff --git a/src/controls/ControlPercent.vue b/src/controls/ControlPercent.vue
new file mode 100644
index 0000000..e656d94
--- /dev/null
+++ b/src/controls/ControlPercent.vue
@@ -0,0 +1,65 @@
+<template>
+<div class="control-percent">
+ <el-slider
+ v-model="innerValue"
+ :min="min == null ? 0 : +min"
+ :max="max == null ? 100 : +max"
+ :step="step == null ? 1 : +step"
+ :format-tooltip="formatTooltip"
+ @change="onValueChange"
+ ></el-slider>
+ <el-input-number
+ controls-position="right"
+ v-model="innerValue"
+ size="mini"
+ :min="min == null ? 0 : +min"
+ :max="max == null ? 100 : +max"
+ :step="step == null ? 1 : +step"
+ @change="onValueChange"
+ >
+ </el-input-number>
+</div>
+</template>
+
+<script>
+export default {
+
+ props: ['value', 'min', 'max', 'step'],
+
+ data() {
+ return {
+ innerValue: +this.value.replace('%', '')
+ }
+ },
+
+ watch: {
+ value(val) {
+ this.innerValue = +this.value.replace('%', '');
+ }
+ },
+
+ methods: {
+ onValueChange() {
+ this.$emit('change', this.innerValue + '%');
+ },
+ formatTooltip(val) {
+ return val + '%';
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+.control-percent {
+ .el-slider {
+ width: 200px;
+ display: inline-block;
+ vertical-align: middle;
+ }
+ .el-input-number {
+ display: inline-block;
+ width: 90px;
+ margin-left: 10px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/controls/ControlVector.vue b/src/controls/ControlVector.vue
index ae9f877..eef11ee 100644
--- a/src/controls/ControlVector.vue
+++ b/src/controls/ControlVector.vue
@@ -8,7 +8,7 @@
<el-input-number
v-model="innerValueArr[index]"
controls-position="right"
- :min="+min"
+ :min="min == null ? -1e4 : +min"
:max="max == null ? 1e4 : +max"
:step="step == null ? 1 : +step"
size="mini"
@@ -20,7 +20,7 @@
v-model="innerValueArr[0]"
controls-position="right"
size="mini"
- :min="+min"
+ :min="min == null ? -1e4 : +min"
:max="max == null ? 1e4 : +max"
:step="step == null ? 1 : +step"
@change="onValueChange"
@@ -35,7 +35,7 @@ export default {
data() {
return {
- innerSeparate: this.separate || false,
+ innerSeparate: this.separate === 'true',
innerValueArr: this.value.slice()
};
},
diff --git a/src/main.js b/src/main.js
index 3b4634a..edd9431 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,7 +20,8 @@ import {
InputNumber,
Select,
Option,
- Alert
+ Alert,
+ Slider
} from 'element-ui';
import {preload} from './docHelper';
// import 'element-ui/lib/theme-chalk/index.css';
@@ -51,6 +52,7 @@ Vue.use(InputNumber);
Vue.use(Select);
Vue.use(Option);
Vue.use(Alert);
+Vue.use(Slider);
/**
*
diff --git a/src/store.js b/src/store.js
index e3b20f5..a3f4a4e 100644
--- a/src/store.js
+++ b/src/store.js
@@ -14,7 +14,7 @@ export const store = {
locale: 'zh',
- showOptionExample: true,
+ showOptionExample: false,
allOptionExamples: null,
currentExampleName: '',
currentExampleOption: ''
diff --git a/zh/option/partial/animation.md b/zh/option/partial/animation.md
index 088eb39..7a7b6be 100644
--- a/zh/option/partial/animation.md
+++ b/zh/option/partial/animation.md
@@ -2,6 +2,8 @@
#${prefix} animation(boolean) = ${defaultAnimation|default(true)}
+<ExampleUIControlBoolean default="${defaultAnimation|default(true)}" />
+
是否开启动画。
@@ -20,6 +22,8 @@
#${prefix} animationDurationUpdate(number|Function) = ${defaultAnimationDurationUpdate|default(300)}
+<ExampleUIControlNumber min="0" default="${defaultAnimationDuration|default(1000)}" step="20" />
+
数据更新动画的时长。
支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：
@@ -56,6 +60,8 @@ animationDelayUpdate: function (idx) {
#${prefix} animationDuration(number|Function) = ${defaultAnimationDuration|default(1000)}
+<ExampleUIControlNumber min="0" default="${defaultAnimationDuration|default(1000)}" step="20" />
+
初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：
```js
diff --git a/zh/option/partial/barGrid.md b/zh/option/partial/barGrid.md
index bc8b0ff..94b56a6 100644
--- a/zh/option/partial/barGrid.md
+++ b/zh/option/partial/barGrid.md
@@ -3,6 +3,8 @@
## barWidth(number|string) = 自适应
柱条的宽度，不设时自适应。
+<ExampleUIControlPercent />
+
{{use: partial-barGrid-value-absolute-or-percent}}
{{use:partial-barGrid-share-desc(seriesType=${seriesType})}}
@@ -28,7 +30,12 @@
## barMinHeight(number) = 0
柱条最小高度，可用于防止某数据项的值过小而影响交互。
+<ExampleUIControlNumber min="0" />
+
## barGap(string) = ${barGapDefault|default('30%')}
+
+<ExampleUIControlPercent default="30" min="-100" max="100" />
+
不同系列的柱间距离，为百分比（如 `'30%'`，表示柱子宽度的 `30%`）。
如果想要两个系列的柱子重叠，可以设置 barGap 为 `'-100%'`。这在用柱子做背景的时候有用。
@@ -39,6 +46,9 @@
~[600x400](${galleryViewPath}doc-example/barGrid-barGap&reset=1&edit=1)
## barCategoryGap(string) = '20%'
+
+<ExampleUIControlPercent default="20" min="-100" max="100" />
+
同一系列的柱间距离，默认为类目间距的20%，可设固定值
{{use:partial-barGrid-share-desc(seriesType=${seriesType})}}
diff --git a/zh/option/partial/item-style.md b/zh/option/partial/item-style.md
index 8b0f395..33075ab 100644
--- a/zh/option/partial/item-style.md
+++ b/zh/option/partial/item-style.md
@@ -28,6 +28,8 @@ ${name}描边线宽。为 0 时无描边。
#${prefix} borderType(string) = 'solid'
+<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
+
柱条的描边类型，默认为实线，支持 `'solid'`, `'dashed'`, `'dotted'`。
{{ use:partial-style-shadow-opacity(
diff --git a/zh/option/partial/label.md b/zh/option/partial/label.md
index c742bd9..7de01eb 100644
--- a/zh/option/partial/label.md
+++ b/zh/option/partial/label.md
@@ -5,14 +5,23 @@ ${name}图形上的文本标签，可用于说明图形的一些数据信息，
{{target:partial-label}}
#${prefix} show(boolean) = ${defaultShowLabel|default("false")}
+
+<ExampleUIControlBoolean />
+
是否显示标签。
{{ if: !${noPosition} }}
#${prefix} position(string|Array) = ${defaultPosition}
+
+<ExampleUIControlEnum default="${defaultPosition|default('inside')}" options="top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight" />
+
{{use:partial-label-position}}
{{ /if }}
#${prefix} distance(number) = 5
+
+<ExampleUIControlNumber default="5" min="0" step="0.5" />
+
距离图形元素的距离。当 position 为字符描述值（如 `'top'`、`'insideRight'`）时候有效。
参见：[label position](${galleryEditorPath}doc-example/label-position)。
@@ -20,6 +29,9 @@ ${name}图形上的文本标签，可用于说明图形的一些数据信息，
{{ if: !${noRotate} }}
#${prefix} rotate(number) = ${defaultRotate}
+
+<ExampleUIControlAngle default="${defaultRotate|default(0)}" min="-90" max="90" step="1" />
+
标签旋转。从 -90 度到 90 度。正值是逆时针。
参见：[label rotation](${galleryEditorPath}bar-label-rotation)。
@@ -27,6 +39,9 @@ ${name}图形上的文本标签，可用于说明图形的一些数据信息，
#${prefix} offset(Array)
+
+<ExampleUIControlVector dims="x,y" step="0.5" separate="true" />
+
是否对文字进行偏移。默认不偏移。例如：`[30, 40]` 表示文字在横向上偏移 `30`，纵向上偏移 `40`。
{{ if: ${formatter} }}
@@ -56,6 +71,8 @@ ${name}图形上的文本标签，可用于说明图形的一些数据信息，
{{ if: ${ellipsis} }}
#${prefix} ellipsis(boolean) = true
+<ExampleUIControlBoolean />
+
当文字超出的时候，是否超出部分替换为省略号。
{{ /if }}
@@ -63,11 +80,17 @@ ${name}图形上的文本标签，可用于说明图形的一些数据信息，
{{ target:partial-label-position }}
标签的位置。
-**可选：**
++ 可以通过内置的语义声明位置：
+
+ 示例：
+ ```js
+ position: 'top'
+ ```
+
+ 支持：`top` / `left` / `right` / `bottom` / `inside` / `insideLeft` / `insideRight` / `insideTop` / `insideBottom` / `insideTopLeft` / `insideBottomLeft` / `insideTopRight` / `insideBottomRight`
-+ [x, y]
++ 也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
- 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
示例：
```js
// 绝对的像素值
@@ -76,18 +99,4 @@ ${name}图形上的文本标签，可用于说明图形的一些数据信息，
position: ['50%', '50%']
```
-+ 'top'
-+ 'left'
-+ 'right'
-+ 'bottom'
-+ 'inside'
-+ 'insideLeft'
-+ 'insideRight'
-+ 'insideTop'
-+ 'insideBottom'
-+ 'insideTopLeft'
-+ 'insideBottomLeft'
-+ 'insideTopRight'
-+ 'insideBottomRight'
-
参见：[label position](${galleryViewPath}doc-example/label-position)。
\ No newline at end of file
diff --git a/zh/option/partial/style-shadow-opacity.md b/zh/option/partial/style-shadow-opacity.md
index a27b890..7d36205 100644
--- a/zh/option/partial/style-shadow-opacity.md
+++ b/zh/option/partial/style-shadow-opacity.md
@@ -2,7 +2,7 @@
#${prefix} shadowBlur(number) = ${defaultShadowBlur}
-<ExampleUIControlNumber value="0" min="0" step="0.5" />
+<ExampleUIControlNumber default="${defaultShadowBlur}" min="0" step="0.5" />
图形阴影的模糊大小。该属性配合 `shadowColor`,`shadowOffsetX`, `shadowOffsetY` 一起设置图形的阴影效果。
@@ -21,7 +21,7 @@
#${prefix} shadowColor(Color) = ${defaultShadowColor}
-<ExampleUIControlColor value="#000" />
+<ExampleUIControlColor default="${defaultShadowColor}" />
阴影颜色。支持的格式同`color`。
@@ -32,7 +32,7 @@
#${prefix} shadowOffsetX(number) = ${defaultShadowOffsetX|default(0)}
-<ExampleUIControlNumber value="0" step="0.5" />
+<ExampleUIControlNumber default="${defaultShadowOffsetX|default(0)}" step="0.5" />
阴影水平方向上的偏移距离。
@@ -43,7 +43,7 @@
#${prefix} shadowOffsetY(number) = ${defaultShadowOffsetY|default(0)}
-<ExampleUIControlNumber value="0" step="0.5" />
+<ExampleUIControlNumber default="${defaultShadowOffsetY|default(0)}" step="0.5" />
阴影垂直方向上的偏移距离。
@@ -55,9 +55,9 @@
{{target:partial-style-opacity}}
-#${prefix} opacity(number) = ${defaultOpacity}
+#${prefix} opacity(number) = ${defaultOpacity|default(1)}
-<ExampleUIControlNumber value="0" min="0" max="1" />
+<ExampleUIControlNumber default="${defaultOpacity|default(1)}" min="0" max="1" step="0.01" />
图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
diff --git a/zh/option/partial/text-style.md b/zh/option/partial/text-style.md
index a2e6ae2..8ebe759 100644
--- a/zh/option/partial/text-style.md
+++ b/zh/option/partial/text-style.md
@@ -96,6 +96,8 @@ label: {
#${prefix} color(Color)=${defaultColor|default('"#fff"')}
+<ExampleUIControlColor default="${defaultColor|default(null)}" />
+
${name}文字的颜色。
@@ -106,6 +108,8 @@ ${name}文字的颜色。
#${prefix} fontStyle(string)='normal'
+<ExampleUIControlEnum default="normal" options="normal,italic,oblique" />
+
${name}文字字体的风格。
可选：
@@ -116,6 +120,8 @@ ${name}文字字体的风格。
#${prefix} fontWeight(string|number)=${defaultFontWeight|default('normal')}
+<ExampleUIControlEnum default="normal" options="normal,bold,bolder,lighter" />
+
${name}文字字体的粗细。
可选：
@@ -128,18 +134,24 @@ ${name}文字字体的粗细。
#${prefix} fontFamily(string)='sans-serif'
+<ExampleUIControlEnum default="sans-serif" options="sans-serif,serif,monospace,Arial,Courier New" />
+
${name}文字的字体系列。
还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
#${prefix} fontSize(number)=${defaultFontSize|default(12)}
+<ExampleUIControlNumber default="${defaultFontSize|default(12)}" min="1" step="1" />
+
${name}文字的字体大小。
{{ if: !${noAlign} }}
#${prefix} align(string)=${defaultAlign}
+<ExampleUIControlEnum options="left,center,right" />
+
文字水平对齐方式，默认自动。
可选：
@@ -157,6 +169,8 @@ ${name}文字的字体大小。
{{ if: !${noVerticalAlign} }}
#${prefix} verticalAlign(string)=${defaultVerticalAlign}
+<ExampleUIControlEnum options="top,middle,bottom" />
+
文字垂直对齐方式，默认自动。
可选：
@@ -175,6 +189,8 @@ ${name}文字的字体大小。
#${prefix} lineHeight(number)
+<ExampleUIControlNumber min="0" step="1" default="12" />
+
行高。
{{ use: partial-text-style-rich-inherit(
@@ -186,6 +202,8 @@ ${name}文字的字体大小。
#${prefix} backgroundColor(string|Object)='transparent'
+<ExampleUIControlColor default="#fff" />
+
文字块背景色。
可以使用颜色值，例如：`'#123234'`, `'red'`, `'rgba(0,23,11,0.3)'`。
@@ -210,6 +228,8 @@ backgroundColor: {
#${prefix} borderColor(Color)='transparent'
+<ExampleUIControlColor default="#fff" />
+
文字块边框颜色。
{{if: ${enableAutoColor} }}
@@ -218,14 +238,20 @@ backgroundColor: {
#${prefix} borderWidth(number)=0
+<ExampleUIControlNumber min="0" step="0.5" />
+
文字块边框宽度。
#${prefix} borderRadius(number|Array)=0
+<ExampleUIControlVector min="0" dims="LT,RT, RB, LB" />
+
文字块的圆角。
#${prefix} padding(number|Array)=0
+<ExampleUIControlVector min="0" dims="T,R,B,L" />
+
文字块的内边距。例如：
+ `padding: [3, 4, 5, 6]`：表示 `[上, 右, 下, 左]` 的边距。
@@ -236,18 +262,26 @@ backgroundColor: {
#${prefix} shadowColor(Color)='transparent'
+<ExampleUIControlColor />
+
文字块的背景阴影颜色。
#${prefix} shadowBlur(number)=0
+<ExampleUIControlNumber min="0" step="0.5" />
+
文字块的背景阴影长度。
#${prefix} shadowOffsetX(number)=0
+<ExampleUIControlNumber step="0.5" />
+
文字块的背景阴影 X 偏移。
#${prefix} shadowOffsetY(number)=0
+<ExampleUIControlNumber step="0.5" />
+
文字块的背景阴影 Y 偏移。
{{ /if }}
@@ -273,6 +307,8 @@ backgroundColor: {
#${prefix} textBorderColor(Color)='transparent'
+<ExampleUIControlColor />
+
文字本身的描边颜色。
{{if: ${enableAutoColor} }}
@@ -281,22 +317,32 @@ backgroundColor: {
#${prefix} textBorderWidth(number)=0
+<ExampleUIControlNumber min="0" step="0.5" />
+
文字本身的描边宽度。
#${prefix} textShadowColor(Color)='transparent'
+<ExampleUIControlColor default="#000" />
+
文字本身的阴影颜色。
#${prefix} textShadowBlur(number)=0
+<ExampleUIControlNumber min="0" step="0.5" />
+
文字本身的阴影长度。
#${prefix} textShadowOffsetX(number)=0
+<ExampleUIControlNumber step="0.5" />
+
文字本身的阴影 X 偏移。
#${prefix} textShadowOffsetY(number)=0
+<ExampleUIControlNumber step="0.5" />
+
文字本身的阴影 Y 偏移。
diff --git a/zh/option/series/bar.md b/zh/option/series/bar.md
index d203f2e..6ff6e17 100644
--- a/zh/option/series/bar.md
+++ b/zh/option/series/bar.md
@@ -7,7 +7,7 @@
柱状/条形图 通过 柱形的高度/条形的宽度 来表现数据的大小，用于有至少一个类目轴或时间轴的[直角坐标系](~grid)上。
-<ExampleBaseOption name="cartesian-bar" title="直角坐标系上的单系列柱状图">
+<ExampleBaseOption name="cartesian-bar" title="直角坐标系上的柱状图">
const option = {
tooltip: {},
legend: {
@@ -25,6 +25,29 @@ const option = {
};
</ExampleBaseOption>
+<ExampleBaseOption name="polar-bar" title="极坐标系上的柱状图">
+const option = {
+ angleAxis: {
+ max: 30
+ },
+ radiusAxis: {
+ type: 'category',
+ data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
+ z: 10
+ },
+ polar: {},
+ series: [{
+ name: '销量',
+ type: 'bar',
+ data: [5, 20, 36, 10, 10, 20],
+ coordinateSystem: 'polar'
+ }],
+ legend: {
+ data: ['销量']
+ },
+};
+</ExampleBaseOption>
+
<ExampleBaseOption name="cartesian-bar-multiple-series" title="直角坐标系上的多系列柱状图">
option = {
legend: {
@@ -277,6 +300,8 @@ option = {
#${prefix} borderType(string) = 'solid'
+<ExampleUIControlEnum default="solid" options="solid,dashed,dotted" />
+
柱条的描边类型，默认为实线，支持 `'dashed'`, `'dotted'`。
{{ if: ${barBorderRadius} }}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org