@@ -21,47 +26,78 @@
diff --git a/docs/DataV/components/decoration12/index.js b/docs/DataV/components/decoration12/index.js
new file mode 100644
index 0000000..0408fda
--- /dev/null
+++ b/docs/DataV/components/decoration12/index.js
@@ -0,0 +1,5 @@
+import Decoration12 from './src/main.vue'
+
+export default function (Vue) {
+ Vue.component(Decoration12.name, Decoration12)
+}
diff --git a/docs/DataV/components/decoration12/src/main.vue b/docs/DataV/components/decoration12/src/main.vue
new file mode 100644
index 0000000..54d729f
--- /dev/null
+++ b/docs/DataV/components/decoration12/src/main.vue
@@ -0,0 +1,304 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/DataV/components/decoration2/src/main.vue b/docs/DataV/components/decoration2/src/main.vue
index d354765..b0161ea 100644
--- a/docs/DataV/components/decoration2/src/main.vue
+++ b/docs/DataV/components/decoration2/src/main.vue
@@ -1,12 +1,12 @@
-
+
-
+
import autoResize from '../../../mixin/autoResize'
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
export default {
name: 'DvDecoration2',
mixins: [autoResize],
props: {
+ color: {
+ type: Array,
+ default: () => ([])
+ },
reverse: {
type: Boolean,
default: false
+ },
+ dur: {
+ type: Number,
+ default: 6
}
},
data () {
@@ -50,10 +62,19 @@ export default {
y: 0,
w: 0,
- h: 0
+ h: 0,
+
+ defaultColor: ['#3faacb', '#fff'],
+
+ mergedColor: []
}
},
watch: {
+ color () {
+ const { mergeColor } = this
+
+ mergeColor()
+ },
reverse () {
const { calcSVGData } = this
@@ -85,7 +106,17 @@ export default {
const { calcSVGData } = this
calcSVGData()
+ },
+ mergeColor () {
+ const { color, defaultColor } = this
+
+ this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
+ },
+ mounted () {
+ const { mergeColor } = this
+
+ mergeColor()
}
}
diff --git a/docs/DataV/components/decoration3/src/main.vue b/docs/DataV/components/decoration3/src/main.vue
index df68a6b..51c0278 100644
--- a/docs/DataV/components/decoration3/src/main.vue
+++ b/docs/DataV/components/decoration3/src/main.vue
@@ -7,7 +7,7 @@
>
import autoResize from '../../../mixin/autoResize'
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
export default {
name: 'DvDecoration3',
mixins: [autoResize],
+ props: {
+ color: {
+ type: Array,
+ default: () => ([])
+ }
+ },
data () {
const pointSideLength = 7
@@ -49,7 +59,18 @@ export default {
pointSideLength,
halfPointSideLength: pointSideLength / 2,
- points: []
+ points: [],
+
+ defaultColor: ['#7acaec', 'transparent'],
+
+ mergedColor: []
+ }
+ },
+ watch: {
+ color () {
+ const { mergeColor } = this
+
+ mergeColor()
}
},
methods: {
@@ -91,7 +112,17 @@ export default {
const { calcSVGData } = this
calcSVGData()
+ },
+ mergeColor () {
+ const { color, defaultColor } = this
+
+ this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
+ },
+ mounted () {
+ const { mergeColor } = this
+
+ mergeColor()
}
}
diff --git a/docs/DataV/components/decoration4/src/main.vue b/docs/DataV/components/decoration4/src/main.vue
index e27c578..bfbcfc4 100644
--- a/docs/DataV/components/decoration4/src/main.vue
+++ b/docs/DataV/components/decoration4/src/main.vue
@@ -2,16 +2,16 @@
import autoResize from '../../../mixin/autoResize'
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
export default {
name: 'DvDecoration4',
mixins: [autoResize],
- props: ['reverse'],
+ props: {
+ color: {
+ type: Array,
+ default: () => ([])
+ },
+ reverse: {
+ type: Boolean,
+ default: false
+ },
+ dur: {
+ type: Number,
+ default: 3
+ }
+ },
data () {
return {
- ref: 'decoration-4'
+ ref: 'decoration-4',
+
+ defaultColor: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'],
+
+ mergedColor: []
+ }
+ },
+ watch: {
+ color () {
+ const { mergeColor } = this
+
+ mergeColor()
}
+ },
+ methods: {
+ mergeColor () {
+ const { color, defaultColor } = this
+
+ this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+ }
+ },
+ mounted () {
+ const { mergeColor } = this
+
+ mergeColor()
}
}
@@ -47,23 +87,26 @@ export default {
display: flex;
overflow: hidden;
position: absolute;
+ flex: 1;
}
.normal {
- height: 0% !important;
- animation: ani-height 3s ease-in-out infinite;
+ animation: ani-height ease-in-out infinite;
left: 50%;
margin-left: -2px;
}
.reverse {
- width: 0% !important;
- animation: ani-width 3s ease-in-out infinite;
+ animation: ani-width ease-in-out infinite;
top: 50%;
margin-top: -2px;
}
@keyframes ani-height {
+ 0% {
+ height: 0%;
+ }
+
70% {
height: 100%;
}
@@ -74,6 +117,10 @@ export default {
}
@keyframes ani-width {
+ 0% {
+ width: 0%;
+ }
+
70% {
width: 100%;
}
diff --git a/docs/DataV/components/decoration5/src/main.vue b/docs/DataV/components/decoration5/src/main.vue
index 2d30e68..f086048 100644
--- a/docs/DataV/components/decoration5/src/main.vue
+++ b/docs/DataV/components/decoration5/src/main.vue
@@ -3,7 +3,7 @@
@@ -12,7 +12,7 @@
attributeType="XML"
:from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
:to="`0, 0, ${line1Length}, 0`"
- dur="1.2s"
+ :dur="`${dur}s`"
begin="0s"
calcMode="spline"
keyTimes="0;1"
@@ -22,7 +22,7 @@
@@ -31,7 +31,7 @@
attributeType="XML"
:from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
:to="`0, 0, ${line2Length}, 0`"
- dur="1.2s"
+ :dur="`${dur}s`"
begin="0s"
calcMode="spline"
keyTimes="0;1"
@@ -48,9 +48,23 @@ import autoResize from '../../../mixin/autoResize'
import { getPolylineLength } from '@jiaminghi/charts/lib/util'
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
export default {
name: 'DvDecoration5',
mixins: [autoResize],
+ props: {
+ color: {
+ type: Array,
+ default: () => ([])
+ },
+ dur: {
+ type: Number,
+ default: 1.2
+ }
+ },
data () {
return {
ref: 'decoration-5',
@@ -59,7 +73,18 @@ export default {
line2Points: '',
line1Length: 0,
- line2Length: 0
+ line2Length: 0,
+
+ defaultColor: ['#3f96a5', '#3f96a5'],
+
+ mergedColor: []
+ }
+ },
+ watch: {
+ color () {
+ const { mergeColor } = this
+
+ mergeColor()
}
},
methods: {
@@ -97,7 +122,17 @@ export default {
const { calcSVGData } = this
calcSVGData()
+ },
+ mergeColor () {
+ const { color, defaultColor } = this
+
+ this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
+ },
+ mounted () {
+ const { mergeColor } = this
+
+ mergeColor()
}
}
diff --git a/docs/DataV/components/decoration6/src/main.vue b/docs/DataV/components/decoration6/src/main.vue
index 487e2ec..2649f79 100644
--- a/docs/DataV/components/decoration6/src/main.vue
+++ b/docs/DataV/components/decoration6/src/main.vue
@@ -6,7 +6,7 @@
>
([])
+ }
+ },
data () {
const rectWidth = 7
@@ -65,7 +75,18 @@ export default {
points: [],
heights: [],
minHeights: [],
- randoms: []
+ randoms: [],
+
+ defaultColor: ['#7acaec', '#7acaec'],
+
+ mergedColor: []
+ }
+ },
+ watch: {
+ color () {
+ const { mergeColor } = this
+
+ mergeColor()
}
},
methods: {
@@ -116,7 +137,17 @@ export default {
const { calcSVGData } = this
calcSVGData()
+ },
+ mergeColor () {
+ const { color, defaultColor } = this
+
+ this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
+ },
+ mounted () {
+ const { mergeColor } = this
+
+ mergeColor()
}
}
diff --git a/docs/DataV/components/decoration7/src/main.vue b/docs/DataV/components/decoration7/src/main.vue
index c14ffd1..3c15e82 100644
--- a/docs/DataV/components/decoration7/src/main.vue
+++ b/docs/DataV/components/decoration7/src/main.vue
@@ -4,13 +4,13 @@
@@ -19,13 +19,13 @@
@@ -33,8 +33,44 @@
diff --git a/docs/DataV/components/decoration8/src/main.vue b/docs/DataV/components/decoration8/src/main.vue
index 117cb3e..6ffc575 100644
--- a/docs/DataV/components/decoration8/src/main.vue
+++ b/docs/DataV/components/decoration8/src/main.vue
@@ -2,21 +2,21 @@
import autoResize from '../../../mixin/autoResize'
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
export default {
name: 'DvDecoration8',
mixins: [autoResize],
props: {
+ color: {
+ type: Array,
+ default: () => ([])
+ },
reverse: {
type: Boolean,
default: false
@@ -39,7 +47,18 @@ export default {
},
data () {
return {
- ref: 'decoration-8'
+ ref: 'decoration-8',
+
+ defaultColor: ['#3f96a5', '#3f96a5'],
+
+ mergedColor: []
+ }
+ },
+ watch: {
+ color () {
+ const { mergeColor } = this
+
+ mergeColor()
}
},
methods: {
@@ -49,7 +68,17 @@ export default {
if (!reverse) return pos
return width - pos
+ },
+ mergeColor () {
+ const { color, defaultColor } = this
+
+ this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
+ },
+ mounted () {
+ const { mergeColor } = this
+
+ mergeColor()
}
}
diff --git a/docs/DataV/components/decoration9/src/main.vue b/docs/DataV/components/decoration9/src/main.vue
index 4ffbd23..cc7904f 100644
--- a/docs/DataV/components/decoration9/src/main.vue
+++ b/docs/DataV/components/decoration9/src/main.vue
@@ -10,7 +10,7 @@
cy="50"
r="45"
fill="transparent"
- stroke="rgba(3, 166, 224, 0.5)"
+ :stroke="mergedColor[1]"
stroke-width="10"
stroke-dasharray="80, 100, 30, 100"
>
@@ -18,7 +18,7 @@
attributeName="transform"
type="rotate"
values="0 50 50;360 50 50"
- dur="3s"
+ :dur="`${dur}s`"
repeatCount="indefinite"
/>
@@ -28,7 +28,7 @@
cy="50"
r="45"
fill="transparent"
- stroke="rgba(3, 166, 224, 0.8)"
+ :stroke="mergedColor[0]"
stroke-width="6"
stroke-dasharray="50, 66, 100, 66"
>
@@ -36,7 +36,7 @@
attributeName="transform"
type="rotate"
values="0 50 50;-360 50 50"
- dur="3s"
+ :dur="`${dur}s`"
repeatCount="indefinite"
/>
@@ -46,7 +46,7 @@
cy="50"
r="38"
fill="transparent"
- stroke="rgba(3, 166, 224, 0.2)"
+ :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
stroke-width="1"
stroke-dasharray="5, 1"
/>
@@ -55,15 +55,15 @@
v-for="(foo, i) in new Array(20).fill(0)"
:key="i"
:xlink:href="`#${polygonId}`"
- stroke="rgba(3, 166, 224, 0.6)"
- :fill="Math.random() > 0.4 ? 'transparent' : 'rgba(3, 166, 224, 0.8)'"
+ :stroke="mergedColor[1]"
+ :fill="Math.random() > 0.4 ? 'transparent' : mergedColor[0]"
>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ point.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/DataV/components/percentPond/src/main.vue b/docs/DataV/components/percentPond/src/main.vue
index df9e143..c790eec 100644
--- a/docs/DataV/components/percentPond/src/main.vue
+++ b/docs/DataV/components/percentPond/src/main.vue
@@ -44,6 +44,8 @@
+
+
\ No newline at end of file
diff --git a/docs/guide/fullScreenContainer.md b/docs/guide/fullScreenContainer.md
index 994bcac..5ef5fd8 100644
--- a/docs/guide/fullScreenContainer.md
+++ b/docs/guide/fullScreenContainer.md
@@ -1,6 +1,6 @@
# 全屏容器
-数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。
+数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。
Loading...
diff --git a/docs/guide/percentPond.md b/docs/guide/percentPond.md
index d7c1761..60008e2 100644
--- a/docs/guide/percentPond.md
+++ b/docs/guide/percentPond.md
@@ -4,6 +4,8 @@ sidebarDepth: 2
# 进度池
+`|[1]|`[]`
align|列对齐方式|`Array`|[2]|`[]`
index|显示行号|`Boolean`|`true|false`|`false`
+indexHeader|行号表头|`String`|`-`|`'#'`
carousel|轮播方式|`String`|`'single'|'page'`|`'single'`
+hoverPause|悬浮暂停轮播|`Boolean`|---|`true`
## config相关注释
@@ -112,6 +122,46 @@ rowIndex|行索引|`Number`|---|---
columnIndex|列索引|`Number`|---|---
+## mouseover事件
+
+当鼠标悬浮在某个单元格上时（表头不支持），轮播表将抛出一个`mouseover`事件，包含被悬浮单元格的相关数据（与click事件数据相同）。
+
+## updateRows方法alpha
+
+如果想要不断**追加**行数据，又不想从头开始轮播，可以使用此方法更新行数据，不会导致从头轮播，也可以设置下次滚动的起始行。
+
+```javascript
+/**
+ * @param {string[][]} rows 更新后的行数据
+ * @param {number} index 下次滚动的起始行 （可缺省）
+ */
+function updateRows(rows, index) {
+ // ...
+}
+```
+
+```vue
+
+
+
+
+```
+
+
-
-
-
-
+
+
+
+ 