1.add showVal prop;
2.optimize unit-label child style;
This commit is contained in:
costa committed
1 parent
be410da013
commit
57b6c726eb
5 files changed
+1312
-964
No files matched your search
Vendored
+1128
-881
File diff suppressed because it is too large.
Load diff
Vendored
+1
-1
@@ -1 +1 @@
|
|||||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e=e||self).Vue)}(this,(function(e){"use strict";function t(e,t){return 1===arguments.length?parseInt(Math.random()*e+1,10):parseInt(Math.random()*(t-e+1)+e,10)}function n(e,t){const n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var r={data:()=>({dom:"",width:0,height:0,debounceInitWHFun:"",domObserver:""}),methods:{async autoResizeMixinInit(){const{initWH:e,getDebounceInitWHFun:t,bindDomResizeCallback:n,afterAutoResizeMixinInit:r}=this;await e(!1),t(),n(),"function"==typeof r&&r()},initWH(e=!0){const{$nextTick:t,$refs:n,ref:r,onResize:i}=this;return new Promise(o=>{t(t=>{const a=this.dom=n[r];this.width=a.clientWidth,this.height=a.clientHeight,"function"==typeof i&&e&&i(),o()})})},getDebounceInitWHFun(){const{initWH:e}=this;this.debounceInitWHFun=function(e,t){let n;return function(){clearTimeout(n);const[r,i]=[this,arguments];n=setTimeout(()=>{t.apply(r,i)},e)}}(100,e)},bindDomResizeCallback(){const{dom:e,debounceInitWHFun:t}=this;this.domObserver=function(e,t){const n=new(window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver)(t);return n.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),n}(e,t),window.addEventListener("resize",t)},unbindDomResizeCallback(){let{domObserver:e,debounceInitWHFun:t}=this;e.disconnect(),e.takeRecords(),e=null,window.removeEventListener("resize",t)}},mounted(){const{autoResizeMixinInit:e}=this;e()},beforeDestroy(){const{unbindDomResizeCallback:e}=this;e()}},i={name:"DvFullScreenContainer",mixins:[r],data:()=>({ref:"full-screen-container",allWidth:0,scale:0,datavRoot:"",ready:!1}),methods:{afterAutoResizeMixinInit(){const{initConfig:e,setAppScale:t}=this;e(),t(),this.ready=!0},initConfig(){const{dom:e}=this,{width:t,height:n}=screen;this.allWidth=t,e.style.width=`${t}px`,e.style.height=`${n}px`},setAppScale(){const{allWidth:e,dom:t}=this,n=document.body.clientWidth;t.style.transform=`scale(${n/e})`},onResize(){const{setAppScale:e}=this;e()}}};var o,a=function(e,t,n,r,i,o,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);var c,u="function"==typeof n?n.options:n;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,i&&(u.functional=!0)),r&&(u._scopeId=r),o?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=c):t&&(c=a?function(){t.call(this,d(this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),c)if(u.functional){var h=u.render;u.render=function(e,t){return c.call(t),h(e,t)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,c):[c]}return n},s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var l={};var d=function(e){return function(e,t){return function(e,t){var n=s?t.media||"default":e,r=l[n]||(l[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);var i=t.source;if(t.map&&(i+="\n/*# sourceURL="+t.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(i),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{var a=r.ids.size-1,d=document.createTextNode(i),c=r.element.childNodes;c[a]&&r.element.removeChild(c[a]),c.length?r.element.insertBefore(d,c[a]):r.element.appendChild(d)}}}(e,t)}};const c=i;var u=function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:this.ref,attrs:{id:"dv-full-screen-container"}},[this.ready?[this._t("default")]:this._e()],2)};u._withStripped=!0;var h=a({render:u,staticRenderFns:[]},(function(e){e&&e("data-v-2da16e2c_0",{source:"#dv-full-screen-container {\n position: fixed;\n top: 0px;\n left: 0px;\n overflow: hidden;\n transform-origin: left top;\n z-index: 999;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd",file:"main.vue",sourcesContent:["#dv-full-screen-container {\n position: fixed;\n top: 0px;\n left: 0px;\n overflow: hidden;\n transform-origin: left top;\n z-index: 999;\n}\n"]},media:void 0})}),c,void 0,!1,void 0,d,void 0);function f(e){e.component(h.name,h)}const p={name:"DvLoading"};var g=function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"dv-loading"},[t("svg",{attrs:{width:"50px",height:"50px"}},[t("circle",{attrs:{cx:"25",cy:"25",r:"Line truncated
|
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e=e||self).Vue)}(this,(function(e){"use strict";function t(e,t){return 1===arguments.length?parseInt(Math.random()*e+1,10):parseInt(Math.random()*(t-e+1)+e,10)}function n(e,t){const n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var r={data:()=>({dom:"",width:0,height:0,debounceInitWHFun:"",domObserver:""}),methods:{async autoResizeMixinInit(){const{initWH:e,getDebounceInitWHFun:t,bindDomResizeCallback:n,afterAutoResizeMixinInit:r}=this;await e(!1),t(),n(),"function"==typeof r&&r()},initWH(e=!0){const{$nextTick:t,$refs:n,ref:r,onResize:i}=this;return new Promise(o=>{t(t=>{const a=this.dom=n[r];this.width=a.clientWidth,this.height=a.clientHeight,"function"==typeof i&&e&&i(),o()})})},getDebounceInitWHFun(){const{initWH:e}=this;this.debounceInitWHFun=function(e,t){let n;return function(){clearTimeout(n);const[r,i]=[this,arguments];n=setTimeout(()=>{t.apply(r,i)},e)}}(100,e)},bindDomResizeCallback(){const{dom:e,debounceInitWHFun:t}=this;this.domObserver=function(e,t){const n=new(window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver)(t);return n.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),n}(e,t),window.addEventListener("resize",t)},unbindDomResizeCallback(){let{domObserver:e,debounceInitWHFun:t}=this;e.disconnect(),e.takeRecords(),e=null,window.removeEventListener("resize",t)}},mounted(){const{autoResizeMixinInit:e}=this;e()},beforeDestroy(){const{unbindDomResizeCallback:e}=this;e()}},i={name:"DvFullScreenContainer",mixins:[r],data:()=>({ref:"full-screen-container",allWidth:0,scale:0,datavRoot:"",ready:!1}),methods:{afterAutoResizeMixinInit(){const{initConfig:e,setAppScale:t}=this;e(),t(),this.ready=!0},initConfig(){const{dom:e}=this,{width:t,height:n}=screen;this.allWidth=t,e.style.width=t+"px",e.style.height=n+"px"},setAppScale(){const{allWidth:e,dom:t}=this,n=document.body.clientWidth;t.style.transform=`scale(${n/e})`},onResize(){const{setAppScale:e}=this;e()}}};function o(e,t,n,r,i,o,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(e){return(e,t)=>function(e,t){const n=a?t.media||"default":e,r=d[n]||(d[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===l&&(l=document.head||document.getElementsByTagName("head")[0]),l.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,t=document.createTextNode(n),i=r.element.childNodes;i[e]&&r.element.removeChild(i[e]),i.length?r.element.insertBefore(t,i[e]):r.element.appendChild(t)}}}(e,t)}let l;const d={};const c=i;var u=function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:this.ref,attrs:{id:"dv-full-screen-container"}},[this.ready?[this._t("default")]:this._e()],2)};u._withStripped=!0;const h=o({render:u,staticRenderFns:[]},(function(e){e&&e("data-v-9d83bcfc_0",{source:"#dv-full-screen-container {\n position: fixed;\n top: 0px;\n left: 0px;\n overflow: hidden;\n transform-origin: left top;\n z-index: 999;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd",file:"main.vue",sourcesContent:["#dv-full-screen-container {\n position: fixed;\n top: 0px;\n left: 0px;\n overflow: hidden;\n transform-origin: left top;\n z-index: 999;\n}\n"]},media:void 0})}),c,void 0,!1,void 0,!1,s,void 0,void 0);function f(e){e.component(h.name,h)}const p={name:"DvLoading"};var g=function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"dv-loading"},[t("svg",{attrs:{width:"50px",height:"50px"}},[t("circle",{attrs:{cx:"25",Line truncated
|
||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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 {
|
||||||
|
|||||||
Reference in new issue
Block a user