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

1.add showVal prop; 

2.optimize unit-label child style;
This commit is contained in:
costa 2020-04-27 18:19:20 +08:00
parent be410da013
commit 57b6c726eb
5 changed files with 1312 additions and 964 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2009
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

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

@ -37,13 +37,21 @@
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;

115
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>
@ -26,19 +34,19 @@
</template> </template>
<script> <script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index' import { deepMerge } from "@jiaminghi/charts/lib/util/index";
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util' import { deepClone } from "@jiaminghi/c-render/lib/plugin/util";
export default { export default {
name: 'DvCapsuleChart', name: "DvCapsuleChart",
props: { props: {
config: { config: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -54,61 +62,94 @@ 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;
const capsuleValue = data.map(({ value }) => value) const capsuleValue = data.map(({ value }) => value);
const maxValue = Math.max(...capsuleValue) const maxValue = Math.max(...capsuleValue);
this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0) this.capsuleValue = capsuleValue;
const oneFifth = maxValue / 5 this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0));
this.labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))) 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
);
},
/**
* 计算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();
} }
} };
</script> </script>

134
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>
@ -26,19 +34,19 @@
</template> </template>
<script> <script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index' import { deepMerge } from "@jiaminghi/charts/lib/util/index";
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util' import { deepClone } from "@jiaminghi/c-render/lib/plugin/util";
export default { export default {
name: 'DvCapsuleChart', name: "DvCapsuleChart",
props: { props: {
config: { config: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -54,63 +62,96 @@ 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;
const capsuleValue = data.map(({ value }) => value) const capsuleValue = data.map(({ value }) => value);
const maxValue = Math.max(...capsuleValue) const maxValue = Math.max(...capsuleValue);
this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0) this.capsuleValue = capsuleValue;
const oneFifth = maxValue / 5 this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0));
this.labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))) 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
);
},
/**
* 计算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();
} }
} };
</script> </script>
<style lang="less"> <style lang="less">
@ -155,16 +196,27 @@ export default {
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 {