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

Merge branch 'pr/76' into dev

This commit is contained in:
jiaming743 2020-05-06 13:47:47 +08:00
parent c257ca6d9c 7799ef3dae
commit c98ca00179
7 changed files with 1207 additions and 1002 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1878
dist/datav.map.vue.js vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/datav.min.vue.js vendored
View File

File diff suppressed because one or more lines are too long

67
lib/components/activeRingChart/src/main.vue
View File

@ -28,7 +28,7 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -94,7 +94,13 @@ export default {
* @type {String} * @type {String}
* @default animationFrame = 50 * @default animationFrame = 50
*/ */
animationFrame: 50 animationFrame: 50,
/**
* @description CRender showOriginalValue
* @type {Boolean}
* @default showOriginalValue = false
*/
showOriginalValue: false
}, },
mergedConfig: null, mergedConfig: null,
@ -107,34 +113,47 @@ export default {
} }
}, },
computed: { computed: {
digitalFlop () { digitalFlop() {
const { mergedConfig, activeIndex } = this const { mergedConfig, activeIndex } = this
if (!mergedConfig) return {} if (!mergedConfig) return {}
const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig const {
digitalFlopStyle,
digitalFlopToFixed,
data,
showOriginalValue
} = mergedConfig
const value = data.map(({ value }) => value) const value = data.map(({ value }) => value)
const sum = value.reduce((all, v) => all + v, 0) let displayValue
const percent = parseFloat(value[activeIndex] / sum * 100) || 0 if (showOriginalValue) {
displayValue = value[activeIndex]
} else {
const sum = value.reduce((all, v) => all + v, 0)
const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
displayValue = percent
}
return { return {
content: '{nt}%', content: showOriginalValue ? '{nt}' : '{nt}%',
number: [percent], number: [displayValue],
style: digitalFlopStyle, style: digitalFlopStyle,
toFixed: digitalFlopToFixed toFixed: digitalFlopToFixed
} }
}, },
ringName () { ringName() {
const { mergedConfig, activeIndex } = this const { mergedConfig, activeIndex } = this
if (!mergedConfig) return '' if (!mergedConfig) return ''
return mergedConfig.data[activeIndex].name return mergedConfig.data[activeIndex].name
}, },
fontSize () { fontSize() {
const { mergedConfig } = this const { mergedConfig } = this
if (!mergedConfig) return '' if (!mergedConfig) return ''
@ -143,7 +162,7 @@ export default {
} }
}, },
watch: { watch: {
config () { config() {
const { animationHandler, mergeConfig, setRingOption } = this const { animationHandler, mergeConfig, setRingOption } = this
clearTimeout(animationHandler) clearTimeout(animationHandler)
@ -156,7 +175,7 @@ export default {
} }
}, },
methods: { methods: {
init () { init() {
const { initChart, mergeConfig, setRingOption } = this const { initChart, mergeConfig, setRingOption } = this
initChart() initChart()
@ -165,17 +184,20 @@ export default {
setRingOption() setRingOption()
}, },
initChart () { initChart() {
const { $refs } = this const { $refs } = this
this.chart = new Charts($refs['active-ring-chart']) this.chart = new Charts($refs['active-ring-chart'])
}, },
mergeConfig () { mergeConfig() {
const { defaultConfig, config } = this 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 { getRingOption, chart, ringAnimation } = this
const option = getRingOption() const option = getRingOption()
@ -184,7 +206,7 @@ export default {
ringAnimation() ringAnimation()
}, },
getRingOption () { getRingOption() {
const { mergedConfig, getRealRadius } = this const { mergedConfig, getRealRadius } = this
const radius = getRealRadius() const radius = getRealRadius()
@ -206,7 +228,7 @@ export default {
color: mergedConfig.color color: mergedConfig.color
} }
}, },
getRealRadius (active = false) { getRealRadius(active = false) {
const { mergedConfig, chart } = this const { mergedConfig, chart } = this
const { radius, activeRadius, lineWidth } = mergedConfig const { radius, activeRadius, lineWidth } = mergedConfig
@ -217,14 +239,15 @@ export default {
let realRadius = active ? activeRadius : radius 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 insideRadius = realRadius - halfLineWidth
const outSideRadius = realRadius + halfLineWidth const outSideRadius = realRadius + halfLineWidth
return [insideRadius, outSideRadius] return [insideRadius, outSideRadius]
}, },
ringAnimation () { ringAnimation() {
let { activeIndex, getRingOption, chart, getRealRadius } = this let { activeIndex, getRingOption, chart, getRealRadius } = this
const radius = getRealRadius() const radius = getRealRadius()
@ -257,12 +280,12 @@ export default {
}, activeTimeGap) }, activeTimeGap)
} }
}, },
mounted () { mounted() {
const { init } = this const { init } = this
init() init()
}, },
beforeDestroy () { beforeDestroy() {
const { animationHandler } = this const { animationHandler } = this
clearTimeout(animationHandler) clearTimeout(animationHandler)

17
lib/components/capsuleChart/src/main.css
View File

@ -32,18 +32,27 @@
border-radius: 5px; border-radius: 5px;
} }
.dv-capsule-chart .capsule-item div { .dv-capsule-chart .capsule-item div {
position: relative;
height: 8px; height: 8px;
margin-top: 1px; margin-top: 1px;
border-radius: 5px; border-radius: 5px;
transition: all 0.3s; transition: all 0.3s;
} }
.dv-capsule-chart .capsule-item div .capsule-item-val {
position: absolute;
top: -5px;
font-size: 12px;
}
.dv-capsule-chart .unit-label { .dv-capsule-chart .unit-label {
height: 20px; height: 20px;
font-size: 12px; font-size: 12px;
display: flex; position: relative;
flex-direction: row; }
align-items: center; .dv-capsule-chart .unit-label:not(:first-child) {
justify-content: space-between; text-align: right;
}
.dv-capsule-chart .unit-label div {
position: absolute;
} }
.dv-capsule-chart .unit-text { .dv-capsule-chart .unit-text {
text-align: right; text-align: right;

79
lib/components/capsuleChart/src/main.vue
View File

@ -7,16 +7,24 @@
</div> </div>
<div class="capsule-container"> <div class="capsule-container">
<div <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
class="capsule-item" <div
v-for="(capsule, index) in capsuleLength" :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
:key="index" >
> <span
<div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div> v-if="mergedConfig.showVal"
class="capsule-item-val"
:style="`right:-${`${capsuleValue[index]}`.length * 7}px`"
>{{ capsuleValue[index] }}</span>
</div>
</div> </div>
<div class="unit-label"> <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"
:style="calcUnitLabelStyle(index)"
>{{ label }}</div>
</div> </div>
</div> </div>
@ -38,7 +46,7 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -54,42 +62,56 @@ export default {
* @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'] * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red'] * @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 * @description Chart unit
* @type {String} * @type {String}
* @default unit = '' * @default unit = ''
*/ */
unit: '' unit: '',
showVal: false
}, },
mergedConfig: null, mergedConfig: null,
capsuleLength: [], capsuleLength: [],
labelData: [] capsuleValue: [],
labelData: [],
labelDataLength: []
} }
}, },
watch: { watch: {
config () { config() {
const { calcData } = this const { calcData } = this
calcData() calcData()
} }
}, },
methods: { methods: {
calcData () { calcData() {
const { mergeConfig, calcCapsuleLengthAndLabelData } = this const { mergeConfig, calcCapsuleLengthAndLabelData } = this
mergeConfig() mergeConfig()
calcCapsuleLengthAndLabelData() calcCapsuleLengthAndLabelData()
}, },
mergeConfig () { mergeConfig() {
let { config, defaultConfig } = this let { config, defaultConfig } = this
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {}) this.mergedConfig = deepMerge(
deepClone(defaultConfig, true),
config || {}
)
}, },
calcCapsuleLengthAndLabelData () { calcCapsuleLengthAndLabelData() {
const { data } = this.mergedConfig const { data } = this.mergedConfig
if (!data.length) return if (!data.length) return
@ -98,14 +120,33 @@ export default {
const maxValue = Math.max(...capsuleValue) const maxValue = Math.max(...capsuleValue)
this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0) this.capsuleValue = capsuleValue
this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
const oneFifth = maxValue / 5 const oneFifth = maxValue / 5
this.labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))) 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
)
},
/**
* 计算x轴label位置
*/
calcUnitLabelStyle(index) {
if (this.labelData.length - 1 === index) {
return `right: 0;`
}
return `left: ${this.labelDataLength[index] * 100}%;`
} }
}, },
mounted () { mounted() {
const { calcData } = this const { calcData } = this
calcData() calcData()

67
src/components/activeRingChart/src/main.vue
View File

@ -28,7 +28,7 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -94,7 +94,13 @@ export default {
* @type {String} * @type {String}
* @default animationFrame = 50 * @default animationFrame = 50
*/ */
animationFrame: 50 animationFrame: 50,
/**
* @description CRender showOriginalValue
* @type {Boolean}
* @default showOriginalValue = false
*/
showOriginalValue: false
}, },
mergedConfig: null, mergedConfig: null,
@ -107,34 +113,47 @@ export default {
} }
}, },
computed: { computed: {
digitalFlop () { digitalFlop() {
const { mergedConfig, activeIndex } = this const { mergedConfig, activeIndex } = this
if (!mergedConfig) return {} if (!mergedConfig) return {}
const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig const {
digitalFlopStyle,
digitalFlopToFixed,
data,
showOriginalValue
} = mergedConfig
const value = data.map(({ value }) => value) const value = data.map(({ value }) => value)
const sum = value.reduce((all, v) => all + v, 0) let displayValue
const percent = parseFloat(value[activeIndex] / sum * 100) || 0 if (showOriginalValue) {
displayValue = value[activeIndex]
} else {
const sum = value.reduce((all, v) => all + v, 0)
const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
displayValue = percent
}
return { return {
content: '{nt}%', content: showOriginalValue ? '{nt}' : '{nt}%',
number: [percent], number: [displayValue],
style: digitalFlopStyle, style: digitalFlopStyle,
toFixed: digitalFlopToFixed toFixed: digitalFlopToFixed
} }
}, },
ringName () { ringName() {
const { mergedConfig, activeIndex } = this const { mergedConfig, activeIndex } = this
if (!mergedConfig) return '' if (!mergedConfig) return ''
return mergedConfig.data[activeIndex].name return mergedConfig.data[activeIndex].name
}, },
fontSize () { fontSize() {
const { mergedConfig } = this const { mergedConfig } = this
if (!mergedConfig) return '' if (!mergedConfig) return ''
@ -143,7 +162,7 @@ export default {
} }
}, },
watch: { watch: {
config () { config() {
const { animationHandler, mergeConfig, setRingOption } = this const { animationHandler, mergeConfig, setRingOption } = this
clearTimeout(animationHandler) clearTimeout(animationHandler)
@ -156,7 +175,7 @@ export default {
} }
}, },
methods: { methods: {
init () { init() {
const { initChart, mergeConfig, setRingOption } = this const { initChart, mergeConfig, setRingOption } = this
initChart() initChart()
@ -165,17 +184,20 @@ export default {
setRingOption() setRingOption()
}, },
initChart () { initChart() {
const { $refs } = this const { $refs } = this
this.chart = new Charts($refs['active-ring-chart']) this.chart = new Charts($refs['active-ring-chart'])
}, },
mergeConfig () { mergeConfig() {
const { defaultConfig, config } = this 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 { getRingOption, chart, ringAnimation } = this
const option = getRingOption() const option = getRingOption()
@ -184,7 +206,7 @@ export default {
ringAnimation() ringAnimation()
}, },
getRingOption () { getRingOption() {
const { mergedConfig, getRealRadius } = this const { mergedConfig, getRealRadius } = this
const radius = getRealRadius() const radius = getRealRadius()
@ -206,7 +228,7 @@ export default {
color: mergedConfig.color color: mergedConfig.color
} }
}, },
getRealRadius (active = false) { getRealRadius(active = false) {
const { mergedConfig, chart } = this const { mergedConfig, chart } = this
const { radius, activeRadius, lineWidth } = mergedConfig const { radius, activeRadius, lineWidth } = mergedConfig
@ -217,14 +239,15 @@ export default {
let realRadius = active ? activeRadius : radius 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 insideRadius = realRadius - halfLineWidth
const outSideRadius = realRadius + halfLineWidth const outSideRadius = realRadius + halfLineWidth
return [insideRadius, outSideRadius] return [insideRadius, outSideRadius]
}, },
ringAnimation () { ringAnimation() {
let { activeIndex, getRingOption, chart, getRealRadius } = this let { activeIndex, getRingOption, chart, getRealRadius } = this
const radius = getRealRadius() const radius = getRealRadius()
@ -257,12 +280,12 @@ export default {
}, activeTimeGap) }, activeTimeGap)
} }
}, },
mounted () { mounted() {
const { init } = this const { init } = this
init() init()
}, },
beforeDestroy () { beforeDestroy() {
const { animationHandler } = this const { animationHandler } = this
clearTimeout(animationHandler) clearTimeout(animationHandler)

99
src/components/capsuleChart/src/main.vue
View File

@ -7,16 +7,24 @@
</div> </div>
<div class="capsule-container"> <div class="capsule-container">
<div <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
class="capsule-item" <div
v-for="(capsule, index) in capsuleLength" :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
:key="index" >
> <span
<div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div> v-if="mergedConfig.showVal"
class="capsule-item-val"
:style="`right:-${`${capsuleValue[index]}`.length * 7}px`"
>{{ capsuleValue[index] }}</span>
</div>
</div> </div>
<div class="unit-label"> <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"
:style="calcUnitLabelStyle(index)"
>{{ label }}</div>
</div> </div>
</div> </div>
@ -38,7 +46,7 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -54,42 +62,56 @@ export default {
* @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'] * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red'] * @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 * @description Chart unit
* @type {String} * @type {String}
* @default unit = '' * @default unit = ''
*/ */
unit: '' unit: '',
showVal: false
}, },
mergedConfig: null, mergedConfig: null,
capsuleLength: [], capsuleLength: [],
labelData: [] capsuleValue: [],
labelData: [],
labelDataLength: []
} }
}, },
watch: { watch: {
config () { config() {
const { calcData } = this const { calcData } = this
calcData() calcData()
} }
}, },
methods: { methods: {
calcData () { calcData() {
const { mergeConfig, calcCapsuleLengthAndLabelData } = this const { mergeConfig, calcCapsuleLengthAndLabelData } = this
mergeConfig() mergeConfig()
calcCapsuleLengthAndLabelData() calcCapsuleLengthAndLabelData()
}, },
mergeConfig () { mergeConfig() {
let { config, defaultConfig } = this let { config, defaultConfig } = this
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {}) this.mergedConfig = deepMerge(
deepClone(defaultConfig, true),
config || {}
)
}, },
calcCapsuleLengthAndLabelData () { calcCapsuleLengthAndLabelData() {
const { data } = this.mergedConfig const { data } = this.mergedConfig
if (!data.length) return if (!data.length) return
@ -98,14 +120,33 @@ export default {
const maxValue = Math.max(...capsuleValue) const maxValue = Math.max(...capsuleValue)
this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0) this.capsuleValue = capsuleValue
this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
const oneFifth = maxValue / 5 const oneFifth = maxValue / 5
this.labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))) 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
)
},
/**
* 计算x轴label位置
*/
calcUnitLabelStyle(index) {
if (this.labelData.length - 1 === index) {
return `right: 0;`
}
return `left: ${this.labelDataLength[index] * 100}%;`
} }
}, },
mounted () { mounted() {
const { calcData } = this const { calcData } = this
calcData() calcData()
@ -151,20 +192,32 @@ export default {
border-radius: 5px; border-radius: 5px;
div { div {
position: relative;
height: 8px; height: 8px;
margin-top: 1px; margin-top: 1px;
border-radius: 5px; border-radius: 5px;
transition: all 0.3s; transition: all 0.3s;
.capsule-item-val {
position: absolute;
top: -5px;
font-size: 12px;
}
} }
} }
.unit-label { .unit-label {
height: 20px; height: 20px;
font-size: 12px; font-size: 12px;
display: flex; position: relative;
flex-direction: row;
align-items: center; &:not(:first-child) {
justify-content: space-between; text-align: right;
}
div {
position: absolute;
}
} }
.unit-text { .unit-text {