ykxiao/DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add color configuration items to customize colors

Browse Source
This commit is contained in:
JM
2019-12-06 20:55:51 +08:00
parent f4888ad9cd
commit 14765c6e79
20 changed files with 866 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/decoration10/src/main.vue
View File

@@ -2,13 +2,13 @@
<div class="dv-decoration-10" :ref="ref">
<svg :width="width" :height="height">
<polyline
stroke="rgba(0, 194, 255, 0.3)"
:stroke="mergedColor[1]"
stroke-width="2"
:points="`0, ${height / 2} ${width}, ${height / 2}`"
/>
<polyline
stroke="rgba(0, 194, 255, 1)"
:stroke="mergedColor[0]"
stroke-width="2"
:points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
:stroke-dasharray="`0, ${width * 0.2}`"
@@ -32,7 +32,7 @@
</polyline>
<polyline
stroke="rgba(0, 194, 255, 1)"
:stroke="mergedColor[0]"
stroke-width="2"
:points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
:stroke-dasharray="`0, ${width * 0.6}`"
@@ -55,7 +55,7 @@
</polyline>
<polyline
stroke="rgba(0, 194, 255, 1)"
:stroke="mergedColor[0]"
stroke-width="2"
:points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
:stroke-dasharray="`0, ${width * 0.2}`"
@@ -77,65 +77,65 @@
/>
</polyline>
<circle cx="2" :cy="height / 2" r="2" fill="#03709f">
<circle cx="2" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate
:id="animationId1"
attributeName="fill"
values="#03709f;#00c2ff"
:values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`0s;${animationId7}.end`"
dur="0.3s"
fill="freeze"
/>
</circle>
<circle :cx="width * 0.2" :cy="height / 2" r="2" fill="#03709f">
<circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate
:id="animationId3"
attributeName="fill"
values="#03709f;#00c2ff"
:values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`${animationId2}.end`"
dur="0.3s"
fill="freeze"
/>
<animate
attributeName="fill"
values="#03709f;#03709f"
:values="`${mergedColor[1]};${mergedColor[1]}`"
dur="0.01s"
:begin="`${animationId7}.end`"
fill="freeze"
/>
</circle>
<circle :cx="width * 0.8" :cy="height / 2" r="2" fill="#03709f">
<circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate
:id="animationId5"
attributeName="fill"
values="#03709f;#00c2ff"
:values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`${animationId4}.end`"
dur="0.3s"
fill="freeze"
/>
<animate
attributeName="fill"
values="#03709f;#03709f"
:values="`${mergedColor[1]};${mergedColor[1]}`"
dur="0.01s"
:begin="`${animationId7}.end`"
fill="freeze"
/>
</circle>
<circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f">
<circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate
:id="animationId7"
attributeName="fill"
values="#03709f;#00c2ff"
:values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`${animationId6}.end`"
dur="0.3s"
fill="freeze"
/>
<animate
attributeName="fill"
values="#03709f;#03709f"
:values="`${mergedColor[1]};${mergedColor[1]}`"
dur="0.01s"
:begin="`${animationId7}.end`"
fill="freeze"
@@ -148,9 +148,19 @@
<script>
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: 'DvDecoration10',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const timestamp = Date.now()
return {
@@ -162,8 +172,31 @@ export default {
animationId4: `d10ani4${timestamp}`,
animationId5: `d10ani5${timestamp}`,
animationId6: `d10ani6${timestamp}`,
animationId7: `d10ani7${timestamp}`
animationId7: `d10ani7${timestamp}`,
defaultColor: ['#00c2ff', 'rgba(0, 194, 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()
}
}
</script>