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/17 13:11:52 UTC
[incubator-echarts-doc] branch live-example updated: example: UI on
title, legend
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 135c466 example: UI on title, legend
135c466 is described below
commit 135c466f2097f41b18122f575e96be013284a465
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jun 17 21:11:27 2020 +0800
example: UI on title, legend
---
src/components/OptionControl.vue | 4 +-
src/controls/ControlText.vue | 32 +++++++
tool/extractDesc.js | 9 ++
zh/option/component/legend.md | 12 +++
zh/option/component/title.md | 30 +++++++
zh/option/partial/component-common-style.md | 8 +-
zh/option/partial/padding.md | 2 +
zh/option/series/themeRiver.md | 132 ++++++++++++++--------------
8 files changed, 159 insertions(+), 70 deletions(-)
diff --git a/src/components/OptionControl.vue b/src/components/OptionControl.vue
index eeffaa7..27ffd81 100644
--- a/src/components/OptionControl.vue
+++ b/src/components/OptionControl.vue
@@ -18,6 +18,7 @@ import ControlEnum from '../controls/ControlEnum.vue';
import ControlPercent from '../controls/ControlPercent.vue';
import {store, changeOption} from '../store';
import ControlPercentVector from '../controls/ControlPercentVector.vue';
+import ControlText from '../controls/ControlText.vue';
const uiComponentMap = {
boolean: ControlBoolean,
@@ -28,7 +29,8 @@ const uiComponentMap = {
// Use number for angle temporary
angle: ControlNumber,
percent: ControlPercent,
- percentvector: ControlPercentVector
+ percentvector: ControlPercentVector,
+ text: ControlText
};
const uiComponentDefault = {
diff --git a/src/controls/ControlText.vue b/src/controls/ControlText.vue
new file mode 100644
index 0000000..d0245e0
--- /dev/null
+++ b/src/controls/ControlText.vue
@@ -0,0 +1,32 @@
+<template>
+<div class="control-text">
+<el-input v-model="innerValue" size="mini" @change="onValueChange"></el-input>
+</div>
+</template>
+
+<script>
+export default {
+
+ props: ['value'],
+ data() {
+ return {
+ innerValue: this.value
+ }
+ },
+
+ watch: {
+ value(val) {
+ this.innerValue = val;
+ }
+ },
+
+ methods: {
+ onValueChange() {
+ this.$emit('change', this.innerValue);
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+</style>
\ No newline at end of file
diff --git a/tool/extractDesc.js b/tool/extractDesc.js
index 15d545d..972ac8f 100644
--- a/tool/extractDesc.js
+++ b/tool/extractDesc.js
@@ -148,6 +148,8 @@ function convertToTree(rootSchema, rootNode) {
// }
module.exports = function (schema, docName) {
let descriptionsMap = {};
+ let propWithUIControlCount = 0;
+ let propTotalCount = 0;
traverse(schema, docName, (schemaPath, schemaNode) => {
if (schemaNode.description) {
// Extract component level path
@@ -162,9 +164,16 @@ module.exports = function (schema, docName) {
exampleBaseOptions: schemaNode.exampleBaseOptions,
uiControl: schemaNode.uiControl
};
+
+ propTotalCount++;
+ if (schemaNode.uiControl) {
+ propWithUIControlCount++;
+ }
}
});
+ console.log(`Options with UIControl ${propWithUIControlCount} / ${propTotalCount} (${propWithUIControlCount/propTotalCount})`);
+
return {
outline: convertToTree(schema.option, {}),
descriptions: descriptionsMap
diff --git a/zh/option/component/legend.md b/zh/option/component/legend.md
index 4937e29..dfeb113 100644
--- a/zh/option/component/legend.md
+++ b/zh/option/component/legend.md
@@ -44,6 +44,8 @@ ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便
## orient(string) = 'horizontal'
+<ExampleUIControlEnum options="vertical,horizontal" default="horizontal" />
+
图例列表的布局朝向。
可选：
@@ -52,6 +54,8 @@ ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便
## align(string) = 'auto'
+<ExampleUIControlEnum options="auto,left,right" default="auto" />
+
图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 [left](~legend.left) 值为 `'right'` 以及纵向布局（[orient](~legend.orient) 为 `'vertical'`）的时候为右对齐，即为 `'right'`。
可选：
@@ -61,18 +65,26 @@ ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便
## padding(number|Array) = 5
+<ExampleUIControlVector dims="T,R,B,L" default="5" min="0" step="0.5" />
+
{{ use: partial-padding(componentName="图例")}}
## itemGap(number) = 10
+<ExampleUIControlNumber default="10" min="0" step="0.5" />
+
图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
## itemWidth(number) = 25
+<ExampleUIControlNumber default="25" min="0" step="0.5" />
+
图例标记的图形宽度。
## itemHeight(number) = 14
+<ExampleUIControlNumber default="14" min="0" step="0.5" />
+
图例标记的图形高度。
## symbolKeepAspect(boolean) = true
diff --git a/zh/option/component/title.md b/zh/option/component/title.md
index 935bc61..bdd9a02 100644
--- a/zh/option/component/title.md
+++ b/zh/option/component/title.md
@@ -11,14 +11,35 @@
**例如下面不同缓动函数效果的示例，每一个缓动效果图都带有一个标题组件：**
~[700x400](${galleryViewPath}line-easing&edit=1&reset=1)
+<ExampleBaseOption name="title-only" title="只有标题的实例">
+const option = {
+ title: {
+ text: 'Main Title',
+ subtext: 'Sub Title',
+ left: 'center',
+ top: 'center',
+ textStyle: {
+ fontSize: 30
+ },
+ subtextStyle: {
+ fontSize: 20
+ }
+ }
+}
+</ExampleBaseOption>
+
{{use: partial-component-id(prefix="#")}}
## show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
是否显示标题组件。
## text(string) = ''
+<ExampleUIControlText />
+
主标题文本，支持使用 `\n` 换行。
## link(string) = ''
@@ -51,6 +72,8 @@
## subtext(string) = ''
+<ExampleUIControlText />
+
副标题文本，支持使用 `\n` 换行。
@@ -80,12 +103,16 @@
## textAlign(string) = 'auto'
+<ExampleUIControlEnum options="auto,left,center,right" default="auto" />
+
整体（包括 text 和 subtext）的水平对齐。
可选值：`'auto'`、`'left'`、`'right'`、`'center'`。
## textVerticalAlign(string) = 'auto'
+<ExampleUIControlEnum options="auto,top,middle,bottom" default="auto" />
+
整体（包括 text 和 subtext）的垂直对齐。
可选值：`'auto'`、`'top'`、`'bottom'`、`'middle'`。
@@ -100,6 +127,9 @@
## itemGap(number) = 10
+<ExampleUIControlNumber min="0" default="10" step="1" />
+
+
主副标题之间的间距。
{{use: partial-rect-layout(componentName="title ")}}
diff --git a/zh/option/partial/component-common-style.md b/zh/option/partial/component-common-style.md
index 57b25b5..01753b1 100644
--- a/zh/option/partial/component-common-style.md
+++ b/zh/option/partial/component-common-style.md
@@ -3,6 +3,8 @@
#${prefix} backgroundColor(Color) = 'transparent'
+<ExampleUIControlColor />
+
${componentName}背景色，默认透明。
> 颜色可以使用 RGB 表示，比如 `'rgb(128, 128, 128)'` ，如果想要加上 alpha 通道，可以使用 RGBA，比如 `'rgba(128, 128, 128, 0.5)'`，也可以使用十六进制格式，比如 `'#ccc'`
@@ -13,6 +15,8 @@ ${componentName}背景色，默认透明。
#${prefix} borderColor(Color) = '#ccc'
+<ExampleUIControlColor default="#ccc" />
+
${componentName}的边框颜色。支持的颜色格式同 backgroundColor。
{{if: ${needShow} }}
@@ -21,6 +25,8 @@ ${componentName}的边框颜色。支持的颜色格式同 backgroundColor。
#${prefix} borderWidth(number) = ${defaultBorderWidth|default(1)}
+<ExampleUIControlNumber default="${defaultBorderWidth|default(1)}" min="0" step="0.5" />
+
${componentName}的边框线宽。
{{if: ${needShow} }}
@@ -42,7 +48,7 @@ ${componentName}的边框线宽。
#${prefix} ${propName|default('borderRadius')}(number|Array) = 0
-<ExampleUIControlVector min="0" dims="LT, RT, RB, LB" />
+<ExampleUIControlVector min="0" dims="LT,RT,RB,LB" />
圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。
如:
diff --git a/zh/option/partial/padding.md b/zh/option/partial/padding.md
index e8b2b44..61c9765 100644
--- a/zh/option/partial/padding.md
+++ b/zh/option/partial/padding.md
@@ -1,5 +1,7 @@
{{target: partial-padding}}
+<ExampleUIControlVector min="0" dims="T,R,B,L" />
+
${componentName}内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
使用示例：
diff --git a/zh/option/series/themeRiver.md b/zh/option/series/themeRiver.md
index ec30371..19612db 100644
--- a/zh/option/series/themeRiver.md
+++ b/zh/option/series/themeRiver.md
@@ -21,78 +21,74 @@
<ExampleBaseOption name="themeRiver" title="主题河流图">
-// From https://github.com/jsundram/streamgraph.js/blob/master/examples/data/lastfm.js
-var rawData = [
- [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- [0, 49, 67, 16, 0, 19, 19, 0, 0, 1, 10, 5, 6, 1, 1, 0, 25, 0, 0, 0],
- [0, 6, 3, 34, 0, 16, 1, 0, 0, 1, 6, 0, 1, 56, 0, 2, 0, 2, 0, 0],
- [0, 8, 13, 15, 0, 12, 23, 0, 0, 1, 0, 1, 0, 0, 6, 0, 0, 1, 0, 1],
- [0, 9, 28, 0, 91, 6, 1, 0, 0, 0, 7, 18, 0, 9, 16, 0, 1, 0, 0, 0],
- [0, 3, 42, 36, 21, 0, 1, 0, 0, 0, 0, 16, 30, 1, 4, 62, 55, 1, 0, 0],
- [0, 7, 13, 12, 64, 5, 0, 0, 0, 8, 17, 3, 72, 1, 1, 53, 1, 0, 0, 0],
- [1, 14, 13, 7, 8, 8, 7, 0, 1, 1, 14, 6, 44, 8, 7, 17, 21, 1, 0, 0],
- [0, 6, 14, 2, 14, 1, 0, 0, 0, 0, 2, 2, 7, 15, 6, 3, 0, 0, 0, 0],
- [0, 9, 11, 3, 0, 8, 0, 0, 14, 2, 0, 1, 1, 1, 7, 13, 2, 1, 0, 0],
- [0, 7, 5, 10, 8, 21, 0, 0, 130, 1, 2, 18, 6, 1, 5, 1, 4, 1, 0, 7],
- [0, 2, 15, 1, 5, 5, 0, 0, 6, 0, 0, 0, 4, 1, 3, 1, 17, 0, 0, 9],
- [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- [6, 27, 26, 1, 0, 11, 1, 0, 0, 0, 1, 1, 2, 0, 0, 9, 1, 0, 0, 0],
- [31, 81, 11, 6, 11, 0, 0, 0, 0, 0, 0, 0, 3, 2, 0, 3, 14, 0, 0, 12],
- [19, 53, 6, 20, 0, 4, 37, 0, 30, 86, 43, 7, 5, 7, 17, 19, 2, 0, 0, 5],
- [0, 22, 14, 6, 10, 24, 18, 0, 13, 21, 5, 2, 13, 35, 7, 1, 8, 0, 0, 1],
- [0, 56, 5, 0, 0, 0, 0, 0, 7, 24, 0, 17, 7, 0, 0, 3, 0, 0, 0, 8],
- [18, 29, 3, 6, 11, 0, 15, 0, 12, 42, 37, 0, 3, 3, 13, 8, 0, 0, 0, 1],
- [32, 39, 37, 3, 33, 21, 6, 0, 4, 17, 0, 11, 8, 2, 3, 0, 23, 0, 0, 17],
- [72, 15, 28, 0, 0, 0, 0, 0, 1, 3, 0, 35, 0, 9, 17, 1, 9, 1, 0, 8],
- [11, 15, 4, 2, 0, 18, 10, 0, 20, 3, 0, 0, 2, 0, 0, 2, 2, 30, 0, 0],
- [14, 29, 19, 3, 2, 17, 13, 0, 7, 12, 2, 0, 6, 0, 0, 1, 1, 34, 0, 1],
- [1, 1, 7, 6, 1, 1, 15, 1, 1, 2, 1, 3, 1, 1, 9, 1, 1, 25, 1, 72]
-];
-
-var labels = [
- 'The Sea and Cake',
- 'Andrew Bird',
- 'Laura Veirs',
- 'Brian Eno',
- 'Christopher Willits',
- 'Wilco',
- 'Edgar Meyer',
- 'B\xc3\xa9la Fleck',
- 'Fleet Foxes',
- 'Kings of Convenience',
- 'Brett Dennen',
- 'Psapp',
- 'The Bad Plus',
- 'Feist',
- 'Battles',
- 'Avishai Cohen',
- 'Rachael Yamagata',
- 'Norah Jones',
- 'B\xc3\xa9la Fleck and the Flecktones',
- 'Joshua Redman'
-];
-
-var data = [];
-for (var i = 0; i < rawData.length; i++) {
- for (var j = 0; j < rawData[i].length; j++) {
- var label = labels[i];
- data.push([
- j, rawData[i][j], label
- ]);
- }
-}
-
const option = {
singleAxis: {
- max: 'dataMax'
+ top: 50,
+ bottom: 50,
+ axisTick: {},
+ axisLabel: {},
+ type: 'time',
+ axisPointer: {
+ animation: true,
+ label: {
+ show: true
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ opacity: 0.2
+ }
+ }
},
- series: [{
- type: 'themeRiver',
- data: data,
- label: {
- show: false
+ series: [
+ {
+ type: 'themeRiver',
+ data: [['2015/11/08',10,'DQ'],['2015/11/09',15,'DQ'],['2015/11/10',35,'DQ'],
+ ['2015/11/11',38,'DQ'],['2015/11/12',22,'DQ'],['2015/11/13',16,'DQ'],
+ ['2015/11/14',7,'DQ'],['2015/11/15',2,'DQ'],['2015/11/16',17,'DQ'],
+ ['2015/11/17',33,'DQ'],['2015/11/18',40,'DQ'],['2015/11/19',32,'DQ'],
+ ['2015/11/20',26,'DQ'],['2015/11/21',35,'DQ'],['2015/11/22',40,'DQ'],
+ ['2015/11/23',32,'DQ'],['2015/11/24',26,'DQ'],['2015/11/25',22,'DQ'],
+ ['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'],
+ ['2015/11/08',35,'TY'],['2015/11/09',36,'TY'],['2015/11/10',37,'TY'],
+ ['2015/11/11',22,'TY'],['2015/11/12',24,'TY'],['2015/11/13',26,'TY'],
+ ['2015/11/14',34,'TY'],['2015/11/15',21,'TY'],['2015/11/16',18,'TY'],
+ ['2015/11/17',45,'TY'],['2015/11/18',32,'TY'],['2015/11/19',35,'TY'],
+ ['2015/11/20',30,'TY'],['2015/11/21',28,'TY'],['2015/11/22',27,'TY'],
+ ['2015/11/23',26,'TY'],['2015/11/24',15,'TY'],['2015/11/25',30,'TY'],
+ ['2015/11/26',35,'TY'],['2015/11/27',42,'TY'],['2015/11/28',42,'TY'],
+ ['2015/11/08',21,'SS'],['2015/11/09',25,'SS'],['2015/11/10',27,'SS'],
+ ['2015/11/11',23,'SS'],['2015/11/12',24,'SS'],['2015/11/13',21,'SS'],
+ ['2015/11/14',35,'SS'],['2015/11/15',39,'SS'],['2015/11/16',40,'SS'],
+ ['2015/11/17',36,'SS'],['2015/11/18',33,'SS'],['2015/11/19',43,'SS'],
+ ['2015/11/20',40,'SS'],['2015/11/21',34,'SS'],['2015/11/22',28,'SS'],
+ ['2015/11/23',26,'SS'],['2015/11/24',37,'SS'],['2015/11/25',41,'SS'],
+ ['2015/11/26',46,'SS'],['2015/11/27',47,'SS'],['2015/11/28',41,'SS'],
+ ['2015/11/08',10,'QG'],['2015/11/09',15,'QG'],['2015/11/10',35,'QG'],
+ ['2015/11/11',38,'QG'],['2015/11/12',22,'QG'],['2015/11/13',16,'QG'],
+ ['2015/11/14',7,'QG'],['2015/11/15',2,'QG'],['2015/11/16',17,'QG'],
+ ['2015/11/17',33,'QG'],['2015/11/18',40,'QG'],['2015/11/19',32,'QG'],
+ ['2015/11/20',26,'QG'],['2015/11/21',35,'QG'],['2015/11/22',40,'QG'],
+ ['2015/11/23',32,'QG'],['2015/11/24',26,'QG'],['2015/11/25',22,'QG'],
+ ['2015/11/26',16,'QG'],['2015/11/27',22,'QG'],['2015/11/28',10,'QG'],
+ ['2015/11/08',10,'SY'],['2015/11/09',15,'SY'],['2015/11/10',35,'SY'],
+ ['2015/11/11',38,'SY'],['2015/11/12',22,'SY'],['2015/11/13',16,'SY'],
+ ['2015/11/14',7,'SY'],['2015/11/15',2,'SY'],['2015/11/16',17,'SY'],
+ ['2015/11/17',33,'SY'],['2015/11/18',40,'SY'],['2015/11/19',32,'SY'],
+ ['2015/11/20',26,'SY'],['2015/11/21',35,'SY'],['2015/11/22',4,'SY'],
+ ['2015/11/23',32,'SY'],['2015/11/24',26,'SY'],['2015/11/25',22,'SY'],
+ ['2015/11/26',16,'SY'],['2015/11/27',22,'SY'],['2015/11/28',10,'SY'],
+ ['2015/11/08',10,'DD'],['2015/11/09',15,'DD'],['2015/11/10',35,'DD'],
+ ['2015/11/11',38,'DD'],['2015/11/12',22,'DD'],['2015/11/13',16,'DD'],
+ ['2015/11/14',7,'DD'],['2015/11/15',2,'DD'],['2015/11/16',17,'DD'],
+ ['2015/11/17',33,'DD'],['2015/11/18',4,'DD'],['2015/11/19',32,'DD'],
+ ['2015/11/20',26,'DD'],['2015/11/21',35,'DD'],['2015/11/22',40,'DD'],
+ ['2015/11/23',32,'DD'],['2015/11/24',26,'DD'],['2015/11/25',22,'DD'],
+ ['2015/11/26',16,'DD'],['2015/11/27',22,'DD'],['2015/11/28',10,'DD']]
}
- }]
+ ]
};
</ExampleBaseOption>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org