active-ring-chart add showOriginalValue
This commit is contained in:
costa committed
1 parent
57b6c726eb
commit
fdd1e243a7
4 files changed
+240
-178
No files matched your search
Vendored
+33
-17
@@ -19664,7 +19664,7 @@
|
||||
|
||||
//
|
||||
var script$s = {
|
||||
name: 'DvActiveRingChart',
|
||||
name: "DvActiveRingChart",
|
||||
components: {
|
||||
dvDigitalFlop: __vue_component__$r
|
||||
},
|
||||
@@ -19684,7 +19684,7 @@
|
||||
* @default radius = '50%'
|
||||
* @example radius = '50%' | 100
|
||||
*/
|
||||
radius: '50%',
|
||||
radius: "50%",
|
||||
|
||||
/**
|
||||
* @description Active ring radius
|
||||
@@ -19692,7 +19692,7 @@
|
||||
* @default activeRadius = '55%'
|
||||
* @example activeRadius = '55%' | 110
|
||||
*/
|
||||
activeRadius: '55%',
|
||||
activeRadius: "55%",
|
||||
|
||||
/**
|
||||
* @description Ring data
|
||||
@@ -19700,7 +19700,7 @@
|
||||
* @default data = [{ name: '', value: 0 }]
|
||||
*/
|
||||
data: [{
|
||||
name: '',
|
||||
name: "",
|
||||
value: 0
|
||||
}],
|
||||
|
||||
@@ -19732,7 +19732,7 @@
|
||||
*/
|
||||
digitalFlopStyle: {
|
||||
fontSize: 25,
|
||||
fill: '#fff'
|
||||
fill: "#fff"
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -19746,19 +19746,26 @@
|
||||
* @type {String}
|
||||
* @default animationCurve = 'easeOutCubic'
|
||||
*/
|
||||
animationCurve: 'easeOutCubic',
|
||||
animationCurve: "easeOutCubic",
|
||||
|
||||
/**
|
||||
* @description CRender animationFrame
|
||||
* @type {String}
|
||||
* @default animationFrame = 50
|
||||
*/
|
||||
animationFrame: 50
|
||||
animationFrame: 50,
|
||||
|
||||
/**
|
||||
* @description CRender showOriginalValue
|
||||
* @type {Boolean}
|
||||
* @default showOriginalValue = false
|
||||
*/
|
||||
showOriginalValue: false
|
||||
},
|
||||
mergedConfig: null,
|
||||
chart: null,
|
||||
activeIndex: 0,
|
||||
animationHandler: ''
|
||||
animationHandler: ""
|
||||
};
|
||||
},
|
||||
|
||||
@@ -19772,16 +19779,25 @@
|
||||
const {
|
||||
digitalFlopStyle,
|
||||
digitalFlopToFixed,
|
||||
data
|
||||
data,
|
||||
showOriginalValue
|
||||
} = mergedConfig;
|
||||
const value = data.map(({
|
||||
value
|
||||
}) => value);
|
||||
let displayValue;
|
||||
|
||||
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
|
||||
};
|
||||
@@ -19792,7 +19808,7 @@
|
||||
mergedConfig,
|
||||
activeIndex
|
||||
} = this;
|
||||
if (!mergedConfig) return '';
|
||||
if (!mergedConfig) return "";
|
||||
return mergedConfig.data[activeIndex].name;
|
||||
},
|
||||
|
||||
@@ -19800,7 +19816,7 @@
|
||||
const {
|
||||
mergedConfig
|
||||
} = this;
|
||||
if (!mergedConfig) return '';
|
||||
if (!mergedConfig) return "";
|
||||
return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`;
|
||||
}
|
||||
|
||||
@@ -19835,7 +19851,7 @@
|
||||
const {
|
||||
$refs
|
||||
} = this;
|
||||
this.chart = new Charts($refs['active-ring-chart']);
|
||||
this.chart = new Charts($refs["active-ring-chart"]);
|
||||
},
|
||||
|
||||
mergeConfig() {
|
||||
@@ -19868,7 +19884,7 @@
|
||||
});
|
||||
return {
|
||||
series: [{
|
||||
type: 'pie',
|
||||
type: "pie",
|
||||
...mergedConfig,
|
||||
outsideLabel: {
|
||||
show: false
|
||||
@@ -19891,7 +19907,7 @@
|
||||
const maxRadius = Math.min(...chart.render.area) / 2;
|
||||
const halfLineWidth = lineWidth / 2;
|
||||
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];
|
||||
@@ -19981,7 +19997,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$s = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-5ae6468a_0", { source: ".dv-active-ring-chart {\n position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n width: 100%;\n height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n width: 100px;\n height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n width: 100px;\n height: 30px;\n color: #fff;\n text-align: center;\n vertical-align: middle;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;AACrB;AACA;EACE,YAAY;EACZ,YAAY;AACd;AACA;EACE,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;EAChB,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-active-ring-chart {\n position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n width: 100%;\n height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n width: 100px;\n height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n width: 100px;\n height: 30px;\n color: #fff;\n text-align: center;\n vertical-align: middle;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n"]}, media: undefined });
|
||||
inject("data-v-51d776c6_0", { source: ".dv-active-ring-chart {\n position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n width: 100%;\n height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n width: 100px;\n height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n width: 100px;\n height: 30px;\n color: #fff;\n text-align: center;\n vertical-align: middle;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;AACrB;AACA;EACE,YAAY;EACZ,YAAY;AACd;AACA;EACE,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;EAChB,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-active-ring-chart {\n position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n width: 100%;\n height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n width: 100px;\n height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n width: 100px;\n height: 30px;\n color: #fff;\n text-align: center;\n vertical-align: middle;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
|
||||
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()}}};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
|
||||
!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
|
||||
@@ -9,16 +9,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Charts from '@jiaminghi/charts'
|
||||
import Charts from "@jiaminghi/charts";
|
||||
|
||||
import dvDigitalFlop from '../../digitalFlop/src/main.vue'
|
||||
import dvDigitalFlop from "../../digitalFlop/src/main.vue";
|
||||
|
||||
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 {
|
||||
name: 'DvActiveRingChart',
|
||||
name: "DvActiveRingChart",
|
||||
components: {
|
||||
dvDigitalFlop
|
||||
},
|
||||
@@ -37,20 +37,20 @@ export default {
|
||||
* @default radius = '50%'
|
||||
* @example radius = '50%' | 100
|
||||
*/
|
||||
radius: '50%',
|
||||
radius: "50%",
|
||||
/**
|
||||
* @description Active ring radius
|
||||
* @type {String|Number}
|
||||
* @default activeRadius = '55%'
|
||||
* @example activeRadius = '55%' | 110
|
||||
*/
|
||||
activeRadius: '55%',
|
||||
activeRadius: "55%",
|
||||
/**
|
||||
* @description Ring data
|
||||
* @type {Array<Object>}
|
||||
* @default data = [{ name: '', value: 0 }]
|
||||
*/
|
||||
data: [{ name: '', value: 0 }],
|
||||
data: [{ name: "", value: 0 }],
|
||||
/**
|
||||
* @description Ring line width
|
||||
* @type {Number}
|
||||
@@ -76,7 +76,7 @@ export default {
|
||||
*/
|
||||
digitalFlopStyle: {
|
||||
fontSize: 25,
|
||||
fill: '#fff'
|
||||
fill: "#fff"
|
||||
},
|
||||
/**
|
||||
* @description Digital flop toFixed
|
||||
@@ -88,13 +88,19 @@ export default {
|
||||
* @type {String}
|
||||
* @default animationCurve = 'easeOutCubic'
|
||||
*/
|
||||
animationCurve: 'easeOutCubic',
|
||||
animationCurve: "easeOutCubic",
|
||||
/**
|
||||
* @description CRender animationFrame
|
||||
* @type {String}
|
||||
* @default animationFrame = 50
|
||||
*/
|
||||
animationFrame: 50
|
||||
animationFrame: 50,
|
||||
/**
|
||||
* @description CRender showOriginalValue
|
||||
* @type {Boolean}
|
||||
* @default showOriginalValue = false
|
||||
*/
|
||||
showOriginalValue: false
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
@@ -103,100 +109,116 @@ export default {
|
||||
|
||||
activeIndex: 0,
|
||||
|
||||
animationHandler: ''
|
||||
}
|
||||
animationHandler: ""
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
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 {
|
||||
content: '{nt}%',
|
||||
number: [percent],
|
||||
content: showOriginalValue ? "{nt}" : "{nt}%",
|
||||
number: [displayValue],
|
||||
style: digitalFlopStyle,
|
||||
toFixed: digitalFlopToFixed
|
||||
}
|
||||
};
|
||||
},
|
||||
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() {
|
||||
const { mergedConfig } = this
|
||||
const { mergedConfig } = this;
|
||||
|
||||
if (!mergedConfig) return ''
|
||||
if (!mergedConfig) return "";
|
||||
|
||||
return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`
|
||||
return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config() {
|
||||
const { animationHandler, mergeConfig, setRingOption } = this
|
||||
const { animationHandler, mergeConfig, setRingOption } = this;
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
clearTimeout(animationHandler);
|
||||
|
||||
this.activeIndex = 0
|
||||
this.activeIndex = 0;
|
||||
|
||||
mergeConfig()
|
||||
mergeConfig();
|
||||
|
||||
setRingOption()
|
||||
setRingOption();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const { initChart, mergeConfig, setRingOption } = this
|
||||
const { initChart, mergeConfig, setRingOption } = this;
|
||||
|
||||
initChart()
|
||||
initChart();
|
||||
|
||||
mergeConfig()
|
||||
mergeConfig();
|
||||
|
||||
setRingOption()
|
||||
setRingOption();
|
||||
},
|
||||
initChart() {
|
||||
const { $refs } = this
|
||||
const { $refs } = this;
|
||||
|
||||
this.chart = new Charts($refs['active-ring-chart'])
|
||||
this.chart = new Charts($refs["active-ring-chart"]);
|
||||
},
|
||||
mergeConfig() {
|
||||
const { defaultConfig, config } = this
|
||||
const { defaultConfig, config } = this;
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
);
|
||||
},
|
||||
setRingOption() {
|
||||
const { getRingOption, chart, ringAnimation } = this
|
||||
const { getRingOption, chart, ringAnimation } = this;
|
||||
|
||||
const option = getRingOption()
|
||||
const option = getRingOption();
|
||||
|
||||
chart.setOption(option, true)
|
||||
chart.setOption(option, true);
|
||||
|
||||
ringAnimation()
|
||||
ringAnimation();
|
||||
},
|
||||
getRingOption() {
|
||||
const { mergedConfig, getRealRadius } = this
|
||||
const { mergedConfig, getRealRadius } = this;
|
||||
|
||||
const radius = getRealRadius()
|
||||
const radius = getRealRadius();
|
||||
|
||||
mergedConfig.data.forEach(dataItem => {
|
||||
dataItem.radius = radius
|
||||
})
|
||||
dataItem.radius = radius;
|
||||
});
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
type: "pie",
|
||||
...mergedConfig,
|
||||
outsideLabel: {
|
||||
show: false
|
||||
@@ -204,68 +226,69 @@ export default {
|
||||
}
|
||||
],
|
||||
color: mergedConfig.color
|
||||
}
|
||||
};
|
||||
},
|
||||
getRealRadius(active = false) {
|
||||
const { mergedConfig, chart } = this
|
||||
const { mergedConfig, chart } = this;
|
||||
|
||||
const { radius, activeRadius, lineWidth } = mergedConfig
|
||||
const { radius, activeRadius, lineWidth } = mergedConfig;
|
||||
|
||||
const maxRadius = Math.min(...chart.render.area) / 2
|
||||
const maxRadius = Math.min(...chart.render.area) / 2;
|
||||
|
||||
const halfLineWidth = lineWidth / 2
|
||||
const halfLineWidth = lineWidth / 2;
|
||||
|
||||
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 outSideRadius = realRadius + halfLineWidth
|
||||
const insideRadius = realRadius - halfLineWidth;
|
||||
const outSideRadius = realRadius + halfLineWidth;
|
||||
|
||||
return [insideRadius, outSideRadius]
|
||||
return [insideRadius, outSideRadius];
|
||||
},
|
||||
ringAnimation() {
|
||||
let { activeIndex, getRingOption, chart, getRealRadius } = this
|
||||
let { activeIndex, getRingOption, chart, getRealRadius } = this;
|
||||
|
||||
const radius = getRealRadius()
|
||||
const active = getRealRadius(true)
|
||||
const radius = getRealRadius();
|
||||
const active = getRealRadius(true);
|
||||
|
||||
const option = getRingOption()
|
||||
const option = getRingOption();
|
||||
|
||||
const { data } = option.series[0]
|
||||
const { data } = option.series[0];
|
||||
|
||||
data.forEach((dataItem, i) => {
|
||||
if (i === activeIndex) {
|
||||
dataItem.radius = active
|
||||
dataItem.radius = active;
|
||||
} else {
|
||||
dataItem.radius = radius
|
||||
dataItem.radius = radius;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
chart.setOption(option, true)
|
||||
chart.setOption(option, true);
|
||||
|
||||
const { activeTimeGap } = option.series[0]
|
||||
const { activeTimeGap } = option.series[0];
|
||||
|
||||
this.animationHandler = setTimeout(foo => {
|
||||
activeIndex += 1
|
||||
activeIndex += 1;
|
||||
|
||||
if (activeIndex >= data.length) activeIndex = 0
|
||||
if (activeIndex >= data.length) activeIndex = 0;
|
||||
|
||||
this.activeIndex = activeIndex
|
||||
this.activeIndex = activeIndex;
|
||||
|
||||
this.ringAnimation()
|
||||
}, activeTimeGap)
|
||||
this.ringAnimation();
|
||||
}, activeTimeGap);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const { init } = this
|
||||
const { init } = this;
|
||||
|
||||
init()
|
||||
init();
|
||||
},
|
||||
beforeDestroy() {
|
||||
const { animationHandler } = this
|
||||
const { animationHandler } = this;
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
}
|
||||
clearTimeout(animationHandler);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -9,16 +9,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Charts from '@jiaminghi/charts'
|
||||
import Charts from "@jiaminghi/charts";
|
||||
|
||||
import dvDigitalFlop from '../../digitalFlop/src/main.vue'
|
||||
import dvDigitalFlop from "../../digitalFlop/src/main.vue";
|
||||
|
||||
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 {
|
||||
name: 'DvActiveRingChart',
|
||||
name: "DvActiveRingChart",
|
||||
components: {
|
||||
dvDigitalFlop
|
||||
},
|
||||
@@ -37,20 +37,20 @@ export default {
|
||||
* @default radius = '50%'
|
||||
* @example radius = '50%' | 100
|
||||
*/
|
||||
radius: '50%',
|
||||
radius: "50%",
|
||||
/**
|
||||
* @description Active ring radius
|
||||
* @type {String|Number}
|
||||
* @default activeRadius = '55%'
|
||||
* @example activeRadius = '55%' | 110
|
||||
*/
|
||||
activeRadius: '55%',
|
||||
activeRadius: "55%",
|
||||
/**
|
||||
* @description Ring data
|
||||
* @type {Array<Object>}
|
||||
* @default data = [{ name: '', value: 0 }]
|
||||
*/
|
||||
data: [{ name: '', value: 0 }],
|
||||
data: [{ name: "", value: 0 }],
|
||||
/**
|
||||
* @description Ring line width
|
||||
* @type {Number}
|
||||
@@ -76,7 +76,7 @@ export default {
|
||||
*/
|
||||
digitalFlopStyle: {
|
||||
fontSize: 25,
|
||||
fill: '#fff'
|
||||
fill: "#fff"
|
||||
},
|
||||
/**
|
||||
* @description Digital flop toFixed
|
||||
@@ -88,13 +88,19 @@ export default {
|
||||
* @type {String}
|
||||
* @default animationCurve = 'easeOutCubic'
|
||||
*/
|
||||
animationCurve: 'easeOutCubic',
|
||||
animationCurve: "easeOutCubic",
|
||||
/**
|
||||
* @description CRender animationFrame
|
||||
* @type {String}
|
||||
* @default animationFrame = 50
|
||||
*/
|
||||
animationFrame: 50
|
||||
animationFrame: 50,
|
||||
/**
|
||||
* @description CRender showOriginalValue
|
||||
* @type {Boolean}
|
||||
* @default showOriginalValue = false
|
||||
*/
|
||||
showOriginalValue: false
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
@@ -103,100 +109,116 @@ export default {
|
||||
|
||||
activeIndex: 0,
|
||||
|
||||
animationHandler: ''
|
||||
}
|
||||
animationHandler: ""
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
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 {
|
||||
content: '{nt}%',
|
||||
number: [percent],
|
||||
content: showOriginalValue ? "{nt}" : "{nt}%",
|
||||
number: [displayValue],
|
||||
style: digitalFlopStyle,
|
||||
toFixed: digitalFlopToFixed
|
||||
}
|
||||
};
|
||||
},
|
||||
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() {
|
||||
const { mergedConfig } = this
|
||||
const { mergedConfig } = this;
|
||||
|
||||
if (!mergedConfig) return ''
|
||||
if (!mergedConfig) return "";
|
||||
|
||||
return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`
|
||||
return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config() {
|
||||
const { animationHandler, mergeConfig, setRingOption } = this
|
||||
const { animationHandler, mergeConfig, setRingOption } = this;
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
clearTimeout(animationHandler);
|
||||
|
||||
this.activeIndex = 0
|
||||
this.activeIndex = 0;
|
||||
|
||||
mergeConfig()
|
||||
mergeConfig();
|
||||
|
||||
setRingOption()
|
||||
setRingOption();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const { initChart, mergeConfig, setRingOption } = this
|
||||
const { initChart, mergeConfig, setRingOption } = this;
|
||||
|
||||
initChart()
|
||||
initChart();
|
||||
|
||||
mergeConfig()
|
||||
mergeConfig();
|
||||
|
||||
setRingOption()
|
||||
setRingOption();
|
||||
},
|
||||
initChart() {
|
||||
const { $refs } = this
|
||||
const { $refs } = this;
|
||||
|
||||
this.chart = new Charts($refs['active-ring-chart'])
|
||||
this.chart = new Charts($refs["active-ring-chart"]);
|
||||
},
|
||||
mergeConfig() {
|
||||
const { defaultConfig, config } = this
|
||||
const { defaultConfig, config } = this;
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
);
|
||||
},
|
||||
setRingOption() {
|
||||
const { getRingOption, chart, ringAnimation } = this
|
||||
const { getRingOption, chart, ringAnimation } = this;
|
||||
|
||||
const option = getRingOption()
|
||||
const option = getRingOption();
|
||||
|
||||
chart.setOption(option, true)
|
||||
chart.setOption(option, true);
|
||||
|
||||
ringAnimation()
|
||||
ringAnimation();
|
||||
},
|
||||
getRingOption() {
|
||||
const { mergedConfig, getRealRadius } = this
|
||||
const { mergedConfig, getRealRadius } = this;
|
||||
|
||||
const radius = getRealRadius()
|
||||
const radius = getRealRadius();
|
||||
|
||||
mergedConfig.data.forEach(dataItem => {
|
||||
dataItem.radius = radius
|
||||
})
|
||||
dataItem.radius = radius;
|
||||
});
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
type: "pie",
|
||||
...mergedConfig,
|
||||
outsideLabel: {
|
||||
show: false
|
||||
@@ -204,70 +226,71 @@ export default {
|
||||
}
|
||||
],
|
||||
color: mergedConfig.color
|
||||
}
|
||||
};
|
||||
},
|
||||
getRealRadius(active = false) {
|
||||
const { mergedConfig, chart } = this
|
||||
const { mergedConfig, chart } = this;
|
||||
|
||||
const { radius, activeRadius, lineWidth } = mergedConfig
|
||||
const { radius, activeRadius, lineWidth } = mergedConfig;
|
||||
|
||||
const maxRadius = Math.min(...chart.render.area) / 2
|
||||
const maxRadius = Math.min(...chart.render.area) / 2;
|
||||
|
||||
const halfLineWidth = lineWidth / 2
|
||||
const halfLineWidth = lineWidth / 2;
|
||||
|
||||
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 outSideRadius = realRadius + halfLineWidth
|
||||
const insideRadius = realRadius - halfLineWidth;
|
||||
const outSideRadius = realRadius + halfLineWidth;
|
||||
|
||||
return [insideRadius, outSideRadius]
|
||||
return [insideRadius, outSideRadius];
|
||||
},
|
||||
ringAnimation() {
|
||||
let { activeIndex, getRingOption, chart, getRealRadius } = this
|
||||
let { activeIndex, getRingOption, chart, getRealRadius } = this;
|
||||
|
||||
const radius = getRealRadius()
|
||||
const active = getRealRadius(true)
|
||||
const radius = getRealRadius();
|
||||
const active = getRealRadius(true);
|
||||
|
||||
const option = getRingOption()
|
||||
const option = getRingOption();
|
||||
|
||||
const { data } = option.series[0]
|
||||
const { data } = option.series[0];
|
||||
|
||||
data.forEach((dataItem, i) => {
|
||||
if (i === activeIndex) {
|
||||
dataItem.radius = active
|
||||
dataItem.radius = active;
|
||||
} else {
|
||||
dataItem.radius = radius
|
||||
dataItem.radius = radius;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
chart.setOption(option, true)
|
||||
chart.setOption(option, true);
|
||||
|
||||
const { activeTimeGap } = option.series[0]
|
||||
const { activeTimeGap } = option.series[0];
|
||||
|
||||
this.animationHandler = setTimeout(foo => {
|
||||
activeIndex += 1
|
||||
activeIndex += 1;
|
||||
|
||||
if (activeIndex >= data.length) activeIndex = 0
|
||||
if (activeIndex >= data.length) activeIndex = 0;
|
||||
|
||||
this.activeIndex = activeIndex
|
||||
this.activeIndex = activeIndex;
|
||||
|
||||
this.ringAnimation()
|
||||
}, activeTimeGap)
|
||||
this.ringAnimation();
|
||||
}, activeTimeGap);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const { init } = this
|
||||
const { init } = this;
|
||||
|
||||
init()
|
||||
init();
|
||||
},
|
||||
beforeDestroy() {
|
||||
const { animationHandler } = this
|
||||
const { animationHandler } = this;
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
}
|
||||
clearTimeout(animationHandler);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
Reference in new issue
Block a user