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

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

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

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

@ -7,16 +7,24 @@
</div>
<div class="capsule-container">
<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 class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
<div
:style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
>
<span
v-if="mergedConfig.showVal"
class="capsule-item-val"
:style="`right:-${`${capsuleValue[index]}`.length * 7}px`"
>{{ capsuleValue[index] }}</span>
</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"
:style="calcUnitLabelStyle(index)"
>{{ label }}</div>
</div>
</div>
@ -38,7 +46,7 @@ export default {
default: () => ({})
}
},
data () {
data() {
return {
defaultConfig: {
/**
@ -54,42 +62,56 @@ 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: ''
unit: '',
showVal: false
},
mergedConfig: null,
capsuleLength: [],
labelData: []
capsuleValue: [],
labelData: [],
labelDataLength: []
}
},
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
@ -98,14 +120,33 @@ export default {
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
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
calcData()

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

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

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

@ -7,16 +7,24 @@
</div>
<div class="capsule-container">
<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 class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
<div
:style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
>
<span
v-if="mergedConfig.showVal"
class="capsule-item-val"
:style="`right:-${`${capsuleValue[index]}`.length * 7}px`"
>{{ capsuleValue[index] }}</span>
</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"
:style="calcUnitLabelStyle(index)"
>{{ label }}</div>
</div>
</div>
@ -38,7 +46,7 @@ export default {
default: () => ({})
}
},
data () {
data() {
return {
defaultConfig: {
/**
@ -54,42 +62,56 @@ 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: ''
unit: '',
showVal: false
},
mergedConfig: null,
capsuleLength: [],
labelData: []
capsuleValue: [],
labelData: [],
labelDataLength: []
}
},
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
@ -98,14 +120,33 @@ export default {
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
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
calcData()
@ -151,20 +192,32 @@ export default {
border-radius: 5px;
div {
position: relative;
height: 8px;
margin-top: 1px;
border-radius: 5px;
transition: all 0.3s;
.capsule-item-val {
position: absolute;
top: -5px;
font-size: 12px;
}
}
}
.unit-label {
height: 20px;
font-size: 12px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
&:not(:first-child) {
text-align: right;
}
div {
position: absolute;
}
}
.unit-text {