Compare commits
No commits in common. "master" and "V2.5.0-alpha" have entirely different histories.
master
...
V2.5.0-alp
145
CHANGELOG.md
145
CHANGELOG.md
|
|
@ -1,146 +1,3 @@
|
|||
# 2.10.0-alpha (2020-09-09)
|
||||
|
||||
### New
|
||||
|
||||
- **decoration12:** New decoration(Radar scan).
|
||||
|
||||
### Optmization
|
||||
|
||||
- **decoration** add `dur` configuration.
|
||||
- **activeRingChart** add `digitalFlopUnit` configuration.
|
||||
|
||||
# 2.9.9-alpha (2020-08-25)
|
||||
|
||||
### Optmization
|
||||
|
||||
- **borderBox:** Canonical class name.
|
||||
- **autoResize(mixin):** Add exception prompt.
|
||||
|
||||
# 2.9.8-alpha (2020-08-20)
|
||||
|
||||
### Optmization
|
||||
|
||||
- **scrollRankingBoard:** Add value formatter.
|
||||
|
||||
# 2.9.7-alpha (2020-08-19)
|
||||
|
||||
### Optmization
|
||||
|
||||
- **scrollBoard:** Optimize the update effect of updateRows.
|
||||
|
||||
# 2.9.6-alpha (2020-08-05)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **scrollBoard:** Carousel is abnormal when carousel is page.
|
||||
- **scrollRankingBoard:** Carousel is abnormal when carousel is page.
|
||||
|
||||
# 2.9.5-alpha (2020-08-05)
|
||||
|
||||
### Optmization
|
||||
|
||||
- **scrollBoard:** Reduce redundant node rendering.
|
||||
- **scrollRankingBoard:** Reduce redundant node rendering.
|
||||
- **scrollBoard:** Add api to update row data.
|
||||
|
||||
# 2.9.4-alpha (2020-07-03)
|
||||
|
||||
### Optmization
|
||||
|
||||
- **scrollBoard:** Optimize key value [(#8)](https://github.com/DataV-Team/DataV-React/issues/8).
|
||||
|
||||
# 2.9.3-alpha (2020-07-02)
|
||||
|
||||
### Perfect
|
||||
|
||||
- **uuid:** Optimization of `-` in uuid will cause abnormal svg animation [(#108)](https://github.com/DataV-Team/DataV/issues/108).
|
||||
|
||||
# 2.9.2-alpha (2020-06-16)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **scrollBoard:** reset animationIndex when config upate.
|
||||
|
||||
# 2.9.1-alpha (2020-06-16)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **scrollRankingBoard:** Calculation optimization of negative values [(#101)](https://github.com/DataV-Team/DataV/pull/101).
|
||||
|
||||
### Perfect
|
||||
|
||||
- **digitalFlop:** add number formatter.
|
||||
|
||||
# 2.9.0-alpha (2020-06-10)
|
||||
|
||||
### ScrollBoard
|
||||
|
||||
- **hoverPause:** add `hoverPause` configuration [(#96)](https://github.com/DataV-Team/DataV/pull/96).
|
||||
- **mouseover:** add `mouseover` event [(#96)](https://github.com/DataV-Team/DataV/pull/96).
|
||||
|
||||
# 2.8.4-alpha (2020-05-25)
|
||||
|
||||
### Perfect
|
||||
|
||||
- **uuid:** Use uuid to produce unique id.
|
||||
|
||||
# 2.8.3-alpha (2020-05-06)
|
||||
|
||||
### Perfect
|
||||
|
||||
- **activeRingChart:** add `showOriginValue` configuration.
|
||||
- **capsuleChart:** add `showValue` configuration.
|
||||
|
||||
# 2.8.2-alpha (2020-05-06)
|
||||
|
||||
### Perfect
|
||||
|
||||
- **borderBox8:** add `reverse` configuration.
|
||||
|
||||
# 2.8.1-alpha (2020-05-03)
|
||||
|
||||
### Perfect
|
||||
|
||||
- **digitalFlop:** Use `\n` to start a newline.
|
||||
- **digitalFlop:** `rowGap` configuration.
|
||||
|
||||
# 2.7.4-alpha (2020-04-15)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **capsuleChart:** Calculate exception when min value is less 5 [(#59)](https://github.com/DataV-Team/DataV/pull/59).
|
||||
|
||||
# 2.7.3-alpha (2020-01-16)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **activeRingChart:** `parseInt` precision lost.
|
||||
|
||||
# 2.7.2-alpha (2020-01-10)
|
||||
|
||||
### Perfect
|
||||
|
||||
- **ativeRingChart:** Add digitalFlopToFixed configuration.
|
||||
|
||||
# 2.7.1-alpha (2020-01-08)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **flylineChartEnhanced:** Exception when relative is false.
|
||||
|
||||
# 2.7.0-alpha (2020-01-05)
|
||||
|
||||
### New
|
||||
|
||||
- **flylineChartEnhanced:** Enhanced flylineChart [(#12)](https://github.com/DataV-Team/DataV/issues/12).
|
||||
|
||||
# 2.6.0-alpha (2019-12-25)
|
||||
|
||||
### Perfect
|
||||
|
||||
- **scrollRankingBoard:** Configurable auto-sequencing [(#35)](https://github.com/DataV-Team/DataV/pull/35).
|
||||
- **scrollRankingBoard:** Render name using `v-html` [(#36)](https://github.com/DataV-Team/DataV/pull/36).
|
||||
|
||||
# 2.5.0-alpha (2019-12-06)
|
||||
|
||||
### Feature
|
||||
|
|
@ -169,7 +26,7 @@
|
|||
|
||||
# 2.4.7-alpha (2019-10-24)
|
||||
|
||||
### Perfect
|
||||
### perfect
|
||||
|
||||
- **charts:** Optimize memory leaks.
|
||||
- **digitalFlop:** Optimize memory leaks.
|
||||
|
|
|
|||
|
|
@ -49,8 +49,7 @@ Vue.use(borderBox1)
|
|||
|
||||
### TODO
|
||||
|
||||
* **地图组件**
|
||||
* **TS**重构组件库底层依赖
|
||||
* **飞线图**添加多中心点及反向飞线功能
|
||||
|
||||
### 致谢
|
||||
|
||||
|
|
|
|||
|
|
@ -59,8 +59,7 @@ React version of the component library and feedback[Questionnaire](https://www.w
|
|||
|
||||
### TODO
|
||||
|
||||
* **Map Component**
|
||||
* Refactor underlying dependencies using **TS**.
|
||||
* **flylineChart**Add multi-center point and reverse fly line function.
|
||||
|
||||
### Acknowledgement
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -28,7 +28,7 @@ export default {
|
|||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
|
@ -78,16 +78,6 @@ export default {
|
|||
fontSize: 25,
|
||||
fill: '#fff'
|
||||
},
|
||||
/**
|
||||
* @description Digital flop toFixed
|
||||
* @type {Number}
|
||||
*/
|
||||
digitalFlopToFixed: 0,
|
||||
/**
|
||||
* @description Digital flop unit
|
||||
* @type {String}
|
||||
*/
|
||||
digitalFlopUnit: '',
|
||||
/**
|
||||
* @description CRender animationCurve
|
||||
* @type {String}
|
||||
|
|
@ -99,13 +89,7 @@ export default {
|
|||
* @type {String}
|
||||
* @default animationFrame = 50
|
||||
*/
|
||||
animationFrame: 50,
|
||||
/**
|
||||
* @description showOriginValue
|
||||
* @type {Boolean}
|
||||
* @default showOriginValue = false
|
||||
*/
|
||||
showOriginValue: false
|
||||
animationFrame: 50
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
|
@ -118,48 +102,33 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
digitalFlop() {
|
||||
digitalFlop () {
|
||||
const { mergedConfig, activeIndex } = this
|
||||
|
||||
if (!mergedConfig) return {}
|
||||
|
||||
const {
|
||||
digitalFlopStyle,
|
||||
digitalFlopToFixed,
|
||||
data,
|
||||
showOriginValue,
|
||||
digitalFlopUnit
|
||||
} = mergedConfig
|
||||
const { digitalFlopStyle, data } = mergedConfig
|
||||
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
let displayValue
|
||||
const sum = value.reduce((all, v) => all + v, 0)
|
||||
|
||||
if (showOriginValue) {
|
||||
displayValue = value[activeIndex]
|
||||
} else {
|
||||
const sum = value.reduce((all, v) => all + v, 0)
|
||||
|
||||
const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
|
||||
|
||||
displayValue = percent
|
||||
}
|
||||
const percent = parseInt(value[activeIndex] / sum * 100) || 0
|
||||
|
||||
return {
|
||||
content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
|
||||
number: [displayValue],
|
||||
style: digitalFlopStyle,
|
||||
toFixed: digitalFlopToFixed
|
||||
content: '{nt}%',
|
||||
number: [percent],
|
||||
style: digitalFlopStyle
|
||||
}
|
||||
},
|
||||
ringName() {
|
||||
ringName () {
|
||||
const { mergedConfig, activeIndex } = this
|
||||
|
||||
if (!mergedConfig) return ''
|
||||
|
||||
return mergedConfig.data[activeIndex].name
|
||||
},
|
||||
fontSize() {
|
||||
fontSize () {
|
||||
const { mergedConfig } = this
|
||||
|
||||
if (!mergedConfig) return ''
|
||||
|
|
@ -168,7 +137,7 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
config() {
|
||||
config () {
|
||||
const { animationHandler, mergeConfig, setRingOption } = this
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
|
|
@ -181,7 +150,7 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
init () {
|
||||
const { initChart, mergeConfig, setRingOption } = this
|
||||
|
||||
initChart()
|
||||
|
|
@ -190,20 +159,17 @@ export default {
|
|||
|
||||
setRingOption()
|
||||
},
|
||||
initChart() {
|
||||
initChart () {
|
||||
const { $refs } = this
|
||||
|
||||
this.chart = new Charts($refs['active-ring-chart'])
|
||||
},
|
||||
mergeConfig() {
|
||||
mergeConfig () {
|
||||
const { defaultConfig, config } = this
|
||||
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
)
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
},
|
||||
setRingOption() {
|
||||
setRingOption () {
|
||||
const { getRingOption, chart, ringAnimation } = this
|
||||
|
||||
const option = getRingOption()
|
||||
|
|
@ -212,7 +178,7 @@ export default {
|
|||
|
||||
ringAnimation()
|
||||
},
|
||||
getRingOption() {
|
||||
getRingOption () {
|
||||
const { mergedConfig, getRealRadius } = this
|
||||
|
||||
const radius = getRealRadius()
|
||||
|
|
@ -234,7 +200,7 @@ export default {
|
|||
color: mergedConfig.color
|
||||
}
|
||||
},
|
||||
getRealRadius(active = false) {
|
||||
getRealRadius (active = false) {
|
||||
const { mergedConfig, chart } = this
|
||||
|
||||
const { radius, activeRadius, lineWidth } = mergedConfig
|
||||
|
|
@ -245,15 +211,14 @@ export default {
|
|||
|
||||
let realRadius = active ? activeRadius : radius
|
||||
|
||||
if (typeof realRadius !== 'number')
|
||||
realRadius = (parseInt(realRadius) / 100) * maxRadius
|
||||
if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
|
||||
|
||||
const insideRadius = realRadius - halfLineWidth
|
||||
const outSideRadius = realRadius + halfLineWidth
|
||||
|
||||
return [insideRadius, outSideRadius]
|
||||
},
|
||||
ringAnimation() {
|
||||
ringAnimation () {
|
||||
let { activeIndex, getRingOption, chart, getRealRadius } = this
|
||||
|
||||
const radius = getRealRadius()
|
||||
|
|
@ -286,12 +251,12 @@ export default {
|
|||
}, activeTimeGap)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
beforeDestroy () {
|
||||
const { animationHandler } = this
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
|
|
|
|||
|
|
@ -1,16 +1,5 @@
|
|||
<template>
|
||||
<div class="dv-border-box-1" :ref="ref">
|
||||
<svg class="border" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
|
||||
38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
|
||||
85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
|
||||
${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
|
||||
${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
|
||||
${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
|
||||
${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
|
||||
${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
|
||||
</svg>
|
||||
|
||||
<div class="dv-border-box-1">
|
||||
<svg
|
||||
width="150px"
|
||||
height="150px"
|
||||
|
|
@ -19,36 +8,36 @@
|
|||
:class="`${item} border`"
|
||||
>
|
||||
<polygon
|
||||
:fill="mergedColor[0]"
|
||||
fill="#4fd2dd"
|
||||
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
|
||||
values="#4fd2dd;#235fa7;#4fd2dd"
|
||||
dur="0.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
<polygon
|
||||
:fill="mergedColor[1]"
|
||||
fill="#235fa7"
|
||||
points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
|
||||
values="#235fa7;#4fd2dd;#235fa7"
|
||||
dur="0.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
<polygon
|
||||
:fill="mergedColor[0]"
|
||||
fill="#4fd2dd"
|
||||
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[0]};${mergedColor[1]};transparent`"
|
||||
values="#4fd2dd;#235fa7;transparent"
|
||||
dur="1s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
|
|
@ -63,54 +52,12 @@
|
|||
</template>
|
||||
|
||||
<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: 'DvBorderBox1',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-1',
|
||||
|
||||
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
|
||||
|
||||
defaultColor: ['#4fd2dd', '#235fa7'],
|
||||
|
||||
mergedColor: []
|
||||
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -2,9 +2,10 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: inset 0 0 25px 3px #1d48c4;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.dv-border-box-10 .dv-border-svg-container {
|
||||
.dv-border-box-10 .border {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,14 @@
|
|||
<template>
|
||||
<div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
|
||||
4, ${height} 0, ${height - 4} 0, 4
|
||||
`" />
|
||||
</svg>
|
||||
|
||||
<div class="dv-border-box-10">
|
||||
<svg
|
||||
width="150px"
|
||||
height="150px"
|
||||
:key="item"
|
||||
v-for="item in border"
|
||||
:class="`${item} dv-border-svg-container`"
|
||||
:class="`${item} border`"
|
||||
>
|
||||
<polygon
|
||||
:fill="mergedColor[1]"
|
||||
fill="#d3e1f8"
|
||||
points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -27,54 +20,12 @@
|
|||
</template>
|
||||
|
||||
<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: 'DvBorderBox10',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-10',
|
||||
|
||||
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
|
||||
|
||||
defaultColor: ['#1d48c4', '#d3e1f8'],
|
||||
|
||||
mergedColor: []
|
||||
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import './src/main.css'
|
||||
import BorderBox11 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox11.name, BorderBox11)
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
.dv-border-box-11 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-11 .dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.dv-border-box-11 .dv-border-svg-container > polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-11 .border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,280 +0,0 @@
|
|||
<template>
|
||||
<div class="dv-border-box-11" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
|
||||
<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
|
||||
<feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
|
||||
<feFlood :flood-color="mergedColor[1]" result="glowColor" />
|
||||
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
|
||||
<feMerge>
|
||||
<feMergeNode in="softGlowColored"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
|
||||
${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
|
||||
${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
|
||||
20, ${height - 8} 8, ${height - 25} 8, 50
|
||||
`" />
|
||||
|
||||
<polyline
|
||||
:stroke="mergedColor[0]"
|
||||
:filter="`url(#${filterId})`"
|
||||
:points="`
|
||||
${(width - titleWidth) / 2}, 30
|
||||
20, 30 7, 50 7, ${50 + (height - 167) / 2}
|
||||
13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
|
||||
7, ${140 + (height - 167) / 2} 7, ${height - 27}
|
||||
20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
|
||||
${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
|
||||
${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
|
||||
${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
|
||||
${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
|
||||
${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
|
||||
${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
|
||||
`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:stroke="mergedColor[0]"
|
||||
fill="transparent"
|
||||
:points="`
|
||||
${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
|
||||
${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
|
||||
`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:stroke="mergedColor[0]"
|
||||
fill="transparent"
|
||||
:points="`
|
||||
${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
|
||||
${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
|
||||
`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:stroke="mergedColor[0]"
|
||||
:fill="fade(mergedColor[1] || defaultColor[1], 30)"
|
||||
:filter="`url(#${filterId})`"
|
||||
:points="`
|
||||
${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
|
||||
${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
|
||||
${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
|
||||
`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="1"
|
||||
:points="`
|
||||
${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
|
||||
${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0.7;1"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="0.7"
|
||||
:points="`
|
||||
${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
|
||||
${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.7;0.4;0.7"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="0.5"
|
||||
:points="`
|
||||
${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
|
||||
${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.5;0.2;0.5"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="1"
|
||||
:points="`
|
||||
${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
|
||||
${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0.7;1"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="0.7"
|
||||
:points="`
|
||||
${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
|
||||
${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.7;0.4;0.7"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
<polygon
|
||||
:filter="`url(#${filterId})`"
|
||||
:fill="mergedColor[0]"
|
||||
opacity="0.5"
|
||||
:points="`
|
||||
${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
|
||||
${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
|
||||
`"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.5;0.2;0.5"
|
||||
dur="2s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
|
||||
<text
|
||||
class="dv-border-box-11-title"
|
||||
:x="`${width / 2}`"
|
||||
y="32"
|
||||
fill="#fff"
|
||||
font-size="18"
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
>
|
||||
{{ title }}
|
||||
</text>
|
||||
|
||||
<polygon
|
||||
:fill="mergedColor[0]"
|
||||
:filter="`url(#${filterId})`"
|
||||
:points="`
|
||||
7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
|
||||
11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:fill="mergedColor[0]"
|
||||
:filter="`url(#${filterId})`"
|
||||
:points="`
|
||||
${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
|
||||
${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
|
||||
`"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { fade } from '@jiaminghi/color'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox11',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
titleWidth: {
|
||||
type: Number,
|
||||
default: 250
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'border-box-11',
|
||||
filterId: `border-box-11-filterId-${id}`,
|
||||
|
||||
defaultColor: ['#8aaafb', '#1f33a2'],
|
||||
|
||||
mergedColor: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mergeColor () {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
},
|
||||
fade
|
||||
},
|
||||
mounted () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import './src/main.css'
|
||||
import BorderBox12 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox12.name, BorderBox12)
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.dv-border-box-12 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-12 .dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.dv-border-box-12 .border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
<template>
|
||||
<div class="dv-border-box-12" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
|
||||
<feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
|
||||
<feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
|
||||
<feFlood :flood-color="fade(mergedColor[1] || defaultColor[1], 70)" result="glowColor">
|
||||
<animate
|
||||
attributeName="flood-color"
|
||||
:values="`
|
||||
${fade(mergedColor[1] || defaultColor[1], 70)};
|
||||
${fade(mergedColor[1] || defaultColor[1], 30)};
|
||||
${fade(mergedColor[1] || defaultColor[1], 70)};
|
||||
`"
|
||||
dur="3s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</feFlood>
|
||||
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
|
||||
<feMerge>
|
||||
<feMergeNode in="softGlowColored"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<path
|
||||
v-if="width && height"
|
||||
:fill="backgroundColor"
|
||||
stroke-width="2"
|
||||
:stroke="mergedColor[0]"
|
||||
:d="`
|
||||
M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
|
||||
L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
|
||||
L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
|
||||
Q 5 5 15 5
|
||||
`"
|
||||
/>
|
||||
|
||||
<path
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
stroke-linecap="round"
|
||||
:filter="`url(#${filterId})`"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
|
||||
/>
|
||||
|
||||
<path
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
stroke-linecap="round"
|
||||
:filter="`url(#${filterId})`"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`"
|
||||
/>
|
||||
|
||||
<path
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
stroke-linecap="round"
|
||||
:filter="`url(#${filterId})`"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`
|
||||
M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
|
||||
Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
|
||||
L ${width - 5} ${height - 20}
|
||||
`"
|
||||
/>
|
||||
|
||||
<path
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
stroke-linecap="round"
|
||||
:filter="`url(#${filterId})`"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`
|
||||
M 20 ${height - 5} L 15 ${height - 5}
|
||||
Q 5 ${height - 5} 5 ${height - 15}
|
||||
L 5 ${height - 20}
|
||||
`"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { fade } from '@jiaminghi/color'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox12',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'border-box-12',
|
||||
filterId: `borderr-box-12-filterId-${id}`,
|
||||
|
||||
defaultColor: ['#2e6099', '#7ce7fd'],
|
||||
|
||||
mergedColor: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mergeColor () {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
},
|
||||
fade
|
||||
},
|
||||
mounted () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import './src/main.css'
|
||||
import BorderBox13 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox13.name, BorderBox13)
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.dv-border-box-13 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-13 .dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.dv-border-box-13 .border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<template>
|
||||
<div class="dv-border-box-13" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<path
|
||||
:fill="backgroundColor"
|
||||
:stroke="mergedColor[0]"
|
||||
:d="`
|
||||
M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
|
||||
L ${width - 20} 10 L ${width - 5} 25
|
||||
L ${width - 5} ${height - 5} L 20 ${height - 5}
|
||||
L 5 ${height - 20} L 5 20
|
||||
`"
|
||||
/>
|
||||
|
||||
<path
|
||||
fill="transparent"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-dasharray="10, 5"
|
||||
:stroke="mergedColor[0]"
|
||||
:d="`M 16 9 L 61 9`"
|
||||
/>
|
||||
|
||||
<path
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`M 5 20 L 5 10 L 12 3 L 60 3 L 68 10`"
|
||||
/>
|
||||
|
||||
<path
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[1]"
|
||||
:d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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: 'DvBorderBox13',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-13',
|
||||
|
||||
defaultColor: ['#6586ec', '#2cf7fe'],
|
||||
|
||||
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>
|
||||
|
|
@ -10,10 +10,19 @@
|
|||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.dv-border-box-2 .dv-border-svg-container > polyline {
|
||||
.dv-border-box-2 .dv-border-svg-container polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-2 .dv-border-svg-container circle {
|
||||
fill: #fff;
|
||||
}
|
||||
.dv-border-box-2 .dv-bb2-line1 {
|
||||
stroke: #fff;
|
||||
}
|
||||
.dv-border-box-2 .dv-bb2-line2 {
|
||||
stroke: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.dv-border-box-2 .border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,14 @@
|
|||
<template>
|
||||
<div class="dv-border-box-2" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
|
||||
`" />
|
||||
|
||||
<polyline
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
|
||||
/>
|
||||
<polyline
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
|
||||
/>
|
||||
<circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
|
||||
<circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
|
||||
<circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
|
||||
<circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
|
||||
<polyline class="dv-bb2-line1"
|
||||
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`" />
|
||||
<polyline class="dv-bb2-line2"
|
||||
:points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`" />
|
||||
<circle cx="11" cy="11" r="1" />
|
||||
<circle :cx="width - 11" cy="11" r="1" />
|
||||
<circle :cx="width - 11" :cy="height - 11" r="1" />
|
||||
<circle cx="11" :cy="height - 11" r="1" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
|
|
@ -28,50 +20,13 @@
|
|||
<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: 'DvBorderBox2',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-2',
|
||||
|
||||
defaultColor: ['#fff', 'rgba(255, 255, 255, 0.6)'],
|
||||
|
||||
mergedColor: []
|
||||
ref: 'border-box-2'
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -10,8 +10,9 @@
|
|||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.dv-border-box-3 .dv-border-svg-container > polyline {
|
||||
.dv-border-box-3 .dv-border-svg-container polyline {
|
||||
fill: none;
|
||||
stroke: #2862b7;
|
||||
}
|
||||
.dv-border-box-3 .dv-bb3-line1 {
|
||||
stroke-width: 3;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,14 @@
|
|||
<template>
|
||||
<div class="dv-border-box-3" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
|
||||
`" />
|
||||
|
||||
<polyline class="dv-bb3-line1"
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
|
||||
/>
|
||||
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
|
||||
<polyline class="dv-bb3-line2"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
|
||||
/>
|
||||
:points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`" />
|
||||
<polyline class="dv-bb3-line2"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
|
||||
/>
|
||||
:points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`" />
|
||||
<polyline class="dv-bb3-line2"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
|
||||
/>
|
||||
:points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
|
|
@ -32,50 +20,13 @@
|
|||
<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: 'DvBorderBox3',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-3',
|
||||
|
||||
defaultColor: ['#2862b7', '#2862b7'],
|
||||
|
||||
mergedColor: []
|
||||
ref: 'border-box-3'
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -13,9 +13,15 @@
|
|||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.dv-border-box-4 .dv-border-svg-container > polyline {
|
||||
.dv-border-box-4 .dv-border-svg-container polyline {
|
||||
fill: none;
|
||||
}
|
||||
.dv-border-box-4 .sred {
|
||||
stroke: red;
|
||||
}
|
||||
.dv-border-box-4 .sblue {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
}
|
||||
.dv-border-box-4 .sw1 {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
|
@ -24,38 +30,48 @@
|
|||
stroke-linecap: round;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-1 {
|
||||
stroke: red;
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-2 {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-3 {
|
||||
stroke: red;
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-4 {
|
||||
stroke: red;
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-5 {
|
||||
stroke: red;
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-6 {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-7 {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-8 {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-9 {
|
||||
stroke: red;
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 100 250;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-10 {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 80 270;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,18 @@
|
|||
<template>
|
||||
<div class="dv-border-box-4" :ref="ref">
|
||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
|
||||
16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
|
||||
`" />
|
||||
|
||||
<polyline class="dv-bb4-line-1"
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
|
||||
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
|
||||
/>
|
||||
<polyline
|
||||
:stroke="mergedColor[1]"
|
||||
class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
|
||||
14, ${height - 100}`"
|
||||
/>
|
||||
|
||||
<polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
|
||||
<polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
|
||||
<polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
|
||||
<polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
|
||||
<polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
|
||||
<polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
|
||||
<polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
|
||||
<polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
|
||||
<polyline class="dv-bb4-line-1" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
|
||||
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"/>
|
||||
<polyline class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
|
||||
14, ${height - 100}`" />
|
||||
<polyline class="dv-bb4-line-3" :points="`7, ${height - 40} 7, ${height - 75}`" />
|
||||
<polyline class="dv-bb4-line-4" :points="`28, 24 13, 41 13, 64`" />
|
||||
<polyline class="dv-bb4-line-5" :points="`5, 45 5, 140`" />
|
||||
<polyline class="dv-bb4-line-6" :points="`14, 75 14, 180`" />
|
||||
<polyline class="dv-bb4-line-7" :points="`55, 11 147, 11 167, 26 250, 26`" />
|
||||
<polyline class="dv-bb4-line-8" :points="`158, 5 173, 16`" />
|
||||
<polyline class="dv-bb4-line-9" :points="`200, 17 ${width - 10}, 17`" />
|
||||
<polyline class="dv-bb4-line-10" :points="`385, 17 ${width - 10}, 17`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
|
|
@ -36,54 +24,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: 'DvBorderBox4',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-4'
|
||||
}
|
||||
},
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-4',
|
||||
|
||||
defaultColor: ['red', 'rgba(0,0,255,0.8)'],
|
||||
|
||||
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>
|
||||
|
|
@ -6,27 +6,32 @@
|
|||
.dv-border-box-5 .dv-reverse {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.dv-border-box-5 .dv-border-svg-container {
|
||||
.dv-border-box-5 .dv-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-5 .dv-border-svg-container > polyline {
|
||||
.dv-border-box-5 .dv-svg-container polyline {
|
||||
fill: none;
|
||||
}
|
||||
.dv-border-box-5 .dv-bb5-line-1,
|
||||
.dv-border-box-5 .dv-bb5-line-2 {
|
||||
.dv-border-box-5 .dv-bb5-line-1 {
|
||||
stroke-width: 1;
|
||||
stroke: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
.dv-border-box-5 .dv-bb5-line-2 {
|
||||
stroke: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.dv-border-box-5 .dv-bb5-line-3,
|
||||
.dv-border-box-5 .dv-bb5-line-6 {
|
||||
stroke-width: 5;
|
||||
stroke: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.dv-border-box-5 .dv-bb5-line-4,
|
||||
.dv-border-box-5 .dv-bb5-line-5 {
|
||||
stroke-width: 2;
|
||||
stroke: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.dv-border-box-5 .border-box-content {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,14 @@
|
|||
<template>
|
||||
<div class="dv-border-box-5" :ref="ref">
|
||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
|
||||
`" />
|
||||
|
||||
<polyline
|
||||
class="dv-bb5-line-1"
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
|
||||
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
|
||||
/>
|
||||
<polyline
|
||||
class="dv-bb5-line-2"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
|
||||
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
|
||||
/>
|
||||
<polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
|
||||
<polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
|
||||
<polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
|
||||
<polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
|
||||
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polyline class="dv-bb5-line-1" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
|
||||
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" />
|
||||
<polyline class="dv-bb5-line-2" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
|
||||
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`" />
|
||||
<polyline class="dv-bb5-line-3" :points="`50, 13 ${width - 35}, 13`" />
|
||||
<polyline class="dv-bb5-line-4" :points="`15, 20 ${width - 35}, 20`" />
|
||||
<polyline class="dv-bb5-line-5" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
|
||||
<polyline class="dv-bb5-line-6" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
|
|
@ -32,54 +20,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: 'DvBorderBox5',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-5'
|
||||
}
|
||||
},
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-5',
|
||||
|
||||
defaultColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],
|
||||
|
||||
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>
|
||||
|
|
@ -3,16 +3,20 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-6 .dv-border-svg-container {
|
||||
.dv-border-box-6 .dv-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-6 .dv-border-svg-container > polyline {
|
||||
.dv-border-box-6 .dv-svg-container circle {
|
||||
fill: gray;
|
||||
}
|
||||
.dv-border-box-6 .dv-svg-container polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
.dv-border-box-6 .border-box-content {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,22 @@
|
|||
<template>
|
||||
<div class="dv-border-box-6" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
|
||||
`" />
|
||||
|
||||
<circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
|
||||
<circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
|
||||
<circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
|
||||
<circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
|
||||
<polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<circle cx="5" cy="5" r="2"/>
|
||||
<circle :cx="width - 5" cy="5" r="2" />
|
||||
<circle :cx="width - 5" :cy="height - 5" r="2" />
|
||||
<circle cx="5" :cy="height - 5" r="2" />
|
||||
<polyline :points="`10, 4 ${width - 10}, 4`" />
|
||||
<polyline :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
|
||||
<polyline :points="`5, 70 5, ${height - 70}`" />
|
||||
<polyline :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
|
||||
<polyline :points="`3, 10, 3, 50`" />
|
||||
<polyline :points="`7, 30 7, 80`" />
|
||||
<polyline :points="`${width - 3}, 10 ${width - 3}, 50`" />
|
||||
<polyline :points="`${width - 7}, 30 ${width - 7}, 80`" />
|
||||
<polyline :points="`3, ${height - 10} 3, ${height - 50}`" />
|
||||
<polyline :points="`7, ${height - 30} 7, ${height - 80}`" />
|
||||
<polyline :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
|
||||
<polyline :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
|
|
@ -32,50 +28,13 @@
|
|||
<script>
|
||||
import autoResize from '../../../mixin/autoResize.js'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox6',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-6',
|
||||
|
||||
defaultColor: ['rgba(255, 255, 255, 0.35)', 'gray'],
|
||||
|
||||
mergedColor: []
|
||||
ref: 'border-box-6'
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -2,22 +2,26 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: inset 0 0 40px rgba(128, 128, 128, 0.3);
|
||||
border: 1px solid rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
.dv-border-box-7 .dv-border-svg-container {
|
||||
.dv-border-box-7 .dv-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-7 .dv-border-svg-container > polyline {
|
||||
.dv-border-box-7 .dv-svg-container polyline {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.dv-border-box-7 .dv-bb7-line-width-2 {
|
||||
stroke: rgba(128, 128, 128, 0.3);
|
||||
stroke-width: 2;
|
||||
}
|
||||
.dv-border-box-7 .dv-bb7-line-width-5 {
|
||||
stroke: rgba(128, 128, 128, 0.5);
|
||||
stroke-width: 5;
|
||||
}
|
||||
.dv-border-box-7 .border-box-content {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,15 @@
|
|||
|
||||
<template>
|
||||
<div
|
||||
class="dv-border-box-7"
|
||||
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
|
||||
:ref="ref"
|
||||
>
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
|
||||
<div class="dv-border-box-7" :ref="ref">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<polyline class="dv-bb7-line-width-2" :points="`0, 25 0, 0 25, 0`" />
|
||||
<polyline class="dv-bb7-line-width-2" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
|
||||
<polyline class="dv-bb7-line-width-2" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
|
||||
<polyline class="dv-bb7-line-width-2" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
|
||||
|
||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
|
||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
|
||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
|
||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
|
||||
<polyline class="dv-bb7-line-width-5" :points="`0, 10 0, 0 10, 0`" />
|
||||
<polyline class="dv-bb7-line-width-5" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
|
||||
<polyline class="dv-bb7-line-width-5" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
|
||||
<polyline class="dv-bb7-line-width-5" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
|
||||
</svg>
|
||||
|
||||
<div class="border-box-content">
|
||||
|
|
@ -26,50 +21,13 @@
|
|||
<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: 'DvBorderBox7',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-7',
|
||||
|
||||
defaultColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],
|
||||
|
||||
mergedColor: []
|
||||
ref: 'border-box-7'
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-8 .dv-border-svg-container {
|
||||
.dv-border-box-8 svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="dv-border-box-8" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<path
|
||||
:id="path"
|
||||
:d="pathD"
|
||||
:d="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
|
||||
fill="transparent"
|
||||
/>
|
||||
<radialGradient
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
<mask :id="mask">
|
||||
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
|
||||
<animateMotion
|
||||
:dur="`${dur}s`"
|
||||
:path="pathD"
|
||||
dur="3s"
|
||||
:path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
|
||||
rotate="auto"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
|
|
@ -33,16 +33,14 @@
|
|||
</mask>
|
||||
</defs>
|
||||
|
||||
<polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
|
||||
|
||||
<use
|
||||
:stroke="mergedColor[0]"
|
||||
stroke="#235fa7"
|
||||
stroke-width="1"
|
||||
:xlink:href="`#${path}`"
|
||||
/>
|
||||
|
||||
<use
|
||||
:stroke="mergedColor[1]"
|
||||
stroke="#4fd2dd"
|
||||
stroke-width="3"
|
||||
:xlink:href="`#${path}`"
|
||||
:mask="`url(#${mask})`"
|
||||
|
|
@ -51,7 +49,7 @@
|
|||
attributeName="stroke-dasharray"
|
||||
:from="`0, ${length}`"
|
||||
:to="`${length}, 0`"
|
||||
:dur="`${dur}s`"
|
||||
dur="3s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
|
|
@ -65,44 +63,17 @@
|
|||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox8',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
dur: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'border-box-8',
|
||||
path: `border-box-8-path-${id}`,
|
||||
gradient: `border-box-8-gradient-${id}`,
|
||||
mask: `border-box-8-mask-${id}`,
|
||||
|
||||
defaultColor: ['#235fa7', '#4fd2dd'],
|
||||
|
||||
mergedColor: []
|
||||
path: `border-box-8-path-${timestamp}`,
|
||||
gradient: `border-box-8-gradient-${timestamp}`,
|
||||
mask: `border-box-8-mask-${timestamp}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -110,33 +81,7 @@ export default {
|
|||
const { width, height } = this
|
||||
|
||||
return (width + height - 5) * 2
|
||||
},
|
||||
pathD () {
|
||||
const { reverse, width, height } = this
|
||||
|
||||
if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
|
||||
|
||||
return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-9 .dv-border-svg-container {
|
||||
.dv-border-box-9 svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,42 +1,10 @@
|
|||
<template>
|
||||
<div class="dv-border-box-9" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<animate
|
||||
attributeName="x1"
|
||||
values="0%;100%;0%"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
|
||||
<animate
|
||||
attributeName="x2"
|
||||
values="100%;0%;100%"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
|
||||
<stop offset="0%" :stop-color="mergedColor[0]">
|
||||
<animate
|
||||
attributeName="stop-color"
|
||||
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</stop>
|
||||
<stop offset="100%" :stop-color="mergedColor[1]">
|
||||
<animate
|
||||
attributeName="stop-color"
|
||||
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</stop>
|
||||
<stop offset="0%" stop-color="#11eefd" />
|
||||
<stop offset="100%" stop-color="#0078d2" />
|
||||
</linearGradient>
|
||||
|
||||
<mask :id="maskId">
|
||||
|
|
@ -105,15 +73,6 @@
|
|||
</mask>
|
||||
</defs>
|
||||
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
|
||||
${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
|
||||
${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
|
||||
${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
|
||||
${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10} ${width * 0.92 + 2}, ${height - 6}
|
||||
11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
|
||||
`" />
|
||||
|
||||
<rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
|
||||
</svg>
|
||||
|
||||
|
|
@ -125,56 +84,18 @@
|
|||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox9',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'border-box-9',
|
||||
|
||||
gradientId: `border-box-9-gradient-${id}`,
|
||||
maskId: `border-box-9-mask-${id}`,
|
||||
|
||||
defaultColor: ['#11eefd', '#0078d2'],
|
||||
|
||||
mergedColor: []
|
||||
gradientId: `border-box-9-gradient-${timestamp}`,
|
||||
maskId: `border-box-9-mask-${timestamp}`
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -31,27 +31,19 @@
|
|||
margin: 5px 0px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.dv-capsule-chart .capsule-item .capsule-item-column {
|
||||
position: relative;
|
||||
.dv-capsule-chart .capsule-item div {
|
||||
height: 8px;
|
||||
margin-top: 1px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {
|
||||
font-size: 12px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.dv-capsule-chart .unit-label {
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.dv-capsule-chart .unit-text {
|
||||
text-align: right;
|
||||
|
|
|
|||
|
|
@ -7,23 +7,16 @@
|
|||
</div>
|
||||
|
||||
<div class="capsule-container">
|
||||
<div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
|
||||
<div
|
||||
class="capsule-item-column"
|
||||
:style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
|
||||
>
|
||||
<div
|
||||
v-if="mergedConfig.showValue"
|
||||
class="capsule-item-value"
|
||||
>{{ capsuleValue[index] }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="capsule-item"
|
||||
v-for="(capsule, index) in capsuleLength"
|
||||
:key="index"
|
||||
>
|
||||
<div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
|
||||
</div>
|
||||
|
||||
<div class="unit-label">
|
||||
<div
|
||||
v-for="(label, index) in labelData"
|
||||
:key="label + index"
|
||||
>{{ label }}</div>
|
||||
<div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -45,7 +38,7 @@ export default {
|
|||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
|
@ -61,61 +54,42 @@ export default {
|
|||
* @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
|
||||
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
||||
*/
|
||||
colors: [
|
||||
'#37a2da',
|
||||
'#32c5e9',
|
||||
'#67e0e3',
|
||||
'#9fe6b8',
|
||||
'#ffdb5c',
|
||||
'#ff9f7f',
|
||||
'#fb7293'
|
||||
],
|
||||
colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
|
||||
/**
|
||||
* @description Chart unit
|
||||
* @type {String}
|
||||
* @default unit = ''
|
||||
*/
|
||||
unit: '',
|
||||
/**
|
||||
* @description Show item value
|
||||
* @type {Boolean}
|
||||
* @default showValue = false
|
||||
*/
|
||||
showValue: false
|
||||
unit: ''
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
||||
capsuleLength: [],
|
||||
capsuleValue: [],
|
||||
labelData: [],
|
||||
labelDataLength: []
|
||||
labelData: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config() {
|
||||
config () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcData() {
|
||||
calcData () {
|
||||
const { mergeConfig, calcCapsuleLengthAndLabelData } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
calcCapsuleLengthAndLabelData()
|
||||
},
|
||||
mergeConfig() {
|
||||
mergeConfig () {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
)
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
},
|
||||
calcCapsuleLengthAndLabelData() {
|
||||
calcCapsuleLengthAndLabelData () {
|
||||
const { data } = this.mergedConfig
|
||||
|
||||
if (!data.length) return
|
||||
|
|
@ -124,24 +98,14 @@ export default {
|
|||
|
||||
const maxValue = Math.max(...capsuleValue)
|
||||
|
||||
this.capsuleValue = capsuleValue
|
||||
|
||||
this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
|
||||
this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
|
||||
|
||||
const oneFifth = maxValue / 5
|
||||
|
||||
const labelData = Array.from(
|
||||
new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
|
||||
)
|
||||
|
||||
this.labelData = labelData
|
||||
|
||||
this.labelDataLength = Array.from(labelData).map(v =>
|
||||
maxValue ? v / maxValue : 0
|
||||
)
|
||||
this.labelData = new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
import Charts from '@jiaminghi/charts'
|
||||
|
|
@ -21,10 +19,10 @@ export default {
|
|||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: `charts-container-${id}`,
|
||||
chartRef: `chart-${id}`,
|
||||
ref: `charts-container-${timestamp}`,
|
||||
chartRef: `chart-${timestamp}`,
|
||||
|
||||
chart: null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<rect
|
||||
v-if="Math.random() > 0.6"
|
||||
:key="i"
|
||||
:fill="mergedColor[0]"
|
||||
fill="#fff"
|
||||
:x="point[0] - halfPointSideLength"
|
||||
:y="point[1] - halfPointSideLength"
|
||||
:width="pointSideLength"
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<animate
|
||||
v-if="Math.random() > 0.6"
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[0]};transparent`"
|
||||
values="#fff;transparent"
|
||||
dur="1s"
|
||||
:begin="Math.random() * 2"
|
||||
repeatCount="indefinite"
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
<rect
|
||||
v-if="rects[0]"
|
||||
:fill="mergedColor[1]"
|
||||
fill="#0de7c2"
|
||||
:x="rects[0][0] - pointSideLength"
|
||||
:y="rects[0][1] - pointSideLength"
|
||||
:width="pointSideLength * 2"
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
|
||||
<rect
|
||||
v-if="rects[1]"
|
||||
:fill="mergedColor[1]"
|
||||
fill="#0de7c2"
|
||||
:x="rects[1][0] - 40"
|
||||
:y="rects[1][1] - pointSideLength"
|
||||
:width="40"
|
||||
|
|
@ -87,19 +87,9 @@
|
|||
<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: 'DvDecoration1',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const pointSideLength = 2.5
|
||||
|
||||
|
|
@ -118,18 +108,7 @@ export default {
|
|||
|
||||
points: [],
|
||||
|
||||
rects: [],
|
||||
|
||||
defaultColor: ['#fff', '#0de7c2'],
|
||||
|
||||
mergedColor: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
rects: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -181,17 +160,7 @@ export default {
|
|||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
mergeColor () {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,13 +2,13 @@
|
|||
<div class="dv-decoration-10" :ref="ref">
|
||||
<svg :width="width" :height="height">
|
||||
<polyline
|
||||
:stroke="mergedColor[1]"
|
||||
stroke="rgba(0, 194, 255, 0.3)"
|
||||
stroke-width="2"
|
||||
:points="`0, ${height / 2} ${width}, ${height / 2}`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
:stroke="mergedColor[0]"
|
||||
stroke="rgba(0, 194, 255, 1)"
|
||||
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="mergedColor[0]"
|
||||
stroke="rgba(0, 194, 255, 1)"
|
||||
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="mergedColor[0]"
|
||||
stroke="rgba(0, 194, 255, 1)"
|
||||
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="mergedColor[1]">
|
||||
<circle cx="2" :cy="height / 2" r="2" fill="#03709f">
|
||||
<animate
|
||||
:id="animationId1"
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[1]};${mergedColor[0]}`"
|
||||
values="#03709f;#00c2ff"
|
||||
:begin="`0s;${animationId7}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
|
||||
<circle :cx="width * 0.2" :cy="height / 2" r="2" fill="#03709f">
|
||||
<animate
|
||||
:id="animationId3"
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[1]};${mergedColor[0]}`"
|
||||
values="#03709f;#00c2ff"
|
||||
:begin="`${animationId2}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[1]};${mergedColor[1]}`"
|
||||
values="#03709f;#03709f"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
|
||||
<circle :cx="width * 0.8" :cy="height / 2" r="2" fill="#03709f">
|
||||
<animate
|
||||
:id="animationId5"
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[1]};${mergedColor[0]}`"
|
||||
values="#03709f;#00c2ff"
|
||||
:begin="`${animationId4}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[1]};${mergedColor[1]}`"
|
||||
values="#03709f;#03709f"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
|
||||
<circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f">
|
||||
<animate
|
||||
:id="animationId7"
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[1]};${mergedColor[0]}`"
|
||||
values="#03709f;#00c2ff"
|
||||
:begin="`${animationId6}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${mergedColor[1]};${mergedColor[1]}`"
|
||||
values="#03709f;#03709f"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
|
|
@ -147,57 +147,23 @@
|
|||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
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 id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'decoration-10',
|
||||
|
||||
animationId1: `d10ani1${id}`,
|
||||
animationId2: `d10ani2${id}`,
|
||||
animationId3: `d10ani3${id}`,
|
||||
animationId4: `d10ani4${id}`,
|
||||
animationId5: `d10ani5${id}`,
|
||||
animationId6: `d10ani6${id}`,
|
||||
animationId7: `d10ani7${id}`,
|
||||
|
||||
defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
|
||||
|
||||
mergedColor: []
|
||||
animationId1: `d10ani1${timestamp}`,
|
||||
animationId2: `d10ani2${timestamp}`,
|
||||
animationId3: `d10ani3${timestamp}`,
|
||||
animationId4: `d10ani4${timestamp}`,
|
||||
animationId5: `d10ani5${timestamp}`,
|
||||
animationId6: `d10ani6${timestamp}`,
|
||||
animationId7: `d10ani7${timestamp}`
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import './src/main.css'
|
||||
import Decoration11 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration11.name, Decoration11)
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.dv-decoration-11 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.dv-decoration-11 .decoration-content {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
<template>
|
||||
<div class="dv-decoration-11" :ref="ref">
|
||||
<svg :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="fade(mergedColor[1] || defaultColor[1], 10)"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`20 10, 25 4, 55 4 60 10`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:fill="fade(mergedColor[1] || defaultColor[1], 10)"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`20 ${height - 10}, 25 ${height - 4}, 55 ${height - 4} 60 ${height - 10}`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:fill="fade(mergedColor[1] || defaultColor[1], 10)"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`${width - 20} 10, ${width - 25} 4, ${width - 55} 4 ${width - 60} 10`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:fill="fade(mergedColor[1] || defaultColor[1], 10)"
|
||||
:stroke="mergedColor[1]"
|
||||
:points="`${width - 20} ${height - 10}, ${width - 25} ${height - 4}, ${width - 55} ${height - 4} ${width - 60} ${height - 10}`"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
:fill="fade(mergedColor[0] || defaultColor[0], 20)"
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`
|
||||
20 10, 5 ${height / 2} 20 ${height - 10}
|
||||
${width - 20} ${height - 10} ${width - 5} ${height / 2} ${width - 20} 10
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
fill="transparent"
|
||||
:stroke="fade(mergedColor[0] || defaultColor[0], 70)"
|
||||
:points="`25 18, 15 ${height / 2} 25 ${height - 18}`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
fill="transparent"
|
||||
:stroke="fade(mergedColor[0] || defaultColor[0], 70)"
|
||||
:points="`${width - 25} 18, ${width - 15} ${height / 2} ${width - 25} ${height - 18}`"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="decoration-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { fade } from '@jiaminghi/color'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration11',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'decoration-11',
|
||||
|
||||
defaultColor: ['#1a98fc', '#2cf7fe'],
|
||||
|
||||
mergedColor: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mergeColor () {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
},
|
||||
fade
|
||||
},
|
||||
mounted () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import './src/main.css'
|
||||
import Decoration12 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration12.name, Decoration12)
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.dv-decoration-12 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.dv-decoration-12 .decoration-content {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
<template>
|
||||
<div class="dv-decoration-12" :ref="ref">
|
||||
<svg :width="width" :height="height">
|
||||
<defs>
|
||||
<g :id="gId">
|
||||
<path
|
||||
:stroke="pathColor[i]"
|
||||
:stroke-width="width / 2"
|
||||
fill="transparent"
|
||||
v-for="(d, i) in pathD"
|
||||
:key="d"
|
||||
:d="d"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<radialGradient
|
||||
:id="gradientId"
|
||||
cx="50%" cy="50%" r="50%"
|
||||
>
|
||||
<stop offset="0%" stop-color="transparent" stop-opacity="1" />
|
||||
<stop offset="100%" :stop-color="fade(mergedColor[1] || defaultColor[1], 30)" stop-opacity="1" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<circle
|
||||
v-for="r in circleR"
|
||||
:key="r"
|
||||
:r="r"
|
||||
:cx="x"
|
||||
:cy="y"
|
||||
:stroke="mergedColor[1]"
|
||||
:stroke-width="0.5"
|
||||
fill="transparent"
|
||||
/>
|
||||
|
||||
<circle
|
||||
r="1"
|
||||
:cx="x"
|
||||
:cy="y"
|
||||
stroke="transparent"
|
||||
:fill="`url(#${gradientId})`"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
:values="`1;${width / 2}`"
|
||||
:dur="`${haloDur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0"
|
||||
:dur="`${haloDur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
r="2"
|
||||
:cx="x"
|
||||
:cy="y"
|
||||
:fill="mergedColor[1]"
|
||||
/>
|
||||
|
||||
<g v-if="showSplitLine">
|
||||
<polyline
|
||||
v-for="p in splitLinePoints"
|
||||
:key="p"
|
||||
:points="p"
|
||||
:stroke="mergedColor[1]"
|
||||
:stroke-width="0.5"
|
||||
opacity="0.5"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<path
|
||||
v-for="d in arcD"
|
||||
:key="d"
|
||||
:d="d"
|
||||
:stroke="mergedColor[1]"
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
/>
|
||||
|
||||
<use :xlink:href="`#${gId}`">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
:values="`0, ${x} ${y};360, ${x} ${y}`"
|
||||
:dur="`${scanDur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
</svg>
|
||||
|
||||
<div class="decoration-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone, getCircleRadianPoint } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { fade } from '@jiaminghi/color'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration12',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
/**
|
||||
* @description Scan animation dur
|
||||
*/
|
||||
scanDur: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
/**
|
||||
* @description Halo animation dur
|
||||
*/
|
||||
haloDur: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'decoration-12',
|
||||
gId: `decoration-12-g-${id}`,
|
||||
gradientId: `decoration-12-gradient-${id}`,
|
||||
|
||||
defaultColor: ['#2783ce', '#2cf7fe'],
|
||||
|
||||
mergedColor: [],
|
||||
|
||||
pathD: [],
|
||||
|
||||
pathColor: [],
|
||||
|
||||
circleR: [],
|
||||
|
||||
splitLinePoints: [],
|
||||
|
||||
arcD: [],
|
||||
|
||||
segment: 30,
|
||||
|
||||
sectorAngle: Math.PI / 3,
|
||||
|
||||
ringNum: 3,
|
||||
|
||||
ringWidth: 1,
|
||||
|
||||
showSplitLine: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
x () {
|
||||
const { width } = this
|
||||
|
||||
return width / 2
|
||||
},
|
||||
y () {
|
||||
const { height } = this
|
||||
|
||||
return height / 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const { mergeColor, calcPathD, calcPathColor, calcCircleR, calcSplitLinePoints, calcArcD } = this
|
||||
|
||||
mergeColor()
|
||||
|
||||
calcPathD()
|
||||
|
||||
calcPathColor()
|
||||
|
||||
calcCircleR()
|
||||
|
||||
calcSplitLinePoints()
|
||||
|
||||
calcArcD()
|
||||
},
|
||||
mergeColor () {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
},
|
||||
calcPathD () {
|
||||
const { x, y, width, segment, sectorAngle } = this
|
||||
|
||||
const startAngle = -Math.PI / 2
|
||||
const angleGap = sectorAngle / segment
|
||||
const r = width / 4
|
||||
let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle)
|
||||
|
||||
this.pathD = new Array(segment)
|
||||
.fill('')
|
||||
.map((_, i) => {
|
||||
const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5))
|
||||
const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`
|
||||
lastEndPoints = endPoints
|
||||
|
||||
return d
|
||||
})
|
||||
},
|
||||
calcPathColor () {
|
||||
const { mergedColor: [color], segment } = this
|
||||
|
||||
const colorGap = 100 / (segment - 1)
|
||||
|
||||
this.pathColor = new Array(segment)
|
||||
.fill(color)
|
||||
.map((_, i) => fade(color, 100 - i * colorGap))
|
||||
},
|
||||
calcCircleR () {
|
||||
const { segment, ringNum, width, ringWidth } = this
|
||||
|
||||
const radiusGap = (width / 2 - ringWidth / 2) / ringNum
|
||||
|
||||
this.circleR = new Array(ringNum)
|
||||
.fill(0)
|
||||
.map((_, i) => radiusGap * (i + 1))
|
||||
},
|
||||
calcSplitLinePoints () {
|
||||
const { x, y, width } = this
|
||||
|
||||
const angleGap = Math.PI / 6
|
||||
const r = width / 2
|
||||
|
||||
this.splitLinePoints = new Array(6)
|
||||
.fill('')
|
||||
.map((_, i) => {
|
||||
const startAngle = angleGap * (i + 1)
|
||||
const endAngle = startAngle + Math.PI
|
||||
const startPoint = getCircleRadianPoint(x, y, r, startAngle)
|
||||
const endPoint = getCircleRadianPoint(x, y, r, endAngle)
|
||||
|
||||
return `${startPoint.join(',')} ${endPoint.join(',')}`
|
||||
})
|
||||
},
|
||||
calcArcD () {
|
||||
const { x, y, width } = this
|
||||
|
||||
const angleGap = Math.PI / 6
|
||||
const r = width / 2 - 1
|
||||
|
||||
this.arcD = new Array(4)
|
||||
.fill('')
|
||||
.map((_, i) => {
|
||||
const startAngle = angleGap * (3 * i + 1)
|
||||
const endAngle = startAngle + angleGap
|
||||
const startPoint = getCircleRadianPoint(x, y, r, startAngle)
|
||||
const endPoint = getCircleRadianPoint(x, y, r, endAngle)
|
||||
|
||||
return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`
|
||||
})
|
||||
},
|
||||
afterAutoResizeMixinInit () {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
},
|
||||
fade
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="dv-decoration-2" :ref="ref">
|
||||
<svg :width="`${width}px`" :height="`${height}px`">
|
||||
<rect :x="x" :y="y" :width="w" :height="h" :fill="mergedColor[0]">
|
||||
<rect :x="x" :y="y" :width="w" :height="h" fill="#3faacb">
|
||||
<animate
|
||||
:attributeName="reverse ? 'height' : 'width'"
|
||||
from="0"
|
||||
:to="reverse ? height : width"
|
||||
:dur="`${dur}s`"
|
||||
dur="6s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines=".42,0,.58,1"
|
||||
|
|
@ -14,12 +14,12 @@
|
|||
/>
|
||||
</rect>
|
||||
|
||||
<rect :x="x" :y="y" width="1" height="1" :fill="mergedColor[1]">
|
||||
<rect :x="x" :y="y" width="1" height="1" fill="#fff">
|
||||
<animate
|
||||
:attributeName="reverse ? 'y' : 'x'"
|
||||
from="0"
|
||||
:to="reverse ? height : width"
|
||||
:dur="`${dur}s`"
|
||||
dur="6s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines="0.42,0,0.58,1"
|
||||
|
|
@ -33,25 +33,13 @@
|
|||
<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: 'DvDecoration2',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dur: {
|
||||
type: Number,
|
||||
default: 6
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -62,19 +50,10 @@ export default {
|
|||
y: 0,
|
||||
|
||||
w: 0,
|
||||
h: 0,
|
||||
|
||||
defaultColor: ['#3faacb', '#fff'],
|
||||
|
||||
mergedColor: []
|
||||
h: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
},
|
||||
reverse () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
|
|
@ -106,17 +85,7 @@ export default {
|
|||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
mergeColor () {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,11 +2,25 @@
|
|||
<div class="dv-decoration-3" :ref="ref">
|
||||
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
|
||||
|
||||
<template v-for="(point, i) in points" :key="i">
|
||||
<rect :fill="mergedColor[0]" :x="point[0] - halfPointSideLength" :y="point[1] - halfPointSideLength"
|
||||
:width="pointSideLength" :height="pointSideLength">
|
||||
<animate v-if="Math.random() > 0.6" attributeName="fill" :values="`${mergedColor.join(';')}`"
|
||||
:dur="Math.random() + 1 + 's'" :begin="Math.random() * 2" repeatCount="indefinite" />
|
||||
<template
|
||||
v-for="(point, i) in points"
|
||||
>
|
||||
<rect
|
||||
:key="i"
|
||||
fill="#7acaec"
|
||||
:x="point[0] - halfPointSideLength"
|
||||
:y="point[1] - halfPointSideLength"
|
||||
:width="pointSideLength"
|
||||
:height="pointSideLength"
|
||||
>
|
||||
<animate
|
||||
v-if="Math.random() > 0.6"
|
||||
attributeName="fill"
|
||||
values="#7acaec;transparent"
|
||||
:dur="Math.random() + 1 + 's'"
|
||||
:begin="Math.random() * 2"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</rect>
|
||||
</template>
|
||||
</svg>
|
||||
|
|
@ -14,101 +28,70 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
export default {
|
||||
name: 'DvDecoration3',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
const pointSideLength = 7
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
return {
|
||||
ref: 'decoration-3',
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration3',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
}
|
||||
svgWH: [300, 35],
|
||||
|
||||
svgScale: [1, 1],
|
||||
|
||||
rowNum: 2,
|
||||
rowPoints: 25,
|
||||
|
||||
pointSideLength,
|
||||
halfPointSideLength: pointSideLength / 2,
|
||||
|
||||
points: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
data() {
|
||||
const pointSideLength = 7
|
||||
calcSVGData () {
|
||||
const { calcPointsPosition, calcScale } = this
|
||||
|
||||
return {
|
||||
ref: 'decoration-3',
|
||||
calcPointsPosition()
|
||||
|
||||
svgWH: [300, 35],
|
||||
|
||||
svgScale: [1, 1],
|
||||
|
||||
rowNum: 2,
|
||||
rowPoints: 25,
|
||||
|
||||
pointSideLength,
|
||||
halfPointSideLength: pointSideLength / 2,
|
||||
|
||||
points: [],
|
||||
|
||||
defaultColor: ['#7acaec', 'transparent'],
|
||||
|
||||
mergedColor: []
|
||||
}
|
||||
calcScale()
|
||||
},
|
||||
watch: {
|
||||
color() {
|
||||
const { mergeColor } = this
|
||||
calcPointsPosition () {
|
||||
const { svgWH, rowNum, rowPoints } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
const [w, h] = svgWH
|
||||
|
||||
const horizontalGap = w / (rowPoints + 1)
|
||||
const verticalGap = h / (rowNum + 1)
|
||||
|
||||
let points = new Array(rowNum).fill(0).map((foo, i) =>
|
||||
new Array(rowPoints).fill(0).map((foo, j) => [
|
||||
horizontalGap * (j + 1), verticalGap * (i + 1)
|
||||
]))
|
||||
|
||||
this.points = points.reduce((all, item) => [...all, ...item], [])
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit() {
|
||||
const { calcSVGData } = this
|
||||
calcScale () {
|
||||
const { width, height, svgWH } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
calcSVGData() {
|
||||
const { calcPointsPosition, calcScale } = this
|
||||
const [w, h] = svgWH
|
||||
|
||||
calcPointsPosition()
|
||||
|
||||
calcScale()
|
||||
},
|
||||
calcPointsPosition() {
|
||||
const { svgWH, rowNum, rowPoints } = this
|
||||
|
||||
const [w, h] = svgWH
|
||||
|
||||
const horizontalGap = w / (rowPoints + 1)
|
||||
const verticalGap = h / (rowNum + 1)
|
||||
|
||||
let points = new Array(rowNum).fill(0).map((foo, i) =>
|
||||
new Array(rowPoints).fill(0).map((foo, j) => [
|
||||
horizontalGap * (j + 1), verticalGap * (i + 1)
|
||||
]))
|
||||
|
||||
this.points = points.reduce((all, item) => [...all, ...item], [])
|
||||
},
|
||||
calcScale() {
|
||||
const { width, height, svgWH } = this
|
||||
|
||||
const [w, h] = svgWH
|
||||
|
||||
this.svgScale = [width / w, height / h]
|
||||
},
|
||||
onResize() {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
mergeColor() {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
}
|
||||
this.svgScale = [width / w, height / h]
|
||||
},
|
||||
mounted() {
|
||||
const { mergeColor } = this
|
||||
onResize () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
mergeColor()
|
||||
calcSVGData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -7,22 +7,20 @@
|
|||
display: flex;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
flex: 1;
|
||||
}
|
||||
.dv-decoration-4 .normal {
|
||||
animation: ani-height ease-in-out infinite;
|
||||
height: 0% !important;
|
||||
animation: ani-height 3s ease-in-out infinite;
|
||||
left: 50%;
|
||||
margin-left: -2px;
|
||||
}
|
||||
.dv-decoration-4 .reverse {
|
||||
animation: ani-width ease-in-out infinite;
|
||||
width: 0% !important;
|
||||
animation: ani-width 3s ease-in-out infinite;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
}
|
||||
@keyframes ani-height {
|
||||
0% {
|
||||
height: 0%;
|
||||
}
|
||||
70% {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -31,9 +29,6 @@
|
|||
}
|
||||
}
|
||||
@keyframes ani-width {
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
70% {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<div class="dv-decoration-4" :ref="ref">
|
||||
<div
|
||||
:class="`container ${reverse ? 'reverse' : 'normal'}`"
|
||||
:style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`"
|
||||
:style="reverse ? `width:${width}px;height:5px` : `width:5px;height:${height}px;`"
|
||||
>
|
||||
<svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
|
||||
<polyline
|
||||
:stroke="mergedColor[0]"
|
||||
stroke="rgba(255, 255, 255, 0.3)"
|
||||
:points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
|
||||
/>
|
||||
<polyline
|
||||
class="bold-line"
|
||||
:stroke="mergedColor[1]"
|
||||
stroke="rgba(255, 255, 255, 0.3)"
|
||||
stroke-width="3"
|
||||
stroke-dasharray="20, 80"
|
||||
stroke-dashoffset="-30"
|
||||
|
|
@ -25,54 +25,14 @@
|
|||
<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: 'DvDecoration4',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dur: {
|
||||
type: Number,
|
||||
default: 3
|
||||
}
|
||||
},
|
||||
props: ['reverse'],
|
||||
data () {
|
||||
return {
|
||||
ref: 'decoration-4',
|
||||
|
||||
defaultColor: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'],
|
||||
|
||||
mergedColor: []
|
||||
ref: 'decoration-4'
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<svg :width="width" :height="height">
|
||||
<polyline
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[0]"
|
||||
stroke="#3f96a5"
|
||||
stroke-width="3"
|
||||
:points="line1Points"
|
||||
>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
attributeType="XML"
|
||||
:from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
|
||||
:to="`0, 0, ${line1Length}, 0`"
|
||||
:dur="`${dur}s`"
|
||||
dur="1.2s"
|
||||
begin="0s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</polyline>
|
||||
<polyline
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[1]"
|
||||
stroke="#3f96a5"
|
||||
stroke-width="2"
|
||||
:points="line2Points"
|
||||
>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
attributeType="XML"
|
||||
:from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
|
||||
:to="`0, 0, ${line2Length}, 0`"
|
||||
:dur="`${dur}s`"
|
||||
dur="1.2s"
|
||||
begin="0s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
|
|
@ -48,23 +48,9 @@ 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',
|
||||
|
|
@ -73,18 +59,7 @@ export default {
|
|||
line2Points: '',
|
||||
|
||||
line1Length: 0,
|
||||
line2Length: 0,
|
||||
|
||||
defaultColor: ['#3f96a5', '#3f96a5'],
|
||||
|
||||
mergedColor: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
line2Length: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -122,17 +97,7 @@ export default {
|
|||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
mergeColor () {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,16 +1,37 @@
|
|||
<template>
|
||||
<div class="dv-decoration-6" :ref="ref">
|
||||
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
|
||||
<template v-for="(point, i) in points" :key="i">
|
||||
<rect :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]" :x="point[0] - halfRectWidth"
|
||||
:y="point[1] - heights[i] / 2" :width="rectWidth" :height="heights[i]">
|
||||
<animate attributeName="y"
|
||||
<template
|
||||
v-for="(point, i) in points"
|
||||
>
|
||||
<rect
|
||||
:key="i"
|
||||
fill="#7acaec"
|
||||
:x="point[0] - halfRectWidth"
|
||||
:y="point[1] - heights[i] / 2"
|
||||
:width="rectWidth"
|
||||
:height="heights[i]"
|
||||
>
|
||||
<animate
|
||||
attributeName="y"
|
||||
:values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
|
||||
:dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
|
||||
begin="0s" repeatCount="indefinite" />
|
||||
<animate attributeName="height" :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
|
||||
:dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
|
||||
begin="0s" repeatCount="indefinite" />
|
||||
:dur="`${randoms[i]}s`"
|
||||
keyTimes="0;0.5;1"
|
||||
calcMode="spline"
|
||||
keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="height"
|
||||
:values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
|
||||
:dur="`${randoms[i]}s`"
|
||||
keyTimes="0;0.5;1"
|
||||
calcMode="spline"
|
||||
keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</rect>
|
||||
</template>
|
||||
</svg>
|
||||
|
|
@ -18,115 +39,84 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
import { randomExtend } from '../../../util'
|
||||
import { randomExtend } from '../../../util'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
export default {
|
||||
name: 'DvDecoration6',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
const rectWidth = 7
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
return {
|
||||
ref: 'decoration-6',
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration6',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
}
|
||||
svgWH: [300, 35],
|
||||
|
||||
svgScale: [1, 1],
|
||||
|
||||
rowNum: 1,
|
||||
rowPoints: 40,
|
||||
|
||||
rectWidth,
|
||||
halfRectWidth: rectWidth / 2,
|
||||
|
||||
points: [],
|
||||
heights: [],
|
||||
minHeights: [],
|
||||
randoms: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
data() {
|
||||
const rectWidth = 7
|
||||
calcSVGData () {
|
||||
const { calcPointsPosition, calcScale } = this
|
||||
|
||||
return {
|
||||
ref: 'decoration-6',
|
||||
calcPointsPosition()
|
||||
|
||||
svgWH: [300, 35],
|
||||
|
||||
svgScale: [1, 1],
|
||||
|
||||
rowNum: 1,
|
||||
rowPoints: 40,
|
||||
|
||||
rectWidth,
|
||||
halfRectWidth: rectWidth / 2,
|
||||
|
||||
points: [],
|
||||
heights: [],
|
||||
minHeights: [],
|
||||
randoms: [],
|
||||
|
||||
defaultColor: ['#7acaec', '#7acaec'],
|
||||
|
||||
mergedColor: []
|
||||
}
|
||||
calcScale()
|
||||
},
|
||||
watch: {
|
||||
color() {
|
||||
const { mergeColor } = this
|
||||
calcPointsPosition () {
|
||||
const { svgWH, rowNum, rowPoints } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
const [w, h] = svgWH
|
||||
|
||||
const horizontalGap = w / (rowPoints + 1)
|
||||
const verticalGap = h / (rowNum + 1)
|
||||
|
||||
let points = new Array(rowNum).fill(0).map((foo, i) =>
|
||||
new Array(rowPoints).fill(0).map((foo, j) => [
|
||||
horizontalGap * (j + 1), verticalGap * (i + 1)
|
||||
]))
|
||||
|
||||
this.points = points.reduce((all, item) => [...all, ...item], [])
|
||||
const heights = this.heights = new Array(rowNum * rowPoints)
|
||||
.fill(0).map(foo =>
|
||||
Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))
|
||||
|
||||
this.minHeights = new Array(rowNum * rowPoints)
|
||||
.fill(0).map((foo, i) => heights[i] * Math.random())
|
||||
|
||||
this.randoms = new Array(rowNum * rowPoints)
|
||||
.fill(0).map(foo => Math.random() + 1.5)
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit() {
|
||||
const { calcSVGData } = this
|
||||
calcScale () {
|
||||
const { width, height, svgWH } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
calcSVGData() {
|
||||
const { calcPointsPosition, calcScale } = this
|
||||
const [w, h] = svgWH
|
||||
|
||||
calcPointsPosition()
|
||||
|
||||
calcScale()
|
||||
},
|
||||
calcPointsPosition() {
|
||||
const { svgWH, rowNum, rowPoints } = this
|
||||
|
||||
const [w, h] = svgWH
|
||||
|
||||
const horizontalGap = w / (rowPoints + 1)
|
||||
const verticalGap = h / (rowNum + 1)
|
||||
|
||||
let points = new Array(rowNum).fill(0).map((foo, i) =>
|
||||
new Array(rowPoints).fill(0).map((foo, j) => [
|
||||
horizontalGap * (j + 1), verticalGap * (i + 1)
|
||||
]))
|
||||
|
||||
this.points = points.reduce((all, item) => [...all, ...item], [])
|
||||
const heights = this.heights = new Array(rowNum * rowPoints)
|
||||
.fill(0).map(foo =>
|
||||
Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))
|
||||
|
||||
this.minHeights = new Array(rowNum * rowPoints)
|
||||
.fill(0).map((foo, i) => heights[i] * Math.random())
|
||||
|
||||
this.randoms = new Array(rowNum * rowPoints)
|
||||
.fill(0).map(foo => Math.random() + 1.5)
|
||||
},
|
||||
calcScale() {
|
||||
const { width, height, svgWH } = this
|
||||
|
||||
const [w, h] = svgWH
|
||||
|
||||
this.svgScale = [width / w, height / h]
|
||||
},
|
||||
onResize() {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
mergeColor() {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
}
|
||||
this.svgScale = [width / w, height / h]
|
||||
},
|
||||
mounted() {
|
||||
const { mergeColor } = this
|
||||
onResize () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
mergeColor()
|
||||
calcSVGData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,13 +4,13 @@
|
|||
<polyline
|
||||
stroke-width="4"
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[0]"
|
||||
stroke="#1dc1f5"
|
||||
points="10, 0 19, 10 10, 20"
|
||||
/>
|
||||
<polyline
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[1]"
|
||||
stroke="#1dc1f5"
|
||||
points="2, 0 11, 10 2, 20"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -19,13 +19,13 @@
|
|||
<polyline
|
||||
stroke-width="4"
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[0]"
|
||||
stroke="#1dc1f5"
|
||||
points="11, 0 2, 10 11, 20"
|
||||
/>
|
||||
<polyline
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[1]"
|
||||
stroke="#1dc1f5"
|
||||
points="19, 0 10, 10 19, 20"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -33,43 +33,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration7',
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
defaultColor: ['#1dc1f5', '#1dc1f5'],
|
||||
|
||||
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()
|
||||
}
|
||||
name: 'DvDecoration7'
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,21 +2,21 @@
|
|||
<div class="dv-decoration-8" :ref="ref">
|
||||
<svg :width="width" :height="height">
|
||||
<polyline
|
||||
:stroke="mergedColor[0]"
|
||||
stroke="#3f96a5"
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
:points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
:stroke="mergedColor[0]"
|
||||
stroke="#3f96a5"
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
:points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
:stroke="mergedColor[1]"
|
||||
stroke="#3f96a5"
|
||||
fill="transparent"
|
||||
stroke-width="3"
|
||||
:points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
|
||||
|
|
@ -28,18 +28,10 @@
|
|||
<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: 'DvDecoration8',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
@ -47,18 +39,7 @@ export default {
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'decoration-8',
|
||||
|
||||
defaultColor: ['#3f96a5', '#3f96a5'],
|
||||
|
||||
mergedColor: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
ref: 'decoration-8'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -68,17 +49,7 @@ 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()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
cy="50"
|
||||
r="45"
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[1]"
|
||||
stroke="rgba(3, 166, 224, 0.5)"
|
||||
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="`${dur}s`"
|
||||
dur="3s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
cy="50"
|
||||
r="45"
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[0]"
|
||||
stroke="rgba(3, 166, 224, 0.8)"
|
||||
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="`${dur}s`"
|
||||
dur="3s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
cy="50"
|
||||
r="38"
|
||||
fill="transparent"
|
||||
:stroke="fade(mergedColor[1] || defaultColor[1], 30)"
|
||||
stroke="rgba(3, 166, 224, 0.2)"
|
||||
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="mergedColor[1]"
|
||||
:fill="Math.random() > 0.4 ? 'transparent' : mergedColor[0]"
|
||||
stroke="rgba(3, 166, 224, 0.6)"
|
||||
:fill="Math.random() > 0.4 ? 'transparent' : 'rgba(3, 166, 224, 0.8)'"
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
values="0 50 50;360 50 50"
|
||||
:dur="`${dur}s`"
|
||||
:begin="`${i * dur / 20}s`"
|
||||
dur="3s"
|
||||
:begin="`${i * 0.15}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
cy="50"
|
||||
r="26"
|
||||
fill="transparent"
|
||||
:stroke="fade(mergedColor[1] || defaultColor[1], 30)"
|
||||
stroke="rgba(3, 166, 224, 0.2)"
|
||||
stroke-width="1"
|
||||
stroke-dasharray="5, 1"
|
||||
/>
|
||||
|
|
@ -85,48 +85,20 @@
|
|||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { fade } from '@jiaminghi/color'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration9',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
dur: {
|
||||
type: Number,
|
||||
default: 3
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'decoration-9',
|
||||
|
||||
polygonId: `decoration-9-polygon-${id}`,
|
||||
polygonId: `decoration-9-polygon-${timestamp}`,
|
||||
|
||||
svgWH: [100, 100],
|
||||
|
||||
svgScale: [1, 1],
|
||||
|
||||
defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],
|
||||
|
||||
mergedColor: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
svgScale: [1, 1]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -146,18 +118,7 @@ export default {
|
|||
const { calcScale } = this
|
||||
|
||||
calcScale()
|
||||
},
|
||||
mergeColor () {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
},
|
||||
fade
|
||||
},
|
||||
mounted () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -53,12 +53,6 @@ export default {
|
|||
* @example textAlign = 'center' | 'left' | 'right'
|
||||
*/
|
||||
textAlign: 'center',
|
||||
/**
|
||||
* @description rowGap
|
||||
* @type {Number}
|
||||
@default rowGap = 0
|
||||
*/
|
||||
rowGap: 0,
|
||||
/**
|
||||
* @description Text style configuration
|
||||
* @type {Object} {CRender Class Style}
|
||||
|
|
@ -67,11 +61,6 @@ export default {
|
|||
fontSize: 30,
|
||||
fill: '#3de7c9'
|
||||
},
|
||||
/**
|
||||
* @description Number formatter
|
||||
* @type {Null|Function}
|
||||
*/
|
||||
formatter: undefined,
|
||||
/**
|
||||
* @description CRender animationCurve
|
||||
* @type {String}
|
||||
|
|
@ -135,7 +124,7 @@ export default {
|
|||
})
|
||||
},
|
||||
getShape () {
|
||||
const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig
|
||||
const { number, content, toFixed, textAlign } = this.mergedConfig
|
||||
|
||||
const [w, h] = this.renderer.area
|
||||
|
||||
|
|
@ -148,9 +137,7 @@ export default {
|
|||
number,
|
||||
content,
|
||||
toFixed,
|
||||
position,
|
||||
rowGap,
|
||||
formatter
|
||||
position
|
||||
}
|
||||
},
|
||||
getStyle () {
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { randomExtend, getPointDistance, uuid } from '../../../util/index'
|
||||
import { randomExtend, getPointDistance } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
|
|
@ -171,14 +171,14 @@ export default {
|
|||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'dv-flyline-chart',
|
||||
unique: Math.random(),
|
||||
maskId: `flyline-mask-id-${id}`,
|
||||
maskCircleId: `mask-circle-id-${id}`,
|
||||
gradientId: `gradient-id-${id}`,
|
||||
gradient2Id: `gradient2-id-${id}`,
|
||||
maskId: `flyline-mask-id-${timestamp}`,
|
||||
maskCircleId: `mask-circle-id-${timestamp}`,
|
||||
gradientId: `gradient-id-${timestamp}`,
|
||||
gradient2Id: `gradient2-id-${timestamp}`,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
import './src/main.css'
|
||||
import FlylineChartEnhanced from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(FlylineChartEnhanced.name, FlylineChartEnhanced)
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.dv-flyline-chart-enhanced {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dv-flyline-chart-enhanced text {
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
|
|
@ -1,566 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
class="dv-flyline-chart-enhanced"
|
||||
:style="`background-image: url(${mergedConfig ? mergedConfig.bgImgSrc : ''})`"
|
||||
:ref="ref"
|
||||
@click="consoleClickPos"
|
||||
>
|
||||
<svg v-if="flylines.length" :width="width" :height="height">
|
||||
<defs>
|
||||
<radialGradient
|
||||
:id="flylineGradientId"
|
||||
cx="50%" cy="50%" r="50%"
|
||||
>
|
||||
<stop
|
||||
offset="0%" stop-color="#fff"
|
||||
stop-opacity="1"
|
||||
/>
|
||||
<stop
|
||||
offset="100%" stop-color="#fff"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient
|
||||
:id="haloGradientId"
|
||||
cx="50%" cy="50%" r="50%"
|
||||
>
|
||||
<stop
|
||||
offset="0%" stop-color="#fff"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
<stop
|
||||
offset="100%" stop-color="#fff"
|
||||
stop-opacity="1"
|
||||
/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<!-- points -->
|
||||
<g v-for="point in flylinePoints" :key="point.key + Math.random()">
|
||||
<defs>
|
||||
<circle
|
||||
v-if="point.halo.show"
|
||||
:id="`halo${unique}${point.key}`"
|
||||
:cx="point.coordinate[0]"
|
||||
:cy="point.coordinate[1]"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
:values="`1;${point.halo.radius}`"
|
||||
:dur="`${point.halo.time}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0"
|
||||
:dur="`${point.halo.time}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</defs>
|
||||
|
||||
<!-- halo gradient mask -->
|
||||
<mask :id="`mask${unique}${point.key}`">
|
||||
<use
|
||||
v-if="point.halo.show"
|
||||
:xlink:href="`#halo${unique}${point.key}`"
|
||||
:fill="`url(#${haloGradientId})`"
|
||||
/>
|
||||
</mask>
|
||||
|
||||
<!-- point halo -->
|
||||
<use
|
||||
v-if="point.halo.show"
|
||||
:xlink:href="`#halo${unique}${point.key}`"
|
||||
:fill="point.halo.color"
|
||||
:mask="`url(#mask${unique}${point.key})`"
|
||||
/>
|
||||
|
||||
<!-- point icon -->
|
||||
<image
|
||||
v-if="point.icon.show"
|
||||
:xlink:href="point.icon.src"
|
||||
:width="point.icon.width"
|
||||
:height="point.icon.height"
|
||||
:x="point.icon.x"
|
||||
:y="point.icon.y"
|
||||
/>
|
||||
|
||||
<!-- point text -->
|
||||
<text
|
||||
v-if="point.text.show"
|
||||
:style="`fontSize:${point.text.fontSize}px;color:${point.text.color}`"
|
||||
:fill="point.text.color"
|
||||
:x="point.text.x"
|
||||
:y="point.text.y"
|
||||
>
|
||||
{{ point.name }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- flylines -->
|
||||
<g v-for="(line, i) in flylines" :key="line.key + Math.random()">
|
||||
<defs>
|
||||
<path
|
||||
:id="line.key"
|
||||
:ref="line.key"
|
||||
:d="line.d"
|
||||
fill="transparent"
|
||||
/>
|
||||
</defs>
|
||||
|
||||
<!-- orbit line -->
|
||||
<use
|
||||
:xlink:href="`#${line.key}`"
|
||||
:stroke-width="line.width"
|
||||
:stroke="line.orbitColor"
|
||||
/>
|
||||
|
||||
<!-- fly line gradient mask -->
|
||||
<mask :id="`mask${unique}${line.key}`">
|
||||
<circle cx="0" cy="0" :r="line.radius" :fill="`url(#${flylineGradientId})`">
|
||||
<animateMotion
|
||||
:dur="line.time"
|
||||
:path="line.d"
|
||||
rotate="auto"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</mask>
|
||||
|
||||
<!-- fly line -->
|
||||
<use
|
||||
v-if="flylineLengths[i]"
|
||||
:xlink:href="`#${line.key}`"
|
||||
:stroke-width="line.width"
|
||||
:stroke="line.color"
|
||||
:mask="`url(#mask${unique}${line.key})`"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:from="`0, ${flylineLengths[i]}`"
|
||||
:to="`${flylineLengths[i]}, 0`"
|
||||
:dur="line.time"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { randomExtend, getPointDistance, uuid } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvFlylineChartEnhanced',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
dev: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'dv-flyline-chart-enhanced',
|
||||
unique: Math.random(),
|
||||
flylineGradientId: `flyline-gradient-id-${id}`,
|
||||
haloGradientId: `halo-gradient-id-${id}`,
|
||||
/**
|
||||
* @description Type Declaration
|
||||
*
|
||||
* interface Halo {
|
||||
* show?: boolean
|
||||
* duration?: [number, number]
|
||||
* color?: string
|
||||
* radius?: number
|
||||
* }
|
||||
*
|
||||
* interface Text {
|
||||
* show?: boolean
|
||||
* offset?: [number, number]
|
||||
* color?: string
|
||||
* fontSize?: number
|
||||
* }
|
||||
*
|
||||
* interface Icon {
|
||||
* show?: boolean
|
||||
* src?: string
|
||||
* width?: number
|
||||
* height?: number
|
||||
* }
|
||||
*
|
||||
* interface Point {
|
||||
* name: string
|
||||
* coordinate: [number, number]
|
||||
* halo?: Halo
|
||||
* text?: Text
|
||||
* icon?: Icon
|
||||
* }
|
||||
*
|
||||
* interface Line {
|
||||
* width?: number
|
||||
* color?: string
|
||||
* orbitColor?: string
|
||||
* duration?: [number, number]
|
||||
* radius?: string
|
||||
* }
|
||||
*
|
||||
* interface Flyline extends Line {
|
||||
* source: string
|
||||
* target: string
|
||||
* }
|
||||
*
|
||||
* interface FlylineWithPath extends Flyline {
|
||||
* d: string
|
||||
* path: [[number, number], [number, number], [number, number]]
|
||||
* key: string
|
||||
* }
|
||||
*/
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Flyline chart points
|
||||
* @type {Point[]}
|
||||
* @default points = []
|
||||
*/
|
||||
points: [],
|
||||
/**
|
||||
* @description Lines
|
||||
* @type {Flyline[]}
|
||||
* @default lines = []
|
||||
*/
|
||||
lines: [],
|
||||
/**
|
||||
* @description Global halo configuration
|
||||
* @type {Halo}
|
||||
*/
|
||||
halo: {
|
||||
/**
|
||||
* @description Whether to show halo
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
/**
|
||||
* @description Halo animation duration (1s = 10)
|
||||
* @type {[number, number]}
|
||||
*/
|
||||
duration: [20, 30],
|
||||
/**
|
||||
* @description Halo color
|
||||
* @type {String}
|
||||
* @default color = '#fb7293'
|
||||
*/
|
||||
color: '#fb7293',
|
||||
/**
|
||||
* @description Halo radius
|
||||
* @type {Number}
|
||||
* @default radius = 120
|
||||
*/
|
||||
radius: 120
|
||||
},
|
||||
/**
|
||||
* @description Global text configuration
|
||||
* @type {Text}
|
||||
*/
|
||||
text: {
|
||||
/**
|
||||
* @description Whether to show text
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
/**
|
||||
* @description Text offset
|
||||
* @type {[number, number]}
|
||||
* @default offset = [0, 15]
|
||||
*/
|
||||
offset: [0, 15],
|
||||
/**
|
||||
* @description Text color
|
||||
* @type {String}
|
||||
* @default color = '#ffdb5c'
|
||||
*/
|
||||
color: '#ffdb5c',
|
||||
/**
|
||||
* @description Text font size
|
||||
* @type {Number}
|
||||
* @default fontSize = 12
|
||||
*/
|
||||
fontSize: 12
|
||||
},
|
||||
/**
|
||||
* @description Global icon configuration
|
||||
* @type {Icon}
|
||||
*/
|
||||
icon: {
|
||||
/**
|
||||
* @description Whether to show icon
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
/**
|
||||
* @description Icon src
|
||||
* @type {String}
|
||||
* @default src = ''
|
||||
*/
|
||||
src: '',
|
||||
/**
|
||||
* @description Icon width
|
||||
* @type {Number}
|
||||
* @default width = 15
|
||||
*/
|
||||
width: 15,
|
||||
/**
|
||||
* @description Icon height
|
||||
* @type {Number}
|
||||
* @default width = 15
|
||||
*/
|
||||
height: 15
|
||||
},
|
||||
/**
|
||||
* @description Global line configuration
|
||||
* @type {Line}
|
||||
*/
|
||||
line: {
|
||||
/**
|
||||
* @description Line width
|
||||
* @type {Number}
|
||||
* @default width = 1
|
||||
*/
|
||||
width: 1,
|
||||
/**
|
||||
* @description Flyline color
|
||||
* @type {String}
|
||||
* @default color = '#ffde93'
|
||||
*/
|
||||
color: '#ffde93',
|
||||
/**
|
||||
* @description Orbit color
|
||||
* @type {String}
|
||||
* @default orbitColor = 'rgba(103, 224, 227, .2)'
|
||||
*/
|
||||
orbitColor: 'rgba(103, 224, 227, .2)',
|
||||
/**
|
||||
* @description Flyline animation duration
|
||||
* @type {[number, number]}
|
||||
* @default duration = [20, 30]
|
||||
*/
|
||||
duration: [20, 30],
|
||||
/**
|
||||
* @description Flyline radius
|
||||
* @type {Number}
|
||||
* @default radius = 100
|
||||
*/
|
||||
radius: 100
|
||||
},
|
||||
/**
|
||||
* @description Back ground image url
|
||||
* @type {String}
|
||||
* @default bgImgSrc = ''
|
||||
*/
|
||||
bgImgSrc: '',
|
||||
/**
|
||||
* @description K value
|
||||
* @type {Number}
|
||||
* @default k = -0.5
|
||||
* @example k = -1 ~ 1
|
||||
*/
|
||||
k: -0.5,
|
||||
/**
|
||||
* @description Flyline curvature
|
||||
* @type {Number}
|
||||
* @default curvature = 5
|
||||
*/
|
||||
curvature: 5,
|
||||
/**
|
||||
* @description Relative points position
|
||||
* @type {Boolean}
|
||||
* @default relative = true
|
||||
*/
|
||||
relative: true
|
||||
},
|
||||
/**
|
||||
* @description Fly line data
|
||||
* @type {FlylineWithPath[]}
|
||||
* @default flylines = []
|
||||
*/
|
||||
flylines: [],
|
||||
/**
|
||||
* @description Fly line lengths
|
||||
* @type {Number[]}
|
||||
* @default flylineLengths = []
|
||||
*/
|
||||
flylineLengths: [],
|
||||
/**
|
||||
* @description Fly line points
|
||||
* @default flylinePoints = []
|
||||
*/
|
||||
flylinePoints: [],
|
||||
|
||||
mergedConfig: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
onResize () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
async calcData () {
|
||||
const { mergeConfig, calcflylinePoints, calcLinePaths } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
calcflylinePoints()
|
||||
|
||||
calcLinePaths()
|
||||
|
||||
const { calcLineLengths } = this
|
||||
|
||||
await calcLineLengths()
|
||||
},
|
||||
mergeConfig () {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
|
||||
const { points, lines, halo, text, icon, line } = mergedConfig
|
||||
|
||||
mergedConfig.points = points.map(item => {
|
||||
item.halo = deepMerge(deepClone(halo, true), item.halo || {})
|
||||
item.text = deepMerge(deepClone(text, true), item.text || {})
|
||||
item.icon = deepMerge(deepClone(icon, true), item.icon || {})
|
||||
|
||||
return item
|
||||
})
|
||||
|
||||
mergedConfig.lines = lines.map(item => {
|
||||
return deepMerge(deepClone(line, true), item)
|
||||
})
|
||||
|
||||
this.mergedConfig = mergedConfig
|
||||
},
|
||||
calcflylinePoints () {
|
||||
const { mergedConfig, width, height } = this
|
||||
|
||||
const { relative, points } = mergedConfig
|
||||
|
||||
this.flylinePoints = points.map((item, i) => {
|
||||
const { coordinate: [x, y], halo, icon, text } = item
|
||||
|
||||
if (relative) item.coordinate = [x * width, y * height]
|
||||
|
||||
item.halo.time = randomExtend(...halo.duration) / 10
|
||||
|
||||
const { width: iw, height: ih } = icon
|
||||
item.icon.x = item.coordinate[0] - iw / 2
|
||||
item.icon.y = item.coordinate[1] - ih / 2
|
||||
|
||||
const [ox, oy] = text.offset
|
||||
item.text.x = item.coordinate[0] + ox
|
||||
item.text.y = item.coordinate[1] + oy
|
||||
|
||||
item.key = `${item.coordinate.toString()}${i}`
|
||||
|
||||
return item
|
||||
})
|
||||
},
|
||||
calcLinePaths () {
|
||||
const { getPath, mergedConfig } = this
|
||||
|
||||
const { points, lines } = mergedConfig
|
||||
|
||||
this.flylines = lines.map(item => {
|
||||
const { source, target, duration } = item
|
||||
|
||||
const sourcePoint = points.find(({ name }) => name === source).coordinate
|
||||
const targetPoint = points.find(({ name }) => name === target).coordinate
|
||||
|
||||
const path = getPath(sourcePoint, targetPoint).map(item => item.map(v => parseFloat(v.toFixed(10))))
|
||||
const d = `M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`
|
||||
const key = `path${path.toString()}`
|
||||
const time = randomExtend(...duration) / 10
|
||||
|
||||
return { ...item, path, key, d, time }
|
||||
})
|
||||
},
|
||||
getPath (start, end) {
|
||||
const { getControlPoint } = this
|
||||
|
||||
const controlPoint = getControlPoint(start, end)
|
||||
|
||||
return [start, controlPoint, end]
|
||||
},
|
||||
getControlPoint ([sx, sy], [ex, ey]) {
|
||||
const { getKLinePointByx, mergedConfig } = this
|
||||
|
||||
const { curvature, k } = mergedConfig
|
||||
|
||||
const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2]
|
||||
|
||||
const distance = getPointDistance([sx, sy], [ex, ey])
|
||||
|
||||
const targetLength = distance / curvature
|
||||
const disDived = targetLength / 2
|
||||
|
||||
let [dx, dy] = [mx, my]
|
||||
|
||||
do {
|
||||
dx += disDived
|
||||
dy = getKLinePointByx(k, [mx, my], dx)[1]
|
||||
} while (getPointDistance([mx, my], [dx, dy]) < targetLength)
|
||||
|
||||
return [dx, dy]
|
||||
},
|
||||
getKLinePointByx (k, [lx, ly], x) {
|
||||
const y = ly - k * lx + k * x
|
||||
|
||||
return [x, y]
|
||||
},
|
||||
async calcLineLengths () {
|
||||
const { $nextTick, flylines, $refs } = this
|
||||
|
||||
await $nextTick()
|
||||
|
||||
this.flylineLengths = flylines.map(({ key }) => $refs[key][0].getTotalLength())
|
||||
},
|
||||
consoleClickPos ({ offsetX, offsetY }) {
|
||||
const { width, height, dev } = this
|
||||
|
||||
if (!dev) return
|
||||
|
||||
const relativeX = (offsetX / width).toFixed(2)
|
||||
const relativeY = (offsetY / height).toFixed(2)
|
||||
|
||||
console.warn(`dv-flyline-chart-enhanced DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -44,8 +44,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
|
@ -59,10 +57,10 @@ export default {
|
|||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
gradientId1: `percent-pond-gradientId1-${id}`,
|
||||
gradientId2: `percent-pond-gradientId2-${id}`,
|
||||
gradientId1: `percent-pond-gradientId1-${timestamp}`,
|
||||
gradientId2: `percent-pond-gradientId2-${timestamp}`,
|
||||
|
||||
width: 0,
|
||||
height: 0,
|
||||
|
|
@ -236,10 +234,10 @@ export default {
|
|||
|
||||
await $nextTick()
|
||||
|
||||
const { clientWidth, clientHeight } = $refs['percent-pond']
|
||||
const dom = $refs['percent-pond']
|
||||
|
||||
this.width = clientWidth
|
||||
this.height = clientHeight
|
||||
this.width = dom.clientWidth
|
||||
this.height = dom.clientHeight
|
||||
},
|
||||
mergeConfig () {
|
||||
const { config, defaultConfig } = this
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div
|
||||
class="header-item"
|
||||
v-for="(headerItem, i) in header"
|
||||
:key="`${headerItem}${i}`"
|
||||
:key="headerItem + i"
|
||||
:style="`
|
||||
height: ${mergedConfig.headerHeight}px;
|
||||
line-height: ${mergedConfig.headerHeight}px;
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<div
|
||||
class="row-item"
|
||||
v-for="(row, ri) in rows"
|
||||
:key="`${row.toString()}${row.scroll}`"
|
||||
:key="row.toString() + row.scroll"
|
||||
:style="`
|
||||
height: ${heights[ri]}px;
|
||||
line-height: ${heights[ri]}px;
|
||||
|
|
@ -33,13 +33,11 @@
|
|||
<div
|
||||
class="ceil"
|
||||
v-for="(ceil, ci) in row.ceils"
|
||||
:key="`${ceil}${ri}${ci}`"
|
||||
:key="ceil + ri + ci"
|
||||
:style="`width: ${widths[ci]}px;`"
|
||||
:align="aligns[ci]"
|
||||
v-html="ceil"
|
||||
@click="emitEvent('click', ri, ci, row, ceil)"
|
||||
@mouseenter="handleHover(true, ri, ci, row, ceil)"
|
||||
@mouseleave="handleHover(false)"
|
||||
@click="emitEvent(ri, ci, row, ceil)"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
|
@ -136,26 +134,13 @@ export default {
|
|||
* @default index = false
|
||||
*/
|
||||
index: false,
|
||||
/**
|
||||
* @description index Header
|
||||
* @type {String}
|
||||
* @default indexHeader = '#'
|
||||
*/
|
||||
indexHeader: '#',
|
||||
/**
|
||||
* @description Carousel type
|
||||
* @type {String}
|
||||
* @default carousel = 'single'
|
||||
* @example carousel = 'single' | 'page'
|
||||
*/
|
||||
carousel: 'single',
|
||||
/**
|
||||
* @description Pause scroll when mouse hovered
|
||||
* @type {Boolean}
|
||||
* @default hoverPause = true
|
||||
* @example hoverPause = true | false
|
||||
*/
|
||||
hoverPause: true
|
||||
carousel: 'single'
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
|
@ -178,9 +163,7 @@ export default {
|
|||
|
||||
animationHandler: '',
|
||||
|
||||
updater: 0,
|
||||
|
||||
needCalc: false
|
||||
updater: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -189,24 +172,10 @@ export default {
|
|||
|
||||
stopAnimation()
|
||||
|
||||
this.animationIndex = 0
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleHover(enter, ri, ci, row, ceil){
|
||||
const { mergedConfig, emitEvent, stopAnimation, animation } = this
|
||||
|
||||
if (enter) emitEvent('mouseover', ri, ci, row, ceil)
|
||||
if (!mergedConfig.hoverPause) return
|
||||
|
||||
if (enter) {
|
||||
stopAnimation()
|
||||
} else {
|
||||
animation(true)
|
||||
}
|
||||
},
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcData } = this
|
||||
|
||||
|
|
@ -248,7 +217,7 @@ export default {
|
|||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
},
|
||||
calcHeaderData () {
|
||||
let { header, index, indexHeader} = this.mergedConfig
|
||||
let { header, index } = this.mergedConfig
|
||||
|
||||
if (!header.length) {
|
||||
this.header = []
|
||||
|
|
@ -258,7 +227,7 @@ export default {
|
|||
|
||||
header = [...header]
|
||||
|
||||
if (index) header.unshift(indexHeader)
|
||||
if (index) header.unshift('#')
|
||||
|
||||
this.header = header
|
||||
},
|
||||
|
|
@ -337,14 +306,6 @@ export default {
|
|||
this.aligns = deepMerge(aligns, align)
|
||||
},
|
||||
async animation (start = false) {
|
||||
const { needCalc, calcHeights, calcRowsData } = this
|
||||
|
||||
if (needCalc) {
|
||||
calcRowsData()
|
||||
calcHeights()
|
||||
this.needCalc = false
|
||||
}
|
||||
|
||||
let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
|
||||
|
||||
const { waitTime, carousel, rowNum } = mergedConfig
|
||||
|
|
@ -363,7 +324,7 @@ export default {
|
|||
let rows = rowsData.slice(animationIndex)
|
||||
rows.push(...rowsData.slice(0, animationIndex))
|
||||
|
||||
this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
|
||||
this.rows = rows
|
||||
this.heights = new Array(rowLength).fill(avgHeight)
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
|
|
@ -388,28 +349,15 @@ export default {
|
|||
|
||||
clearTimeout(animationHandler)
|
||||
},
|
||||
emitEvent (type, ri, ci, row, ceil) {
|
||||
emitEvent (ri, ci, row, ceil) {
|
||||
const { ceils, rowIndex } = row
|
||||
|
||||
this.$emit(type, {
|
||||
this.$emit('click', {
|
||||
row: ceils,
|
||||
ceil,
|
||||
rowIndex,
|
||||
columnIndex: ci
|
||||
})
|
||||
},
|
||||
updateRows(rows, animationIndex) {
|
||||
const { mergedConfig, animationHandler, animation } = this
|
||||
|
||||
this.mergedConfig = {
|
||||
...mergedConfig,
|
||||
data: [...rows]
|
||||
}
|
||||
|
||||
this.needCalc = true
|
||||
|
||||
if (typeof animationIndex === 'number') this.animationIndex = animationIndex
|
||||
if (!animationHandler) animation(true)
|
||||
}
|
||||
},
|
||||
destroyed () {
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
>
|
||||
<div class="ranking-info">
|
||||
<div class="rank">No.{{ item.ranking }}</div>
|
||||
<div class="info-name" v-html="item.name" />
|
||||
<div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
|
||||
<div class="info-name">{{ item.name }}</div>
|
||||
<div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
|
||||
</div>
|
||||
|
||||
<div class="ranking-column">
|
||||
|
|
@ -76,19 +76,7 @@ export default {
|
|||
* @default unit = ''
|
||||
* @example unit = 'ton'
|
||||
*/
|
||||
unit: '',
|
||||
/**
|
||||
* @description Auto sort by value
|
||||
* @type {Boolean}
|
||||
* @default sort = true
|
||||
*/
|
||||
sort: true,
|
||||
/**
|
||||
* @description Value formatter
|
||||
* @type {Function}
|
||||
* @default valueFormatter = null
|
||||
*/
|
||||
valueFormatter: null
|
||||
unit: ''
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
|
@ -149,29 +137,19 @@ export default {
|
|||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
},
|
||||
calcRowsData () {
|
||||
let { data, rowNum, sort } = this.mergedConfig
|
||||
let { data, rowNum } = this.mergedConfig
|
||||
|
||||
sort && data.sort(({ value: a }, { value: b }) => {
|
||||
data.sort(({ value: a }, { value: b }) => {
|
||||
if (a > b) return -1
|
||||
if (a < b) return 1
|
||||
if (a === b) return 0
|
||||
})
|
||||
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
const min = Math.min(...value) || 0
|
||||
|
||||
// abs of min
|
||||
const minAbs = Math.abs(min)
|
||||
|
||||
const max = Math.max(...value) || 0
|
||||
|
||||
// abs of max
|
||||
const maxAbs = Math.abs(max)
|
||||
|
||||
const total = max + minAbs
|
||||
|
||||
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))
|
||||
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
|
||||
|
||||
const rowLength = data.length
|
||||
|
||||
|
|
@ -214,7 +192,7 @@ export default {
|
|||
let rows = rowsData.slice(animationIndex)
|
||||
rows.push(...rowsData.slice(0, animationIndex))
|
||||
|
||||
this.rows = rows.slice(0, rowNum + 1)
|
||||
this.rows = rows
|
||||
this.heights = new Array(rowLength).fill(avgHeight)
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
|
|
@ -238,7 +216,7 @@ export default {
|
|||
if (!animationHandler) return
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
},
|
||||
}
|
||||
},
|
||||
destroyed () {
|
||||
const { stopAnimation } = this
|
||||
|
|
|
|||
|
|
@ -40,8 +40,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
|
@ -55,9 +53,9 @@ export default {
|
|||
default: () => ({})
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
gradientId: `water-level-pond-${id}`,
|
||||
gradientId: `water-level-pond-${timestamp}`,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
|
|
|||
18
lib/index.js
18
lib/index.js
|
|
@ -4,9 +4,6 @@
|
|||
export { default as activeRingChart } from './components/activeRingChart/index'
|
||||
export { default as borderBox1 } from './components/borderBox1/index'
|
||||
export { default as borderBox10 } from './components/borderBox10/index'
|
||||
export { default as borderBox11 } from './components/borderBox11/index'
|
||||
export { default as borderBox12 } from './components/borderBox12/index'
|
||||
export { default as borderBox13 } from './components/borderBox13/index'
|
||||
export { default as borderBox2 } from './components/borderBox2/index'
|
||||
export { default as borderBox3 } from './components/borderBox3/index'
|
||||
export { default as borderBox4 } from './components/borderBox4/index'
|
||||
|
|
@ -20,8 +17,6 @@ export { default as charts } from './components/charts/index'
|
|||
export { default as conicalColumnChart } from './components/conicalColumnChart/index'
|
||||
export { default as decoration1 } from './components/decoration1/index'
|
||||
export { default as decoration10 } from './components/decoration10/index'
|
||||
export { default as decoration11 } from './components/decoration11/index'
|
||||
export { default as decoration12 } from './components/decoration12/index'
|
||||
export { default as decoration2 } from './components/decoration2/index'
|
||||
export { default as decoration3 } from './components/decoration3/index'
|
||||
export { default as decoration4 } from './components/decoration4/index'
|
||||
|
|
@ -32,7 +27,6 @@ export { default as decoration8 } from './components/decoration8/index'
|
|||
export { default as decoration9 } from './components/decoration9/index'
|
||||
export { default as digitalFlop } from './components/digitalFlop/index'
|
||||
export { default as flylineChart } from './components/flylineChart/index'
|
||||
export { default as flylineChartEnhanced } from './components/flylineChartEnhanced/index'
|
||||
export { default as fullScreenContainer } from './components/fullScreenContainer/index'
|
||||
export { default as loading } from './components/loading/index'
|
||||
export { default as percentPond } from './components/percentPond/index'
|
||||
|
|
@ -56,9 +50,6 @@ import borderBox7 from './components/borderBox7/index'
|
|||
import borderBox8 from './components/borderBox8/index'
|
||||
import borderBox9 from './components/borderBox9/index'
|
||||
import borderBox10 from './components/borderBox10/index'
|
||||
import borderBox11 from './components/borderBox11/index'
|
||||
import borderBox12 from './components/borderBox12/index'
|
||||
import borderBox13 from './components/borderBox13/index'
|
||||
|
||||
// decoration
|
||||
import decoration1 from './components/decoration1/index'
|
||||
|
|
@ -71,8 +62,6 @@ import decoration7 from './components/decoration7/index'
|
|||
import decoration8 from './components/decoration8/index'
|
||||
import decoration9 from './components/decoration9/index'
|
||||
import decoration10 from './components/decoration10/index'
|
||||
import decoration11 from './components/decoration11/index'
|
||||
import decoration12 from './components/decoration12/index'
|
||||
|
||||
// charts
|
||||
import charts from './components/charts/index'
|
||||
|
|
@ -82,7 +71,6 @@ import capsuleChart from './components/capsuleChart'
|
|||
import waterLevelPond from './components/waterLevelPond/index'
|
||||
import percentPond from './components/percentPond/index'
|
||||
import flylineChart from './components/flylineChart'
|
||||
import flylineChartEnhanced from './components/flylineChartEnhanced'
|
||||
import conicalColumnChart from './components/conicalColumnChart'
|
||||
import digitalFlop from './components/digitalFlop'
|
||||
import scrollBoard from './components/scrollBoard/index'
|
||||
|
|
@ -106,9 +94,6 @@ export default function (Vue) {
|
|||
Vue.use(borderBox8)
|
||||
Vue.use(borderBox9)
|
||||
Vue.use(borderBox10)
|
||||
Vue.use(borderBox11)
|
||||
Vue.use(borderBox12)
|
||||
Vue.use(borderBox13)
|
||||
|
||||
// decoration
|
||||
Vue.use(decoration1)
|
||||
|
|
@ -121,8 +106,6 @@ export default function (Vue) {
|
|||
Vue.use(decoration8)
|
||||
Vue.use(decoration9)
|
||||
Vue.use(decoration10)
|
||||
Vue.use(decoration11)
|
||||
Vue.use(decoration12)
|
||||
|
||||
// charts
|
||||
Vue.use(charts)
|
||||
|
|
@ -132,7 +115,6 @@ export default function (Vue) {
|
|||
Vue.use(waterLevelPond)
|
||||
Vue.use(percentPond)
|
||||
Vue.use(flylineChart)
|
||||
Vue.use(flylineChartEnhanced)
|
||||
Vue.use(conicalColumnChart)
|
||||
Vue.use(digitalFlop)
|
||||
Vue.use(scrollBoard)
|
||||
|
|
|
|||
|
|
@ -29,17 +29,11 @@ export default {
|
|||
const { $nextTick, $refs, ref, onResize } = this
|
||||
|
||||
return new Promise(resolve => {
|
||||
$nextTick(_ => {
|
||||
$nextTick(e => {
|
||||
const dom = this.dom = $refs[ref]
|
||||
|
||||
this.width = dom ? dom.clientWidth : 0
|
||||
this.height = dom ? dom.clientHeight : 0
|
||||
|
||||
if (!dom) {
|
||||
console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
|
||||
} else if (!this.width || !this.height) {
|
||||
console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
|
||||
}
|
||||
this.width = dom.clientWidth
|
||||
this.height = dom.clientHeight
|
||||
|
||||
if (typeof onResize === 'function' && resize) onResize()
|
||||
|
||||
|
|
@ -62,8 +56,6 @@ export default {
|
|||
unbindDomResizeCallback () {
|
||||
let { domObserver, debounceInitWHFun } = this
|
||||
|
||||
if (!domObserver) return
|
||||
|
||||
domObserver.disconnect()
|
||||
domObserver.takeRecords()
|
||||
domObserver = null
|
||||
|
|
|
|||
|
|
@ -37,11 +37,3 @@ export function getPointDistance (pointOne, pointTwo) {
|
|||
|
||||
return Math.sqrt(minusX * minusX + minusY * minusY)
|
||||
}
|
||||
|
||||
export function uuid (hasHyphen) {
|
||||
return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
|
||||
const r = Math.random() * 16 | 0
|
||||
const v = c == 'x' ? r : (r & 0x3 | 0x8)
|
||||
return v.toString(16)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "@ykxiao/demu-mes-data-v",
|
||||
"version": "1.0.1",
|
||||
"author": "Longlong <long@qq.com>",
|
||||
"name": "@jiaminghi/data-view",
|
||||
"version": "2.5.0",
|
||||
"author": "JiaMing <743192023@qq.com>",
|
||||
"description": "Vue Large screen data display component library",
|
||||
"main": "lib/index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.tool.dwoodauto.com/ykxiao/DemuMesDataV.git"
|
||||
"url": "https://github.com/DataV-Team/DataV.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "node build/index.js",
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export default {
|
|||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
|
@ -78,16 +78,6 @@ export default {
|
|||
fontSize: 25,
|
||||
fill: '#fff'
|
||||
},
|
||||
/**
|
||||
* @description Digital flop toFixed
|
||||
* @type {Number}
|
||||
*/
|
||||
digitalFlopToFixed: 0,
|
||||
/**
|
||||
* @description Digital flop unit
|
||||
* @type {String}
|
||||
*/
|
||||
digitalFlopUnit: '',
|
||||
/**
|
||||
* @description CRender animationCurve
|
||||
* @type {String}
|
||||
|
|
@ -99,13 +89,7 @@ export default {
|
|||
* @type {String}
|
||||
* @default animationFrame = 50
|
||||
*/
|
||||
animationFrame: 50,
|
||||
/**
|
||||
* @description showOriginValue
|
||||
* @type {Boolean}
|
||||
* @default showOriginValue = false
|
||||
*/
|
||||
showOriginValue: false
|
||||
animationFrame: 50
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
|
@ -118,48 +102,33 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
digitalFlop() {
|
||||
digitalFlop () {
|
||||
const { mergedConfig, activeIndex } = this
|
||||
|
||||
if (!mergedConfig) return {}
|
||||
|
||||
const {
|
||||
digitalFlopStyle,
|
||||
digitalFlopToFixed,
|
||||
data,
|
||||
showOriginValue,
|
||||
digitalFlopUnit
|
||||
} = mergedConfig
|
||||
const { digitalFlopStyle, data } = mergedConfig
|
||||
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
let displayValue
|
||||
const sum = value.reduce((all, v) => all + v, 0)
|
||||
|
||||
if (showOriginValue) {
|
||||
displayValue = value[activeIndex]
|
||||
} else {
|
||||
const sum = value.reduce((all, v) => all + v, 0)
|
||||
|
||||
const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
|
||||
|
||||
displayValue = percent
|
||||
}
|
||||
const percent = parseInt(value[activeIndex] / sum * 100) || 0
|
||||
|
||||
return {
|
||||
content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
|
||||
number: [displayValue],
|
||||
style: digitalFlopStyle,
|
||||
toFixed: digitalFlopToFixed
|
||||
content: '{nt}%',
|
||||
number: [percent],
|
||||
style: digitalFlopStyle
|
||||
}
|
||||
},
|
||||
ringName() {
|
||||
ringName () {
|
||||
const { mergedConfig, activeIndex } = this
|
||||
|
||||
if (!mergedConfig) return ''
|
||||
|
||||
return mergedConfig.data[activeIndex].name
|
||||
},
|
||||
fontSize() {
|
||||
fontSize () {
|
||||
const { mergedConfig } = this
|
||||
|
||||
if (!mergedConfig) return ''
|
||||
|
|
@ -168,7 +137,7 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
config() {
|
||||
config () {
|
||||
const { animationHandler, mergeConfig, setRingOption } = this
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
|
|
@ -181,7 +150,7 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
init () {
|
||||
const { initChart, mergeConfig, setRingOption } = this
|
||||
|
||||
initChart()
|
||||
|
|
@ -190,20 +159,17 @@ export default {
|
|||
|
||||
setRingOption()
|
||||
},
|
||||
initChart() {
|
||||
initChart () {
|
||||
const { $refs } = this
|
||||
|
||||
this.chart = new Charts($refs['active-ring-chart'])
|
||||
},
|
||||
mergeConfig() {
|
||||
mergeConfig () {
|
||||
const { defaultConfig, config } = this
|
||||
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
)
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
},
|
||||
setRingOption() {
|
||||
setRingOption () {
|
||||
const { getRingOption, chart, ringAnimation } = this
|
||||
|
||||
const option = getRingOption()
|
||||
|
|
@ -212,7 +178,7 @@ export default {
|
|||
|
||||
ringAnimation()
|
||||
},
|
||||
getRingOption() {
|
||||
getRingOption () {
|
||||
const { mergedConfig, getRealRadius } = this
|
||||
|
||||
const radius = getRealRadius()
|
||||
|
|
@ -234,7 +200,7 @@ export default {
|
|||
color: mergedConfig.color
|
||||
}
|
||||
},
|
||||
getRealRadius(active = false) {
|
||||
getRealRadius (active = false) {
|
||||
const { mergedConfig, chart } = this
|
||||
|
||||
const { radius, activeRadius, lineWidth } = mergedConfig
|
||||
|
|
@ -245,15 +211,14 @@ export default {
|
|||
|
||||
let realRadius = active ? activeRadius : radius
|
||||
|
||||
if (typeof realRadius !== 'number')
|
||||
realRadius = (parseInt(realRadius) / 100) * maxRadius
|
||||
if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
|
||||
|
||||
const insideRadius = realRadius - halfLineWidth
|
||||
const outSideRadius = realRadius + halfLineWidth
|
||||
|
||||
return [insideRadius, outSideRadius]
|
||||
},
|
||||
ringAnimation() {
|
||||
ringAnimation () {
|
||||
let { activeIndex, getRingOption, chart, getRealRadius } = this
|
||||
|
||||
const radius = getRealRadius()
|
||||
|
|
@ -286,12 +251,12 @@ export default {
|
|||
}, activeTimeGap)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
beforeDestroy () {
|
||||
const { animationHandler } = this
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
|
|
|
|||
|
|
@ -1,16 +1,5 @@
|
|||
<template>
|
||||
<div class="dv-border-box-1" :ref="ref">
|
||||
<svg class="border" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
|
||||
38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
|
||||
85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
|
||||
${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
|
||||
${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
|
||||
${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
|
||||
${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
|
||||
${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
|
||||
</svg>
|
||||
|
||||
<div class="dv-border-box-1">
|
||||
<svg
|
||||
width="150px"
|
||||
height="150px"
|
||||
|
|
@ -63,29 +52,20 @@
|
|||
</template>
|
||||
|
||||
<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: 'DvBorderBox1',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-1',
|
||||
|
||||
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
|
||||
|
||||
defaultColor: ['#4fd2dd', '#235fa7'],
|
||||
|
|
|
|||
|
|
@ -1,18 +1,11 @@
|
|||
<template>
|
||||
<div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
|
||||
4, ${height} 0, ${height - 4} 0, 4
|
||||
`" />
|
||||
</svg>
|
||||
|
||||
<div class="dv-border-box-10" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
|
||||
<svg
|
||||
width="150px"
|
||||
height="150px"
|
||||
:key="item"
|
||||
v-for="item in border"
|
||||
:class="`${item} dv-border-svg-container`"
|
||||
:class="`${item} border`"
|
||||
>
|
||||
<polygon
|
||||
:fill="mergedColor[1]"
|
||||
|
|
@ -27,29 +20,20 @@
|
|||
</template>
|
||||
|
||||
<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: 'DvBorderBox10',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-10',
|
||||
|
||||
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
|
||||
|
||||
defaultColor: ['#1d48c4', '#d3e1f8'],
|
||||
|
|
@ -86,7 +70,7 @@ export default {
|
|||
height: 100%;
|
||||
border-radius: 6px;
|
||||
|
||||
.dv-border-svg-container {
|
||||
.border {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,13 +14,6 @@
|
|||
</filter>
|
||||
</defs>
|
||||
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
|
||||
${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
|
||||
${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
|
||||
20, ${height - 8} 8, ${height - 25} 8, 50
|
||||
`" />
|
||||
|
||||
<polyline
|
||||
:stroke="mergedColor[0]"
|
||||
:filter="`url(#${filterId})`"
|
||||
|
|
@ -216,7 +209,6 @@
|
|||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
|
|
@ -239,17 +231,13 @@ export default {
|
|||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'border-box-11',
|
||||
filterId: `border-box-11-filterId-${id}`,
|
||||
filterId: `borderr-box-11-filterId-${timestamp}`,
|
||||
|
||||
defaultColor: ['#8aaafb', '#1f33a2'],
|
||||
|
||||
|
|
@ -292,7 +280,7 @@ export default {
|
|||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
& > polyline {
|
||||
polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<path
|
||||
v-if="width && height"
|
||||
:fill="backgroundColor"
|
||||
fill="transparent"
|
||||
stroke-width="2"
|
||||
:stroke="mergedColor[0]"
|
||||
:d="`
|
||||
|
|
@ -92,7 +92,6 @@
|
|||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
|
|
@ -107,17 +106,13 @@ export default {
|
|||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = +new Date()
|
||||
return {
|
||||
ref: 'border-box-12',
|
||||
filterId: `borderr-box-12-filterId-${id}`,
|
||||
filterId: `borderr-box-12-filterId-${timestamp}`,
|
||||
|
||||
defaultColor: ['#2e6099', '#7ce7fd'],
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="dv-border-box-13" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<path
|
||||
:fill="backgroundColor"
|
||||
fill="transparent"
|
||||
:stroke="mergedColor[0]"
|
||||
:d="`
|
||||
M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
|
||||
|
|
@ -54,13 +54,10 @@ export default {
|
|||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = +new Date()
|
||||
return {
|
||||
ref: 'border-box-13',
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<template>
|
||||
<div class="dv-border-box-2" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
|
||||
`" />
|
||||
|
||||
<polyline
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
|
||||
|
|
@ -39,10 +35,6 @@ export default {
|
|||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -89,7 +81,7 @@ export default {
|
|||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
& > polyline {
|
||||
polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<template>
|
||||
<div class="dv-border-box-3" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
|
||||
`" />
|
||||
|
||||
<polyline class="dv-bb3-line1"
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
|
||||
|
|
@ -43,10 +39,6 @@ export default {
|
|||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -93,7 +85,7 @@ export default {
|
|||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
& > polyline {
|
||||
polyline {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
<template>
|
||||
<div class="dv-border-box-4" :ref="ref">
|
||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
|
||||
16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
|
||||
`" />
|
||||
|
||||
<polyline class="dv-bb4-line-1"
|
||||
:stroke="mergedColor[0]"
|
||||
:points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
|
||||
|
|
@ -51,10 +46,6 @@ export default {
|
|||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -105,7 +96,7 @@ export default {
|
|||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
& > polyline {
|
||||
polyline {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<template>
|
||||
<div class="dv-border-box-5" :ref="ref">
|
||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
|
||||
`" />
|
||||
|
||||
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polyline
|
||||
class="dv-bb5-line-1"
|
||||
:stroke="mergedColor[0]"
|
||||
|
|
@ -47,10 +43,6 @@ export default {
|
|||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -94,14 +86,14 @@ export default {
|
|||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dv-border-svg-container {
|
||||
.dv-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& > polyline {
|
||||
polyline {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<template>
|
||||
<div class="dv-border-box-6" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
|
||||
`" />
|
||||
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
|
||||
<circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
|
||||
<circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
|
||||
|
|
@ -43,10 +39,6 @@ export default {
|
|||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -86,14 +78,14 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
.dv-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& > polyline {
|
||||
polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
<template>
|
||||
<div
|
||||
class="dv-border-box-7"
|
||||
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
|
||||
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}`"
|
||||
:ref="ref"
|
||||
>
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
|
||||
|
|
@ -37,10 +37,6 @@ export default {
|
|||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -80,14 +76,14 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
.dv-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& > polyline {
|
||||
polyline {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="dv-border-box-8" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<path
|
||||
:id="path"
|
||||
:d="pathD"
|
||||
:d="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
|
||||
fill="transparent"
|
||||
/>
|
||||
<radialGradient
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
|
||||
<animateMotion
|
||||
:dur="`${dur}s`"
|
||||
:path="pathD"
|
||||
:path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
|
||||
rotate="auto"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
|
|
@ -33,8 +33,6 @@
|
|||
</mask>
|
||||
</defs>
|
||||
|
||||
<polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
|
||||
|
||||
<use
|
||||
:stroke="mergedColor[0]"
|
||||
stroke-width="1"
|
||||
|
|
@ -65,7 +63,6 @@
|
|||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
|
|
@ -82,23 +79,15 @@ export default {
|
|||
dur: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'border-box-8',
|
||||
path: `border-box-8-path-${id}`,
|
||||
gradient: `border-box-8-gradient-${id}`,
|
||||
mask: `border-box-8-mask-${id}`,
|
||||
path: `border-box-8-path-${timestamp}`,
|
||||
gradient: `border-box-8-gradient-${timestamp}`,
|
||||
mask: `border-box-8-mask-${timestamp}`,
|
||||
|
||||
defaultColor: ['#235fa7', '#4fd2dd'],
|
||||
|
||||
|
|
@ -110,13 +99,6 @@ export default {
|
|||
const { width, height } = this
|
||||
|
||||
return (width + height - 5) * 2
|
||||
},
|
||||
pathD () {
|
||||
const { reverse, width, height } = this
|
||||
|
||||
if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
|
||||
|
||||
return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -147,7 +129,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="dv-border-box-9" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<animate
|
||||
|
|
@ -105,15 +105,6 @@
|
|||
</mask>
|
||||
</defs>
|
||||
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
|
||||
${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
|
||||
${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
|
||||
${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
|
||||
${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10} ${width * 0.92 + 2}, ${height - 6}
|
||||
11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
|
||||
`" />
|
||||
|
||||
<rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
|
||||
</svg>
|
||||
|
||||
|
|
@ -125,7 +116,6 @@
|
|||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
|
|
@ -138,19 +128,15 @@ export default {
|
|||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'border-box-9',
|
||||
|
||||
gradientId: `border-box-9-gradient-${id}`,
|
||||
maskId: `border-box-9-mask-${id}`,
|
||||
gradientId: `border-box-9-gradient-${timestamp}`,
|
||||
maskId: `border-box-9-mask-${timestamp}`,
|
||||
|
||||
defaultColor: ['#11eefd', '#0078d2'],
|
||||
|
||||
|
|
@ -185,7 +171,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-border-svg-container {
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -7,23 +7,16 @@
|
|||
</div>
|
||||
|
||||
<div class="capsule-container">
|
||||
<div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
|
||||
<div
|
||||
class="capsule-item-column"
|
||||
:style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
|
||||
>
|
||||
<div
|
||||
v-if="mergedConfig.showValue"
|
||||
class="capsule-item-value"
|
||||
>{{ capsuleValue[index] }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="capsule-item"
|
||||
v-for="(capsule, index) in capsuleLength"
|
||||
:key="index"
|
||||
>
|
||||
<div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
|
||||
</div>
|
||||
|
||||
<div class="unit-label">
|
||||
<div
|
||||
v-for="(label, index) in labelData"
|
||||
:key="label + index"
|
||||
>{{ label }}</div>
|
||||
<div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -45,7 +38,7 @@ export default {
|
|||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
|
@ -61,61 +54,42 @@ export default {
|
|||
* @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
|
||||
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
||||
*/
|
||||
colors: [
|
||||
'#37a2da',
|
||||
'#32c5e9',
|
||||
'#67e0e3',
|
||||
'#9fe6b8',
|
||||
'#ffdb5c',
|
||||
'#ff9f7f',
|
||||
'#fb7293'
|
||||
],
|
||||
colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
|
||||
/**
|
||||
* @description Chart unit
|
||||
* @type {String}
|
||||
* @default unit = ''
|
||||
*/
|
||||
unit: '',
|
||||
/**
|
||||
* @description Show item value
|
||||
* @type {Boolean}
|
||||
* @default showValue = false
|
||||
*/
|
||||
showValue: false
|
||||
unit: ''
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
||||
capsuleLength: [],
|
||||
capsuleValue: [],
|
||||
labelData: [],
|
||||
labelDataLength: []
|
||||
labelData: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config() {
|
||||
config () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcData() {
|
||||
calcData () {
|
||||
const { mergeConfig, calcCapsuleLengthAndLabelData } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
calcCapsuleLengthAndLabelData()
|
||||
},
|
||||
mergeConfig() {
|
||||
mergeConfig () {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
)
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
},
|
||||
calcCapsuleLengthAndLabelData() {
|
||||
calcCapsuleLengthAndLabelData () {
|
||||
const { data } = this.mergedConfig
|
||||
|
||||
if (!data.length) return
|
||||
|
|
@ -124,24 +98,14 @@ export default {
|
|||
|
||||
const maxValue = Math.max(...capsuleValue)
|
||||
|
||||
this.capsuleValue = capsuleValue
|
||||
|
||||
this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
|
||||
this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
|
||||
|
||||
const oneFifth = maxValue / 5
|
||||
|
||||
const labelData = Array.from(
|
||||
new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
|
||||
)
|
||||
|
||||
this.labelData = labelData
|
||||
|
||||
this.labelDataLength = Array.from(labelData).map(v =>
|
||||
maxValue ? v / maxValue : 0
|
||||
)
|
||||
this.labelData = new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
|
|
@ -186,30 +150,21 @@ export default {
|
|||
margin: 5px 0px;
|
||||
border-radius: 5px;
|
||||
|
||||
.capsule-item-column {
|
||||
position: relative;
|
||||
div {
|
||||
height: 8px;
|
||||
margin-top: 1px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.capsule-item-value {
|
||||
font-size: 12px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unit-label {
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.unit-text {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
import Charts from '@jiaminghi/charts'
|
||||
|
|
@ -21,10 +19,10 @@ export default {
|
|||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: `charts-container-${id}`,
|
||||
chartRef: `chart-${id}`,
|
||||
ref: `charts-container-${timestamp}`,
|
||||
chartRef: `chart-${timestamp}`,
|
||||
|
||||
chart: null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -147,7 +147,6 @@
|
|||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
|
|
@ -163,17 +162,17 @@ export default {
|
|||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'decoration-10',
|
||||
|
||||
animationId1: `d10ani1${id}`,
|
||||
animationId2: `d10ani2${id}`,
|
||||
animationId3: `d10ani3${id}`,
|
||||
animationId4: `d10ani4${id}`,
|
||||
animationId5: `d10ani5${id}`,
|
||||
animationId6: `d10ani6${id}`,
|
||||
animationId7: `d10ani7${id}`,
|
||||
animationId1: `d10ani1${timestamp}`,
|
||||
animationId2: `d10ani2${timestamp}`,
|
||||
animationId3: `d10ani3${timestamp}`,
|
||||
animationId4: `d10ani4${timestamp}`,
|
||||
animationId5: `d10ani5${timestamp}`,
|
||||
animationId6: `d10ani6${timestamp}`,
|
||||
animationId7: `d10ani7${timestamp}`,
|
||||
|
||||
defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
|
||||
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@ export default {
|
|||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'decoration-11',
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
import Decoration12 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration12.name, Decoration12)
|
||||
}
|
||||
|
|
@ -1,304 +0,0 @@
|
|||
<template>
|
||||
<div class="dv-decoration-12" :ref="ref">
|
||||
<svg :width="width" :height="height">
|
||||
<defs>
|
||||
<g :id="gId">
|
||||
<path
|
||||
:stroke="pathColor[i]"
|
||||
:stroke-width="width / 2"
|
||||
fill="transparent"
|
||||
v-for="(d, i) in pathD"
|
||||
:key="d"
|
||||
:d="d"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<radialGradient
|
||||
:id="gradientId"
|
||||
cx="50%" cy="50%" r="50%"
|
||||
>
|
||||
<stop offset="0%" stop-color="transparent" stop-opacity="1" />
|
||||
<stop offset="100%" :stop-color="fade(mergedColor[1] || defaultColor[1], 30)" stop-opacity="1" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<circle
|
||||
v-for="r in circleR"
|
||||
:key="r"
|
||||
:r="r"
|
||||
:cx="x"
|
||||
:cy="y"
|
||||
:stroke="mergedColor[1]"
|
||||
:stroke-width="0.5"
|
||||
fill="transparent"
|
||||
/>
|
||||
|
||||
<circle
|
||||
r="1"
|
||||
:cx="x"
|
||||
:cy="y"
|
||||
stroke="transparent"
|
||||
:fill="`url(#${gradientId})`"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
:values="`1;${width / 2}`"
|
||||
:dur="`${haloDur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0"
|
||||
:dur="`${haloDur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
r="2"
|
||||
:cx="x"
|
||||
:cy="y"
|
||||
:fill="mergedColor[1]"
|
||||
/>
|
||||
|
||||
<g v-if="showSplitLine">
|
||||
<polyline
|
||||
v-for="p in splitLinePoints"
|
||||
:key="p"
|
||||
:points="p"
|
||||
:stroke="mergedColor[1]"
|
||||
:stroke-width="0.5"
|
||||
opacity="0.5"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<path
|
||||
v-for="d in arcD"
|
||||
:key="d"
|
||||
:d="d"
|
||||
:stroke="mergedColor[1]"
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
/>
|
||||
|
||||
<use :xlink:href="`#${gId}`">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
:values="`0, ${x} ${y};360, ${x} ${y}`"
|
||||
:dur="`${scanDur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
</svg>
|
||||
|
||||
<div class="decoration-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone, getCircleRadianPoint } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { fade } from '@jiaminghi/color'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration12',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
/**
|
||||
* @description Scan animation dur
|
||||
*/
|
||||
scanDur: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
/**
|
||||
* @description Halo animation dur
|
||||
*/
|
||||
haloDur: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'decoration-12',
|
||||
gId: `decoration-12-g-${id}`,
|
||||
gradientId: `decoration-12-gradient-${id}`,
|
||||
|
||||
defaultColor: ['#2783ce', '#2cf7fe'],
|
||||
|
||||
mergedColor: [],
|
||||
|
||||
pathD: [],
|
||||
|
||||
pathColor: [],
|
||||
|
||||
circleR: [],
|
||||
|
||||
splitLinePoints: [],
|
||||
|
||||
arcD: [],
|
||||
|
||||
segment: 30,
|
||||
|
||||
sectorAngle: Math.PI / 3,
|
||||
|
||||
ringNum: 3,
|
||||
|
||||
ringWidth: 1,
|
||||
|
||||
showSplitLine: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
x () {
|
||||
const { width } = this
|
||||
|
||||
return width / 2
|
||||
},
|
||||
y () {
|
||||
const { height } = this
|
||||
|
||||
return height / 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const { mergeColor, calcPathD, calcPathColor, calcCircleR, calcSplitLinePoints, calcArcD } = this
|
||||
|
||||
mergeColor()
|
||||
|
||||
calcPathD()
|
||||
|
||||
calcPathColor()
|
||||
|
||||
calcCircleR()
|
||||
|
||||
calcSplitLinePoints()
|
||||
|
||||
calcArcD()
|
||||
},
|
||||
mergeColor () {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
},
|
||||
calcPathD () {
|
||||
const { x, y, width, segment, sectorAngle } = this
|
||||
|
||||
const startAngle = -Math.PI / 2
|
||||
const angleGap = sectorAngle / segment
|
||||
const r = width / 4
|
||||
let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle)
|
||||
|
||||
this.pathD = new Array(segment)
|
||||
.fill('')
|
||||
.map((_, i) => {
|
||||
const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5))
|
||||
const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`
|
||||
lastEndPoints = endPoints
|
||||
|
||||
return d
|
||||
})
|
||||
},
|
||||
calcPathColor () {
|
||||
const { mergedColor: [color], segment } = this
|
||||
|
||||
const colorGap = 100 / (segment - 1)
|
||||
|
||||
this.pathColor = new Array(segment)
|
||||
.fill(color)
|
||||
.map((_, i) => fade(color, 100 - i * colorGap))
|
||||
},
|
||||
calcCircleR () {
|
||||
const { segment, ringNum, width, ringWidth } = this
|
||||
|
||||
const radiusGap = (width / 2 - ringWidth / 2) / ringNum
|
||||
|
||||
this.circleR = new Array(ringNum)
|
||||
.fill(0)
|
||||
.map((_, i) => radiusGap * (i + 1))
|
||||
},
|
||||
calcSplitLinePoints () {
|
||||
const { x, y, width } = this
|
||||
|
||||
const angleGap = Math.PI / 6
|
||||
const r = width / 2
|
||||
|
||||
this.splitLinePoints = new Array(6)
|
||||
.fill('')
|
||||
.map((_, i) => {
|
||||
const startAngle = angleGap * (i + 1)
|
||||
const endAngle = startAngle + Math.PI
|
||||
const startPoint = getCircleRadianPoint(x, y, r, startAngle)
|
||||
const endPoint = getCircleRadianPoint(x, y, r, endAngle)
|
||||
|
||||
return `${startPoint.join(',')} ${endPoint.join(',')}`
|
||||
})
|
||||
},
|
||||
calcArcD () {
|
||||
const { x, y, width } = this
|
||||
|
||||
const angleGap = Math.PI / 6
|
||||
const r = width / 2 - 1
|
||||
|
||||
this.arcD = new Array(4)
|
||||
.fill('')
|
||||
.map((_, i) => {
|
||||
const startAngle = angleGap * (3 * i + 1)
|
||||
const endAngle = startAngle + angleGap
|
||||
const startPoint = getCircleRadianPoint(x, y, r, startAngle)
|
||||
const endPoint = getCircleRadianPoint(x, y, r, endAngle)
|
||||
|
||||
return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`
|
||||
})
|
||||
},
|
||||
afterAutoResizeMixinInit () {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
},
|
||||
fade
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.dv-decoration-12 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.decoration-content {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
:attributeName="reverse ? 'height' : 'width'"
|
||||
from="0"
|
||||
:to="reverse ? height : width"
|
||||
:dur="`${dur}s`"
|
||||
dur="6s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines=".42,0,.58,1"
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
:attributeName="reverse ? 'y' : 'x'"
|
||||
from="0"
|
||||
:to="reverse ? height : width"
|
||||
:dur="`${dur}s`"
|
||||
dur="6s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines="0.42,0,0.58,1"
|
||||
|
|
@ -48,10 +48,6 @@ export default {
|
|||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dur: {
|
||||
type: Number,
|
||||
default: 6
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="dv-decoration-4" :ref="ref">
|
||||
<div
|
||||
:class="`container ${reverse ? 'reverse' : 'normal'}`"
|
||||
:style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`"
|
||||
:style="reverse ? `width:${width}px;height:5px` : `width:5px;height:${height}px;`"
|
||||
>
|
||||
<svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
|
||||
<polyline
|
||||
|
|
@ -40,10 +40,6 @@ export default {
|
|||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dur: {
|
||||
type: Number,
|
||||
default: 3
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -87,26 +83,23 @@ export default {
|
|||
display: flex;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.normal {
|
||||
animation: ani-height ease-in-out infinite;
|
||||
height: 0% !important;
|
||||
animation: ani-height 3s ease-in-out infinite;
|
||||
left: 50%;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.reverse {
|
||||
animation: ani-width ease-in-out infinite;
|
||||
width: 0% !important;
|
||||
animation: ani-width 3s ease-in-out infinite;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
@keyframes ani-height {
|
||||
0% {
|
||||
height: 0%;
|
||||
}
|
||||
|
||||
70% {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -117,10 +110,6 @@ export default {
|
|||
}
|
||||
|
||||
@keyframes ani-width {
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
70% {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
attributeType="XML"
|
||||
:from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
|
||||
:to="`0, 0, ${line1Length}, 0`"
|
||||
:dur="`${dur}s`"
|
||||
dur="1.2s"
|
||||
begin="0s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
attributeType="XML"
|
||||
:from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
|
||||
:to="`0, 0, ${line2Length}, 0`"
|
||||
:dur="`${dur}s`"
|
||||
dur="1.2s"
|
||||
begin="0s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
|
|
@ -59,10 +59,6 @@ export default {
|
|||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
dur: {
|
||||
type: Number,
|
||||
default: 1.2
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
|
|||
|
|
@ -85,7 +85,6 @@
|
|||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
|
|
@ -107,11 +106,11 @@ export default {
|
|||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'decoration-9',
|
||||
|
||||
polygonId: `decoration-9-polygon-${id}`,
|
||||
polygonId: `decoration-9-polygon-${timestamp}`,
|
||||
|
||||
svgWH: [100, 100],
|
||||
|
||||
|
|
|
|||
|
|
@ -53,12 +53,6 @@ export default {
|
|||
* @example textAlign = 'center' | 'left' | 'right'
|
||||
*/
|
||||
textAlign: 'center',
|
||||
/**
|
||||
* @description rowGap
|
||||
* @type {Number}
|
||||
@default rowGap = 0
|
||||
*/
|
||||
rowGap: 0,
|
||||
/**
|
||||
* @description Text style configuration
|
||||
* @type {Object} {CRender Class Style}
|
||||
|
|
@ -67,11 +61,6 @@ export default {
|
|||
fontSize: 30,
|
||||
fill: '#3de7c9'
|
||||
},
|
||||
/**
|
||||
* @description Number formatter
|
||||
* @type {Null|Function}
|
||||
*/
|
||||
formatter: undefined,
|
||||
/**
|
||||
* @description CRender animationCurve
|
||||
* @type {String}
|
||||
|
|
@ -135,7 +124,7 @@ export default {
|
|||
})
|
||||
},
|
||||
getShape () {
|
||||
const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig
|
||||
const { number, content, toFixed, textAlign } = this.mergedConfig
|
||||
|
||||
const [w, h] = this.renderer.area
|
||||
|
||||
|
|
@ -148,9 +137,7 @@ export default {
|
|||
number,
|
||||
content,
|
||||
toFixed,
|
||||
position,
|
||||
rowGap,
|
||||
formatter
|
||||
position
|
||||
}
|
||||
},
|
||||
getStyle () {
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { randomExtend, getPointDistance, uuid } from '../../../util/index'
|
||||
import { randomExtend, getPointDistance } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
|
|
@ -171,14 +171,14 @@ export default {
|
|||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'dv-flyline-chart',
|
||||
unique: Math.random(),
|
||||
maskId: `flyline-mask-id-${id}`,
|
||||
maskCircleId: `mask-circle-id-${id}`,
|
||||
gradientId: `gradient-id-${id}`,
|
||||
gradient2Id: `gradient2-id-${id}`,
|
||||
maskId: `flyline-mask-id-${timestamp}`,
|
||||
maskCircleId: `mask-circle-id-${timestamp}`,
|
||||
gradientId: `gradient-id-${timestamp}`,
|
||||
gradient2Id: `gradient2-id-${timestamp}`,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
import FlylineChartEnhanced from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(FlylineChartEnhanced.name, FlylineChartEnhanced)
|
||||
}
|
||||
|
|
@ -1,579 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
class="dv-flyline-chart-enhanced"
|
||||
:style="`background-image: url(${mergedConfig ? mergedConfig.bgImgSrc : ''})`"
|
||||
:ref="ref"
|
||||
@click="consoleClickPos"
|
||||
>
|
||||
<svg v-if="flylines.length" :width="width" :height="height">
|
||||
<defs>
|
||||
<radialGradient
|
||||
:id="flylineGradientId"
|
||||
cx="50%" cy="50%" r="50%"
|
||||
>
|
||||
<stop
|
||||
offset="0%" stop-color="#fff"
|
||||
stop-opacity="1"
|
||||
/>
|
||||
<stop
|
||||
offset="100%" stop-color="#fff"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient
|
||||
:id="haloGradientId"
|
||||
cx="50%" cy="50%" r="50%"
|
||||
>
|
||||
<stop
|
||||
offset="0%" stop-color="#fff"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
<stop
|
||||
offset="100%" stop-color="#fff"
|
||||
stop-opacity="1"
|
||||
/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<!-- points -->
|
||||
<g v-for="point in flylinePoints" :key="point.key + Math.random()">
|
||||
<defs>
|
||||
<circle
|
||||
v-if="point.halo.show"
|
||||
:id="`halo${unique}${point.key}`"
|
||||
:cx="point.coordinate[0]"
|
||||
:cy="point.coordinate[1]"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
:values="`1;${point.halo.radius}`"
|
||||
:dur="`${point.halo.time}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0"
|
||||
:dur="`${point.halo.time}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</defs>
|
||||
|
||||
<!-- halo gradient mask -->
|
||||
<mask :id="`mask${unique}${point.key}`">
|
||||
<use
|
||||
v-if="point.halo.show"
|
||||
:xlink:href="`#halo${unique}${point.key}`"
|
||||
:fill="`url(#${haloGradientId})`"
|
||||
/>
|
||||
</mask>
|
||||
|
||||
<!-- point halo -->
|
||||
<use
|
||||
v-if="point.halo.show"
|
||||
:xlink:href="`#halo${unique}${point.key}`"
|
||||
:fill="point.halo.color"
|
||||
:mask="`url(#mask${unique}${point.key})`"
|
||||
/>
|
||||
|
||||
<!-- point icon -->
|
||||
<image
|
||||
v-if="point.icon.show"
|
||||
:xlink:href="point.icon.src"
|
||||
:width="point.icon.width"
|
||||
:height="point.icon.height"
|
||||
:x="point.icon.x"
|
||||
:y="point.icon.y"
|
||||
/>
|
||||
|
||||
<!-- point text -->
|
||||
<text
|
||||
v-if="point.text.show"
|
||||
:style="`fontSize:${point.text.fontSize}px;color:${point.text.color}`"
|
||||
:fill="point.text.color"
|
||||
:x="point.text.x"
|
||||
:y="point.text.y"
|
||||
>
|
||||
{{ point.name }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- flylines -->
|
||||
<g v-for="(line, i) in flylines" :key="line.key + Math.random()">
|
||||
<defs>
|
||||
<path
|
||||
:id="line.key"
|
||||
:ref="line.key"
|
||||
:d="line.d"
|
||||
fill="transparent"
|
||||
/>
|
||||
</defs>
|
||||
|
||||
<!-- orbit line -->
|
||||
<use
|
||||
:xlink:href="`#${line.key}`"
|
||||
:stroke-width="line.width"
|
||||
:stroke="line.orbitColor"
|
||||
/>
|
||||
|
||||
<!-- fly line gradient mask -->
|
||||
<mask :id="`mask${unique}${line.key}`">
|
||||
<circle cx="0" cy="0" :r="line.radius" :fill="`url(#${flylineGradientId})`">
|
||||
<animateMotion
|
||||
:dur="line.time"
|
||||
:path="line.d"
|
||||
rotate="auto"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</mask>
|
||||
|
||||
<!-- fly line -->
|
||||
<use
|
||||
v-if="flylineLengths[i]"
|
||||
:xlink:href="`#${line.key}`"
|
||||
:stroke-width="line.width"
|
||||
:stroke="line.color"
|
||||
:mask="`url(#mask${unique}${line.key})`"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:from="`0, ${flylineLengths[i]}`"
|
||||
:to="`${flylineLengths[i]}, 0`"
|
||||
:dur="line.time"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { randomExtend, getPointDistance, uuid } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvFlylineChartEnhanced',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
dev: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'dv-flyline-chart-enhanced',
|
||||
unique: Math.random(),
|
||||
flylineGradientId: `flyline-gradient-id-${id}`,
|
||||
haloGradientId: `halo-gradient-id-${id}`,
|
||||
/**
|
||||
* @description Type Declaration
|
||||
*
|
||||
* interface Halo {
|
||||
* show?: boolean
|
||||
* duration?: [number, number]
|
||||
* color?: string
|
||||
* radius?: number
|
||||
* }
|
||||
*
|
||||
* interface Text {
|
||||
* show?: boolean
|
||||
* offset?: [number, number]
|
||||
* color?: string
|
||||
* fontSize?: number
|
||||
* }
|
||||
*
|
||||
* interface Icon {
|
||||
* show?: boolean
|
||||
* src?: string
|
||||
* width?: number
|
||||
* height?: number
|
||||
* }
|
||||
*
|
||||
* interface Point {
|
||||
* name: string
|
||||
* coordinate: [number, number]
|
||||
* halo?: Halo
|
||||
* text?: Text
|
||||
* icon?: Icon
|
||||
* }
|
||||
*
|
||||
* interface Line {
|
||||
* width?: number
|
||||
* color?: string
|
||||
* orbitColor?: string
|
||||
* duration?: [number, number]
|
||||
* radius?: string
|
||||
* }
|
||||
*
|
||||
* interface Flyline extends Line {
|
||||
* source: string
|
||||
* target: string
|
||||
* }
|
||||
*
|
||||
* interface FlylineWithPath extends Flyline {
|
||||
* d: string
|
||||
* path: [[number, number], [number, number], [number, number]]
|
||||
* key: string
|
||||
* }
|
||||
*/
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Flyline chart points
|
||||
* @type {Point[]}
|
||||
* @default points = []
|
||||
*/
|
||||
points: [],
|
||||
/**
|
||||
* @description Lines
|
||||
* @type {Flyline[]}
|
||||
* @default lines = []
|
||||
*/
|
||||
lines: [],
|
||||
/**
|
||||
* @description Global halo configuration
|
||||
* @type {Halo}
|
||||
*/
|
||||
halo: {
|
||||
/**
|
||||
* @description Whether to show halo
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
/**
|
||||
* @description Halo animation duration (1s = 10)
|
||||
* @type {[number, number]}
|
||||
*/
|
||||
duration: [20, 30],
|
||||
/**
|
||||
* @description Halo color
|
||||
* @type {String}
|
||||
* @default color = '#fb7293'
|
||||
*/
|
||||
color: '#fb7293',
|
||||
/**
|
||||
* @description Halo radius
|
||||
* @type {Number}
|
||||
* @default radius = 120
|
||||
*/
|
||||
radius: 120
|
||||
},
|
||||
/**
|
||||
* @description Global text configuration
|
||||
* @type {Text}
|
||||
*/
|
||||
text: {
|
||||
/**
|
||||
* @description Whether to show text
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
/**
|
||||
* @description Text offset
|
||||
* @type {[number, number]}
|
||||
* @default offset = [0, 15]
|
||||
*/
|
||||
offset: [0, 15],
|
||||
/**
|
||||
* @description Text color
|
||||
* @type {String}
|
||||
* @default color = '#ffdb5c'
|
||||
*/
|
||||
color: '#ffdb5c',
|
||||
/**
|
||||
* @description Text font size
|
||||
* @type {Number}
|
||||
* @default fontSize = 12
|
||||
*/
|
||||
fontSize: 12
|
||||
},
|
||||
/**
|
||||
* @description Global icon configuration
|
||||
* @type {Icon}
|
||||
*/
|
||||
icon: {
|
||||
/**
|
||||
* @description Whether to show icon
|
||||
* @type {Boolean}
|
||||
* @default show = false
|
||||
*/
|
||||
show: false,
|
||||
/**
|
||||
* @description Icon src
|
||||
* @type {String}
|
||||
* @default src = ''
|
||||
*/
|
||||
src: '',
|
||||
/**
|
||||
* @description Icon width
|
||||
* @type {Number}
|
||||
* @default width = 15
|
||||
*/
|
||||
width: 15,
|
||||
/**
|
||||
* @description Icon height
|
||||
* @type {Number}
|
||||
* @default width = 15
|
||||
*/
|
||||
height: 15
|
||||
},
|
||||
/**
|
||||
* @description Global line configuration
|
||||
* @type {Line}
|
||||
*/
|
||||
line: {
|
||||
/**
|
||||
* @description Line width
|
||||
* @type {Number}
|
||||
* @default width = 1
|
||||
*/
|
||||
width: 1,
|
||||
/**
|
||||
* @description Flyline color
|
||||
* @type {String}
|
||||
* @default color = '#ffde93'
|
||||
*/
|
||||
color: '#ffde93',
|
||||
/**
|
||||
* @description Orbit color
|
||||
* @type {String}
|
||||
* @default orbitColor = 'rgba(103, 224, 227, .2)'
|
||||
*/
|
||||
orbitColor: 'rgba(103, 224, 227, .2)',
|
||||
/**
|
||||
* @description Flyline animation duration
|
||||
* @type {[number, number]}
|
||||
* @default duration = [20, 30]
|
||||
*/
|
||||
duration: [20, 30],
|
||||
/**
|
||||
* @description Flyline radius
|
||||
* @type {Number}
|
||||
* @default radius = 100
|
||||
*/
|
||||
radius: 100
|
||||
},
|
||||
/**
|
||||
* @description Back ground image url
|
||||
* @type {String}
|
||||
* @default bgImgSrc = ''
|
||||
*/
|
||||
bgImgSrc: '',
|
||||
/**
|
||||
* @description K value
|
||||
* @type {Number}
|
||||
* @default k = -0.5
|
||||
* @example k = -1 ~ 1
|
||||
*/
|
||||
k: -0.5,
|
||||
/**
|
||||
* @description Flyline curvature
|
||||
* @type {Number}
|
||||
* @default curvature = 5
|
||||
*/
|
||||
curvature: 5,
|
||||
/**
|
||||
* @description Relative points position
|
||||
* @type {Boolean}
|
||||
* @default relative = true
|
||||
*/
|
||||
relative: true
|
||||
},
|
||||
/**
|
||||
* @description Fly line data
|
||||
* @type {FlylineWithPath[]}
|
||||
* @default flylines = []
|
||||
*/
|
||||
flylines: [],
|
||||
/**
|
||||
* @description Fly line lengths
|
||||
* @type {Number[]}
|
||||
* @default flylineLengths = []
|
||||
*/
|
||||
flylineLengths: [],
|
||||
/**
|
||||
* @description Fly line points
|
||||
* @default flylinePoints = []
|
||||
*/
|
||||
flylinePoints: [],
|
||||
|
||||
mergedConfig: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
onResize () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
async calcData () {
|
||||
const { mergeConfig, calcflylinePoints, calcLinePaths } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
calcflylinePoints()
|
||||
|
||||
calcLinePaths()
|
||||
|
||||
const { calcLineLengths } = this
|
||||
|
||||
await calcLineLengths()
|
||||
},
|
||||
mergeConfig () {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
|
||||
const { points, lines, halo, text, icon, line } = mergedConfig
|
||||
|
||||
mergedConfig.points = points.map(item => {
|
||||
item.halo = deepMerge(deepClone(halo, true), item.halo || {})
|
||||
item.text = deepMerge(deepClone(text, true), item.text || {})
|
||||
item.icon = deepMerge(deepClone(icon, true), item.icon || {})
|
||||
|
||||
return item
|
||||
})
|
||||
|
||||
mergedConfig.lines = lines.map(item => {
|
||||
return deepMerge(deepClone(line, true), item)
|
||||
})
|
||||
|
||||
this.mergedConfig = mergedConfig
|
||||
},
|
||||
calcflylinePoints () {
|
||||
const { mergedConfig, width, height } = this
|
||||
|
||||
const { relative, points } = mergedConfig
|
||||
|
||||
this.flylinePoints = points.map((item, i) => {
|
||||
const { coordinate: [x, y], halo, icon, text } = item
|
||||
|
||||
if (relative) item.coordinate = [x * width, y * height]
|
||||
|
||||
item.halo.time = randomExtend(...halo.duration) / 10
|
||||
|
||||
const { width: iw, height: ih } = icon
|
||||
item.icon.x = item.coordinate[0] - iw / 2
|
||||
item.icon.y = item.coordinate[1] - ih / 2
|
||||
|
||||
const [ox, oy] = text.offset
|
||||
item.text.x = item.coordinate[0] + ox
|
||||
item.text.y = item.coordinate[1] + oy
|
||||
|
||||
item.key = `${item.coordinate.toString()}${i}`
|
||||
|
||||
return item
|
||||
})
|
||||
},
|
||||
calcLinePaths () {
|
||||
const { getPath, mergedConfig } = this
|
||||
|
||||
const { points, lines } = mergedConfig
|
||||
|
||||
this.flylines = lines.map(item => {
|
||||
const { source, target, duration } = item
|
||||
|
||||
const sourcePoint = points.find(({ name }) => name === source).coordinate
|
||||
const targetPoint = points.find(({ name }) => name === target).coordinate
|
||||
|
||||
const path = getPath(sourcePoint, targetPoint).map(item => item.map(v => parseFloat(v.toFixed(10))))
|
||||
const d = `M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`
|
||||
const key = `path${path.toString()}`
|
||||
const time = randomExtend(...duration) / 10
|
||||
|
||||
return { ...item, path, key, d, time }
|
||||
})
|
||||
},
|
||||
getPath (start, end) {
|
||||
const { getControlPoint } = this
|
||||
|
||||
const controlPoint = getControlPoint(start, end)
|
||||
|
||||
return [start, controlPoint, end]
|
||||
},
|
||||
getControlPoint ([sx, sy], [ex, ey]) {
|
||||
const { getKLinePointByx, mergedConfig } = this
|
||||
|
||||
const { curvature, k } = mergedConfig
|
||||
|
||||
const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2]
|
||||
|
||||
const distance = getPointDistance([sx, sy], [ex, ey])
|
||||
|
||||
const targetLength = distance / curvature
|
||||
const disDived = targetLength / 2
|
||||
|
||||
let [dx, dy] = [mx, my]
|
||||
|
||||
do {
|
||||
dx += disDived
|
||||
dy = getKLinePointByx(k, [mx, my], dx)[1]
|
||||
} while (getPointDistance([mx, my], [dx, dy]) < targetLength)
|
||||
|
||||
return [dx, dy]
|
||||
},
|
||||
getKLinePointByx (k, [lx, ly], x) {
|
||||
const y = ly - k * lx + k * x
|
||||
|
||||
return [x, y]
|
||||
},
|
||||
async calcLineLengths () {
|
||||
const { $nextTick, flylines, $refs } = this
|
||||
|
||||
await $nextTick()
|
||||
|
||||
this.flylineLengths = flylines.map(({ key }) => $refs[key][0].getTotalLength())
|
||||
},
|
||||
consoleClickPos ({ offsetX, offsetY }) {
|
||||
const { width, height, dev } = this
|
||||
|
||||
if (!dev) return
|
||||
|
||||
const relativeX = (offsetX / width).toFixed(2)
|
||||
const relativeY = (offsetY / height).toFixed(2)
|
||||
|
||||
console.warn(`dv-flyline-chart-enhanced DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.dv-flyline-chart-enhanced {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-size: 100% 100%;
|
||||
|
||||
text {
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -44,8 +44,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
|
@ -59,10 +57,10 @@ export default {
|
|||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
gradientId1: `percent-pond-gradientId1-${id}`,
|
||||
gradientId2: `percent-pond-gradientId2-${id}`,
|
||||
gradientId1: `percent-pond-gradientId1-${timestamp}`,
|
||||
gradientId2: `percent-pond-gradientId2-${timestamp}`,
|
||||
|
||||
width: 0,
|
||||
height: 0,
|
||||
|
|
@ -236,10 +234,10 @@ export default {
|
|||
|
||||
await $nextTick()
|
||||
|
||||
const { clientWidth, clientHeight } = $refs['percent-pond']
|
||||
const dom = $refs['percent-pond']
|
||||
|
||||
this.width = clientWidth
|
||||
this.height = clientHeight
|
||||
this.width = dom.clientWidth
|
||||
this.height = dom.clientHeight
|
||||
},
|
||||
mergeConfig () {
|
||||
const { config, defaultConfig } = this
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div
|
||||
class="header-item"
|
||||
v-for="(headerItem, i) in header"
|
||||
:key="`${headerItem}${i}`"
|
||||
:key="headerItem + i"
|
||||
:style="`
|
||||
height: ${mergedConfig.headerHeight}px;
|
||||
line-height: ${mergedConfig.headerHeight}px;
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<div
|
||||
class="row-item"
|
||||
v-for="(row, ri) in rows"
|
||||
:key="`${row.toString()}${row.scroll}`"
|
||||
:key="row.toString() + row.scroll"
|
||||
:style="`
|
||||
height: ${heights[ri]}px;
|
||||
line-height: ${heights[ri]}px;
|
||||
|
|
@ -33,13 +33,11 @@
|
|||
<div
|
||||
class="ceil"
|
||||
v-for="(ceil, ci) in row.ceils"
|
||||
:key="`${ceil}${ri}${ci}`"
|
||||
:key="ceil + ri + ci"
|
||||
:style="`width: ${widths[ci]}px;`"
|
||||
:align="aligns[ci]"
|
||||
v-html="ceil"
|
||||
@click="emitEvent('click', ri, ci, row, ceil)"
|
||||
@mouseenter="handleHover(true, ri, ci, row, ceil)"
|
||||
@mouseleave="handleHover(false)"
|
||||
@click="emitEvent(ri, ci, row, ceil)"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
|
@ -148,14 +146,7 @@ export default {
|
|||
* @default carousel = 'single'
|
||||
* @example carousel = 'single' | 'page'
|
||||
*/
|
||||
carousel: 'single',
|
||||
/**
|
||||
* @description Pause scroll when mouse hovered
|
||||
* @type {Boolean}
|
||||
* @default hoverPause = true
|
||||
* @example hoverPause = true | false
|
||||
*/
|
||||
hoverPause: true
|
||||
carousel: 'single'
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
|
@ -178,9 +169,7 @@ export default {
|
|||
|
||||
animationHandler: '',
|
||||
|
||||
updater: 0,
|
||||
|
||||
needCalc: false
|
||||
updater: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -189,24 +178,10 @@ export default {
|
|||
|
||||
stopAnimation()
|
||||
|
||||
this.animationIndex = 0
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleHover(enter, ri, ci, row, ceil){
|
||||
const { mergedConfig, emitEvent, stopAnimation, animation } = this
|
||||
|
||||
if (enter) emitEvent('mouseover', ri, ci, row, ceil)
|
||||
if (!mergedConfig.hoverPause) return
|
||||
|
||||
if (enter) {
|
||||
stopAnimation()
|
||||
} else {
|
||||
animation(true)
|
||||
}
|
||||
},
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcData } = this
|
||||
|
||||
|
|
@ -337,14 +312,6 @@ export default {
|
|||
this.aligns = deepMerge(aligns, align)
|
||||
},
|
||||
async animation (start = false) {
|
||||
const { needCalc, calcHeights, calcRowsData } = this
|
||||
|
||||
if (needCalc) {
|
||||
calcRowsData()
|
||||
calcHeights()
|
||||
this.needCalc = false
|
||||
}
|
||||
|
||||
let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
|
||||
|
||||
const { waitTime, carousel, rowNum } = mergedConfig
|
||||
|
|
@ -363,7 +330,7 @@ export default {
|
|||
let rows = rowsData.slice(animationIndex)
|
||||
rows.push(...rowsData.slice(0, animationIndex))
|
||||
|
||||
this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
|
||||
this.rows = rows
|
||||
this.heights = new Array(rowLength).fill(avgHeight)
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
|
|
@ -388,28 +355,15 @@ export default {
|
|||
|
||||
clearTimeout(animationHandler)
|
||||
},
|
||||
emitEvent (type, ri, ci, row, ceil) {
|
||||
emitEvent (ri, ci, row, ceil) {
|
||||
const { ceils, rowIndex } = row
|
||||
|
||||
this.$emit(type, {
|
||||
this.$emit('click', {
|
||||
row: ceils,
|
||||
ceil,
|
||||
rowIndex,
|
||||
columnIndex: ci
|
||||
})
|
||||
},
|
||||
updateRows(rows, animationIndex) {
|
||||
const { mergedConfig, animationHandler, animation } = this
|
||||
|
||||
this.mergedConfig = {
|
||||
...mergedConfig,
|
||||
data: [...rows]
|
||||
}
|
||||
|
||||
this.needCalc = true
|
||||
|
||||
if (typeof animationIndex === 'number') this.animationIndex = animationIndex
|
||||
if (!animationHandler) animation(true)
|
||||
}
|
||||
},
|
||||
destroyed () {
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
>
|
||||
<div class="ranking-info">
|
||||
<div class="rank">No.{{ item.ranking }}</div>
|
||||
<div class="info-name" v-html="item.name" />
|
||||
<div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
|
||||
<div class="info-name">{{ item.name }}</div>
|
||||
<div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
|
||||
</div>
|
||||
|
||||
<div class="ranking-column">
|
||||
|
|
@ -76,19 +76,7 @@ export default {
|
|||
* @default unit = ''
|
||||
* @example unit = 'ton'
|
||||
*/
|
||||
unit: '',
|
||||
/**
|
||||
* @description Auto sort by value
|
||||
* @type {Boolean}
|
||||
* @default sort = true
|
||||
*/
|
||||
sort: true,
|
||||
/**
|
||||
* @description Value formatter
|
||||
* @type {Function}
|
||||
* @default valueFormatter = null
|
||||
*/
|
||||
valueFormatter: null
|
||||
unit: ''
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
|
@ -149,29 +137,19 @@ export default {
|
|||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
},
|
||||
calcRowsData () {
|
||||
let { data, rowNum, sort } = this.mergedConfig
|
||||
let { data, rowNum } = this.mergedConfig
|
||||
|
||||
sort && data.sort(({ value: a }, { value: b }) => {
|
||||
data.sort(({ value: a }, { value: b }) => {
|
||||
if (a > b) return -1
|
||||
if (a < b) return 1
|
||||
if (a === b) return 0
|
||||
})
|
||||
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
const min = Math.min(...value) || 0
|
||||
|
||||
// abs of min
|
||||
const minAbs = Math.abs(min)
|
||||
|
||||
const max = Math.max(...value) || 0
|
||||
|
||||
// abs of max
|
||||
const maxAbs = Math.abs(max)
|
||||
|
||||
const total = max + minAbs
|
||||
|
||||
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))
|
||||
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
|
||||
|
||||
const rowLength = data.length
|
||||
|
||||
|
|
@ -214,7 +192,7 @@ export default {
|
|||
let rows = rowsData.slice(animationIndex)
|
||||
rows.push(...rowsData.slice(0, animationIndex))
|
||||
|
||||
this.rows = rows.slice(0, rowNum + 1)
|
||||
this.rows = rows
|
||||
this.heights = new Array(rowLength).fill(avgHeight)
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
|
|
@ -238,7 +216,7 @@ export default {
|
|||
if (!animationHandler) return
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
},
|
||||
}
|
||||
},
|
||||
destroyed () {
|
||||
const { stopAnimation } = this
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
</defs>
|
||||
|
||||
<text
|
||||
v-if="renderer"
|
||||
:stroke="`url(#${gradientId})`"
|
||||
:fill="`url(#${gradientId})`"
|
||||
:x="renderer.area[0] / 2 + 8"
|
||||
|
|
@ -39,8 +40,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
|
@ -54,9 +53,9 @@ export default {
|
|||
default: () => ({})
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
gradientId: `water-level-pond-${id}`,
|
||||
gradientId: `water-level-pond-${timestamp}`,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ import decoration8 from './components/decoration8/index'
|
|||
import decoration9 from './components/decoration9/index'
|
||||
import decoration10 from './components/decoration10/index'
|
||||
import decoration11 from './components/decoration11/index'
|
||||
import decoration12 from './components/decoration12/index'
|
||||
|
||||
// charts
|
||||
import charts from './components/charts/index'
|
||||
|
|
@ -41,7 +40,6 @@ import capsuleChart from './components/capsuleChart'
|
|||
import waterLevelPond from './components/waterLevelPond/index'
|
||||
import percentPond from './components/percentPond/index'
|
||||
import flylineChart from './components/flylineChart'
|
||||
import flylineChartEnhanced from './components/flylineChartEnhanced'
|
||||
import conicalColumnChart from './components/conicalColumnChart'
|
||||
import digitalFlop from './components/digitalFlop'
|
||||
import scrollBoard from './components/scrollBoard/index'
|
||||
|
|
@ -81,7 +79,6 @@ export default function (Vue) {
|
|||
Vue.use(decoration9)
|
||||
Vue.use(decoration10)
|
||||
Vue.use(decoration11)
|
||||
Vue.use(decoration12)
|
||||
|
||||
// charts
|
||||
Vue.use(charts)
|
||||
|
|
@ -91,7 +88,6 @@ export default function (Vue) {
|
|||
Vue.use(waterLevelPond)
|
||||
Vue.use(percentPond)
|
||||
Vue.use(flylineChart)
|
||||
Vue.use(flylineChartEnhanced)
|
||||
Vue.use(conicalColumnChart)
|
||||
Vue.use(digitalFlop)
|
||||
Vue.use(scrollBoard)
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue