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/16 03:58:52 UTC
[incubator-echarts-doc] branch live-example updated: example:
optimize ui component
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 8737a41 example: optimize ui component
8737a41 is described below
commit 8737a41346fed6c367375377f08935efd55905dc
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 16 11:58:37 2020 +0800
example: optimize ui component
---
src/components/OptionControl.vue | 14 +++++-
src/controls/ControlPercent.vue | 21 ++++++---
src/controls/ControlPercentVector.vue | 79 ++++++++++++++++++++++++++++++++++
src/controls/ControlVector.vue | 11 +++--
src/i18n.js | 8 ++--
src/main.js | 6 ++-
zh/option/partial/circular-layout.md | 4 ++
zh/option/partial/clip.md | 2 +
zh/option/partial/cursor.md | 2 +
zh/option/partial/large.md | 6 +++
zh/option/partial/legend-hover-link.md | 3 ++
zh/option/partial/rect-layout.md | 8 ++++
zh/option/partial/roam.md | 3 ++
zh/option/partial/show.md | 2 +
zh/option/partial/silent.md | 2 +
15 files changed, 157 insertions(+), 14 deletions(-)
diff --git a/src/components/OptionControl.vue b/src/components/OptionControl.vue
index 48102e7..23889ba 100644
--- a/src/components/OptionControl.vue
+++ b/src/components/OptionControl.vue
@@ -17,6 +17,7 @@ import ControlVector from '../controls/ControlVector.vue';
import ControlEnum from '../controls/ControlEnum.vue';
import ControlPercent from '../controls/ControlPercent.vue';
import {store, changeOption} from '../store';
+import ControlPercentVector from '../controls/ControlPercentVector.vue';
const uiComponentMap = {
boolean: ControlBoolean,
@@ -26,7 +27,8 @@ const uiComponentMap = {
enum: ControlEnum,
// Use number for angle temporary
angle: ControlNumber,
- percent: ControlPercent
+ percent: ControlPercent,
+ percentvector: ControlPercentVector
};
const uiComponentDefault = {
@@ -43,7 +45,15 @@ const uiComponentDefault = {
throw new Error('Must specify dims in vector');
}
return conntrolConfig.dims.split(',')
- .map(dim => 0)
+ .map(dim => 0).join(',');
+ },
+
+ percentvector: (conntrolConfig) => {
+ if (!conntrolConfig.dims) {
+ throw new Error('Must specify dims in vector');
+ }
+ return conntrolConfig.dims.split(',')
+ .map(dim => '50%').join(',');
}
}
diff --git a/src/controls/ControlPercent.vue b/src/controls/ControlPercent.vue
index e458eb6..4d5b172 100644
--- a/src/controls/ControlPercent.vue
+++ b/src/controls/ControlPercent.vue
@@ -1,8 +1,12 @@
<template>
<div class="control-percent">
- <el-switch v-model="absoluteMode" :active-text="$t('example.absoluteMode')"></el-switch>
+ <el-radio-group v-model="mode" size="mini">
+ <el-radio-button label="absolute">{{$t('example.absoluteMode')}}</el-radio-button>
+ <el-radio-button label="percent">{{$t('example.percentMode')}}</el-radio-button>
+ </el-radio-group>
+ <!-- <el-switch v-model="absoluteMode" :active-text="$t('example.absoluteMode')"></el-switch> -->
<el-input-number
- v-if="absoluteMode"
+ v-if="mode === 'absolute'"
controls-position="right"
v-model="absoluteValue"
size="mini"
@@ -38,13 +42,13 @@
<script>
export default {
- props: ['value', 'min', 'max', 'absolute', 'step'],
+ props: ['value', 'min', 'max', 'step'],
data() {
return {
percentValue: +this.value.replace('%', ''),
absoluteValue: 0,
- absoluteMode: this.value.indexOf('%') >= 0
+ mode: this.value.indexOf('%') < 0 ? 'absolute' : 'percent'
}
},
@@ -56,7 +60,7 @@ export default {
methods: {
onValueChange() {
- this.$emit('change', this.absoluteMode ? this.absoluteValue : this.percentValue + '%');
+ this.$emit('change', this.mode === 'absolute' ? this.absoluteValue : this.percentValue + '%');
},
formatTooltip(val) {
return val + '%';
@@ -80,5 +84,12 @@ export default {
width: 90px;
margin-left: 10px;
}
+ .el-radio-group {
+ margin-right: 10px;
+ }
+ .el-radio-button--mini .el-radio-button__inner {
+ padding: 5px 4px;
+ font-size: 10px;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/controls/ControlPercentVector.vue b/src/controls/ControlPercentVector.vue
new file mode 100644
index 0000000..2a2123d
--- /dev/null
+++ b/src/controls/ControlPercentVector.vue
@@ -0,0 +1,79 @@
+<template>
+<div class="control-percent-vector">
+ <div v-for="(dim, index) in dimsArr"
+ :key="index">
+ <label>{{dim}}</label>
+ <ControlPercent
+ :value="innerValueArr[index]"
+ controls-position="right"
+ :min="min == null ? -1e4 : +min"
+ :max="max == null ? 1e4 : +max"
+ :step="step == null ? 1 : +step"
+ @change="(value) => onValueChange(index, value)"
+ ></ControlPercent>
+ </div>
+</div>
+</template>
+
+<script>
+
+import ControlPercent from './ControlPercent.vue';
+
+export default {
+
+ components: {
+ ControlPercent
+ },
+
+ props: ['value', 'min', 'max', "step", 'dims'],
+
+ data() {
+ return {
+ innerValueArr: this.value.split(',').map(val => val.trim())
+ };
+ },
+
+ computed: {
+ dimsArr() {
+ return this.dims.split(',').map(dim => dim.trim());
+ }
+ },
+
+ watch: {
+ value(newVal) {
+ this.innerValueArr = this.value.split(',').map(val => val.trim())
+ }
+ },
+
+ methods: {
+ onValueChange(index, value) {
+ this.innerValueArr[index] = value;
+ this.$emit('change', this.innerValueArr.slice());
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+.control-percent-vector {
+ &>div {
+ margin-top: 3px;
+ font-size: 12px;
+ font-weight: bold;
+
+ &>label {
+ text-transform: uppercase;
+ margin-right: 5px;
+ }
+ }
+
+ .control-percent, label {
+ display: inline-block;
+ }
+
+
+ .control-percent .el-slider {
+ width: 100px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/controls/ControlVector.vue b/src/controls/ControlVector.vue
index eef11ee..2336dfc 100644
--- a/src/controls/ControlVector.vue
+++ b/src/controls/ControlVector.vue
@@ -4,7 +4,7 @@
<div v-if="innerSeparate" class="control-vector-group">
<div v-for="(dim, index) in dimsArr"
:key="index">
- <label>{{dim}}:</label>
+ <label>{{dim}}</label>
<el-input-number
v-model="innerValueArr[index]"
controls-position="right"
@@ -36,7 +36,7 @@ export default {
data() {
return {
innerSeparate: this.separate === 'true',
- innerValueArr: this.value.slice()
+ innerValueArr: this.value.split(',').map(val => +val.trim())
};
},
@@ -48,7 +48,7 @@ export default {
watch: {
value(newVal) {
- this.innerValueArr = newVal;
+ this.innerValueArr = this.value.split(',').map(val => +val.trim());
}
},
@@ -83,5 +83,10 @@ export default {
.el-input-number {
width: 90px;
}
+
+ label {
+ text-transform: uppercase;
+ margin-right: 5px;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/i18n.js b/src/i18n.js
index a304331..1d98a29 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -26,8 +26,9 @@ export default {
defaultColor: 'Default Color',
booleanDesc: 'Enable',
- vectorSetSeparate: 'Separately',
- absoluteMode: 'Absolute',
+ vectorSetSeparate: 'SEPARATE',
+ absoluteMode: 'ABSOLUTE',
+ percentMode: 'PERCENT',
setOptionError: 'Something Unexpected Happerns. Click refresh to try again!',
@@ -61,10 +62,11 @@ export default {
tryDesc: '试一试',
defaultColor: '默认颜色',
- booleanDesc: '开启该功能',
+ booleanDesc: '开启',
vectorSetSeparate: '分别设置',
absoluteMode: '绝对值',
+ percentMode: '百分比',
setOptionError: '发生了一些意料之外的错误，点击刷新再试试！',
diff --git a/src/main.js b/src/main.js
index edd9431..9a9617f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,7 +21,9 @@ import {
Select,
Option,
Alert,
- Slider
+ Slider,
+ RadioGroup,
+ RadioButton
} from 'element-ui';
import {preload} from './docHelper';
// import 'element-ui/lib/theme-chalk/index.css';
@@ -53,6 +55,8 @@ Vue.use(Select);
Vue.use(Option);
Vue.use(Alert);
Vue.use(Slider);
+Vue.use(RadioGroup);
+Vue.use(RadioButton);
/**
*
diff --git a/zh/option/partial/circular-layout.md b/zh/option/partial/circular-layout.md
index 31c1b91..7562ecf 100644
--- a/zh/option/partial/circular-layout.md
+++ b/zh/option/partial/circular-layout.md
@@ -5,6 +5,8 @@
## center(Array) = ${defaultCenter|default("['50%', '50%']")}
+<ExampleUIControlPercentVector dims="x,y" />
+
${componentName}的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
@@ -19,6 +21,8 @@ center: ['50%', '50%']
## radius(number|string|Array) = ${defaultRadius}
+<ExampleUIControlPercentVector dims="inner,outer" default="0%, 75%" />
+
${componentName}的半径。可以为如下类型：
+ `number`：直接指定外半径值。
diff --git a/zh/option/partial/clip.md b/zh/option/partial/clip.md
index 4ade4e9..bc3d20a 100644
--- a/zh/option/partial/clip.md
+++ b/zh/option/partial/clip.md
@@ -2,6 +2,8 @@
#${prefix|default('#')} clip(boolean) = ${defaultClip|default(true)}
+<ExampleUIControlBoolean default="${defaultClip|default(true)}" />
+
{{ use: partial-version(
version=${version|default("4.4.0")}
) }}
diff --git a/zh/option/partial/cursor.md b/zh/option/partial/cursor.md
index f7e216d..9c39f8f 100644
--- a/zh/option/partial/cursor.md
+++ b/zh/option/partial/cursor.md
@@ -2,4 +2,6 @@
#${prefix|default('#')} cursor(string) = 'pointer'
+<ExampleUIControlEnum options="auto,pointer,move" default="pointer" />
+
鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 `cursor`。
diff --git a/zh/option/partial/large.md b/zh/option/partial/large.md
index c5f4875..8f7490b 100644
--- a/zh/option/partial/large.md
+++ b/zh/option/partial/large.md
@@ -1,6 +1,9 @@
{{target: partial-large }}
#${prefix} large(boolean) = ${defaultLarge|default(false)}
+
+<ExampleUIControlBoolean />
+
是否开启大数据量优化，在数据图形特别多而出现卡顿时候可以开启。
开启后配合 `largeThreshold` 在数据量大于指定阈值的时候对绘制进行优化。
@@ -8,4 +11,7 @@
缺点：优化后不能自定义设置单个数据项的样式。
#${prefix} largeThreshold(number) = ${defaultLargeThreshold|default(2000)}
+
+<ExampleUIControlNumber min="1" default="${defaultLargeThreshold|default(2000)}" />
+
开启绘制优化的阈值。
diff --git a/zh/option/partial/legend-hover-link.md b/zh/option/partial/legend-hover-link.md
index ff38219..a058e9e 100644
--- a/zh/option/partial/legend-hover-link.md
+++ b/zh/option/partial/legend-hover-link.md
@@ -1,3 +1,6 @@
{{ target: partial-legend-hover-link }}
## legendHoverLink(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否启用[图例](~legend) hover 时的联动高亮。
diff --git a/zh/option/partial/rect-layout.md b/zh/option/partial/rect-layout.md
index de61f38..80ef349 100644
--- a/zh/option/partial/rect-layout.md
+++ b/zh/option/partial/rect-layout.md
@@ -10,6 +10,8 @@
#${prefix|default("#")} left(string|number) = ${defaultLeft|default("'auto'")}
+<ExampleUIControlPercent default="0%"/>
+
${componentName}组件离容器左侧的距离。
`left` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比，也可以是 `'left'`, `'center'`, `'right'`。
@@ -18,6 +20,8 @@ ${componentName}组件离容器左侧的距离。
#${prefix|default("#")} top(string|number) = ${defaultTop|default("'auto'")}
+<ExampleUIControlPercent default="0%"/>
+
${componentName}组件离容器上侧的距离。
`top` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比，也可以是 `'top'`, `'middle'`, `'bottom'`。
@@ -26,6 +30,8 @@ ${componentName}组件离容器上侧的距离。
#${prefix|default("#")} right(string|number) = ${defaultRight|default("'auto'")}
+<ExampleUIControlPercent default="0%"/>
+
${componentName}组件离容器右侧的距离。
`right` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比。
@@ -34,6 +40,8 @@ ${componentName}组件离容器右侧的距离。
#${prefix|default("#")} bottom(string|number) = ${defaultBottom|default("'auto'")}
+<ExampleUIControlPercent default="0%"/>
+
${componentName}组件离容器下侧的距离。
bottom 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比。
diff --git a/zh/option/partial/roam.md b/zh/option/partial/roam.md
index 4b4b018..f2acf66 100644
--- a/zh/option/partial/roam.md
+++ b/zh/option/partial/roam.md
@@ -1,4 +1,7 @@
{{ target: partial-roam }}
+
+<ExampleUIControlEnum options="scale,move" />
+
是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 `'scale'` 或者 `'move'`。设置成 `true` 为都开启
{{ target: partial-scale-limit }}
diff --git a/zh/option/partial/show.md b/zh/option/partial/show.md
index 1b9c884..d49bfb4 100644
--- a/zh/option/partial/show.md
+++ b/zh/option/partial/show.md
@@ -1,3 +1,5 @@
{{target: partial-show}}
+<ExampleUIControlBoolean />
+
${componentName}组件是否显示，需要注意的是该属性只会影响组件是否展现，如果组件带有影响图表展示的功能，例如`dataRange`组件，`show`的开关并不会影响组件的功能。
diff --git a/zh/option/partial/silent.md b/zh/option/partial/silent.md
index bf13db7..ba86c8d 100644
--- a/zh/option/partial/silent.md
+++ b/zh/option/partial/silent.md
@@ -1,4 +1,6 @@
{{ target: partial-silent }}
${prefix}# silent(boolean) = false
+<ExampleUIControlBoolean />
+
图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org