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

format code

This commit is contained in:
costa 2020-04-28 16:43:44 +08:00
parent fdd1e243a7
commit dd37ba167a
6 changed files with 253 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19664,7 +19664,7 @@
// //
var script$s = { var script$s = {
name: "DvActiveRingChart", name: 'DvActiveRingChart',
components: { components: {
dvDigitalFlop: __vue_component__$r dvDigitalFlop: __vue_component__$r
}, },
@ -19684,7 +19684,7 @@
* @default radius = '50%' * @default radius = '50%'
* @example radius = '50%' | 100 * @example radius = '50%' | 100
*/ */
radius: "50%", radius: '50%',
/** /**
* @description Active ring radius * @description Active ring radius
@ -19692,7 +19692,7 @@
* @default activeRadius = '55%' * @default activeRadius = '55%'
* @example activeRadius = '55%' | 110 * @example activeRadius = '55%' | 110
*/ */
activeRadius: "55%", activeRadius: '55%',
/** /**
* @description Ring data * @description Ring data
@ -19700,7 +19700,7 @@
* @default data = [{ name: '', value: 0 }] * @default data = [{ name: '', value: 0 }]
*/ */
data: [{ data: [{
name: "", name: '',
value: 0 value: 0
}], }],
@ -19732,7 +19732,7 @@
*/ */
digitalFlopStyle: { digitalFlopStyle: {
fontSize: 25, fontSize: 25,
fill: "#fff" fill: '#fff'
}, },
/** /**
@ -19746,7 +19746,7 @@
* @type {String} * @type {String}
* @default animationCurve = 'easeOutCubic' * @default animationCurve = 'easeOutCubic'
*/ */
animationCurve: "easeOutCubic", animationCurve: 'easeOutCubic',
/** /**
* @description CRender animationFrame * @description CRender animationFrame
@ -19765,7 +19765,7 @@
mergedConfig: null, mergedConfig: null,
chart: null, chart: null,
activeIndex: 0, activeIndex: 0,
animationHandler: "" animationHandler: ''
}; };
}, },
@ -19796,7 +19796,7 @@
} }
return { return {
content: showOriginalValue ? "{nt}" : "{nt}%", content: showOriginalValue ? '{nt}' : '{nt}%',
number: [displayValue], number: [displayValue],
style: digitalFlopStyle, style: digitalFlopStyle,
toFixed: digitalFlopToFixed toFixed: digitalFlopToFixed
@ -19808,7 +19808,7 @@
mergedConfig, mergedConfig,
activeIndex activeIndex
} = this; } = this;
if (!mergedConfig) return ""; if (!mergedConfig) return '';
return mergedConfig.data[activeIndex].name; return mergedConfig.data[activeIndex].name;
}, },
@ -19816,7 +19816,7 @@
const { const {
mergedConfig mergedConfig
} = this; } = this;
if (!mergedConfig) return ""; if (!mergedConfig) return '';
return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`; return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`;
} }
@ -19851,7 +19851,7 @@
const { const {
$refs $refs
} = this; } = this;
this.chart = new Charts($refs["active-ring-chart"]); this.chart = new Charts($refs['active-ring-chart']);
}, },
mergeConfig() { mergeConfig() {
@ -19884,7 +19884,7 @@
}); });
return { return {
series: [{ series: [{
type: "pie", type: 'pie',
...mergedConfig, ...mergedConfig,
outsideLabel: { outsideLabel: {
show: false show: false
@ -19907,7 +19907,7 @@
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 insideRadius = realRadius - halfLineWidth;
const outSideRadius = realRadius + halfLineWidth; const outSideRadius = realRadius + halfLineWidth;
return [insideRadius, outSideRadius]; return [insideRadius, outSideRadius];
@ -19997,7 +19997,7 @@
/* style */ /* style */
const __vue_inject_styles__$s = function (inject) { const __vue_inject_styles__$s = function (inject) {
if (!inject) return if (!inject) return
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 }); inject("data-v-276b4e5b_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 */ /* scoped */
@ -20031,7 +20031,7 @@
// //
var script$t = { var script$t = {
name: "DvCapsuleChart", name: 'DvCapsuleChart',
props: { props: {
config: { config: {
type: Object, type: Object,
@ -20056,14 +20056,14 @@
* @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 showVal: false
}, },
mergedConfig: null, mergedConfig: null,
@ -20246,7 +20246,7 @@
/* style */ /* style */
const __vue_inject_styles__$t = function (inject) { const __vue_inject_styles__$t = function (inject) {
if (!inject) return if (!inject) return
inject("data-v-5cadd374_0", { source: ".dv-capsule-chart {\n position: relative;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n padding: 10px;\n color: #fff;\n}\n.dv-capsule-chart .label-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n padding-right: 10px;\n text-align: right;\n font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n height: 20px;\n line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n box-shadow: 0 0 3px #999;\n height: 10px;\n margin: 5px 0px;\n border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item div {\n height: 8px;\n margin-top: 1px;\n border-radius: 5px;\n transition: all 0.3s;\n}\n.dv-capsule-chart .capsule-item div .capsule-item-val {\n position: absolute;\n top: -5px;\n font-size: 12px;\n}\n.dv-capsule-chart .unit-label {\n height: 20px;\n font-size: 12px;\n position: relative;\n}\n.dv-capsule-chart .unit-label:not(:first-child) {\n text-align: right;\n}\n.dv-capsule-chart .unit-label div {\n position: absolute;\n}\n.dv-capsule-chart .unit-text {\n text-align: right;\n display: flex;\n align-items: flex-end;\n font-size: 12px;\n line-height: 20px;\n margin-left: 10px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,aAAa;EACb,WAAW;AACb;AACA;EACE,aAAa;EACb,sBAAsB;EACtB,8BAA8B;EAC9B,sBAAsB;EACtB,mBAAmB;EACnB,iBAAiB;EACjB,eAAe;AACjB;AACA;EACE,YAAY;EACZ,iBAAiB;AACnB;AACA;EACE,OAAO;EACP,aAAa;EACb,sBAAsB;EACtB,8BAA8B;AAChC;AACA;EACE,wBAAwB;EACxB,YAAY;EACZ,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,WAAW;EACX,eAAe;EACf,kBAAkB;EAClB,oBAAoB;AACtB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,eAAe;AACjB;AACA;EACE,YAAY;EACZ,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,iBAAiB;AACnB;AACA;EACE,kBAAkB;AACpB;AACA;EACE,iBAAiB;EACjB,aAAa;EACb,qBAAqB;EACrB,eAAe;EACf,iBAAiB;EACjB,iBAAiB;AACnB","file":"main.vue","sourcesContent":[".dv-capsule-chart {\n position: relative;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n padding: 10px;\n color: #fff;\n}\n.dv-capsule-chart .label-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n padding-right: 10px;\n text-align: right;\n font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n height: 20px;\n line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n box-shadow: 0 0 3px #999;\n height: 10px;\n margin: 5px 0px;\n border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item div {\n height: 8px;\n margin-top: 1px;\n border-radius: 5px;\n transition: all 0.3s;\n}\n.dv-capsule-chart .capsule-item div .capsule-item-val {\n position: absolute;\n top: -5px;\n font-size: 12px;\n}\n.dv-capsule-chart .unit-label {\n height: 20px;\n font-size: 12px;\n position: relative;\n}\n.dv-capsule-chart .unit-label:not(:first-child) {\n text-align: right;\n}\n.dv-capsule-chart .unit-label div {\n position: absolute;\n}\n.dv-capsule-chart .unit-text {\n text-align: right;\n display: flex;\n align-items: flex-end;\n font-size: 12px;\n line-height: 20px;\n margin-left: 10px;\n}\n"]}, media: undefined }); inject("data-v-422fa5ce_0", { source: ".dv-capsule-chart {\n position: relative;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n padding: 10px;\n color: #fff;\n}\n.dv-capsule-chart .label-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n padding-right: 10px;\n text-align: right;\n font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n height: 20px;\n line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n box-shadow: 0 0 3px #999;\n height: 10px;\n margin: 5px 0px;\n border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item div {\n height: 8px;\n margin-top: 1px;\n border-radius: 5px;\n transition: all 0.3s;\n}\n.dv-capsule-chart .capsule-item div .capsule-item-val {\n position: absolute;\n top: -5px;\n font-size: 12px;\n}\n.dv-capsule-chart .unit-label {\n height: 20px;\n font-size: 12px;\n position: relative;\n}\n.dv-capsule-chart .unit-label:not(:first-child) {\n text-align: right;\n}\n.dv-capsule-chart .unit-label div {\n position: absolute;\n}\n.dv-capsule-chart .unit-text {\n text-align: right;\n display: flex;\n align-items: flex-end;\n font-size: 12px;\n line-height: 20px;\n margin-left: 10px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,aAAa;EACb,WAAW;AACb;AACA;EACE,aAAa;EACb,sBAAsB;EACtB,8BAA8B;EAC9B,sBAAsB;EACtB,mBAAmB;EACnB,iBAAiB;EACjB,eAAe;AACjB;AACA;EACE,YAAY;EACZ,iBAAiB;AACnB;AACA;EACE,OAAO;EACP,aAAa;EACb,sBAAsB;EACtB,8BAA8B;AAChC;AACA;EACE,wBAAwB;EACxB,YAAY;EACZ,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,WAAW;EACX,eAAe;EACf,kBAAkB;EAClB,oBAAoB;AACtB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,eAAe;AACjB;AACA;EACE,YAAY;EACZ,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,iBAAiB;AACnB;AACA;EACE,kBAAkB;AACpB;AACA;EACE,iBAAiB;EACjB,aAAa;EACb,qBAAqB;EACrB,eAAe;EACf,iBAAiB;EACjB,iBAAiB;AACnB","file":"main.vue","sourcesContent":[".dv-capsule-chart {\n position: relative;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n padding: 10px;\n color: #fff;\n}\n.dv-capsule-chart .label-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n padding-right: 10px;\n text-align: right;\n font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n height: 20px;\n line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n box-shadow: 0 0 3px #999;\n height: 10px;\n margin: 5px 0px;\n border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item div {\n height: 8px;\n margin-top: 1px;\n border-radius: 5px;\n transition: all 0.3s;\n}\n.dv-capsule-chart .capsule-item div .capsule-item-val {\n position: absolute;\n top: -5px;\n font-size: 12px;\n}\n.dv-capsule-chart .unit-label {\n height: 20px;\n font-size: 12px;\n position: relative;\n}\n.dv-capsule-chart .unit-label:not(:first-child) {\n text-align: right;\n}\n.dv-capsule-chart .unit-label div {\n position: absolute;\n}\n.dv-capsule-chart .unit-text {\n text-align: right;\n display: flex;\n align-items: flex-end;\n font-size: 12px;\n line-height: 20px;\n margin-left: 10px;\n}\n"]}, media: undefined });
}; };
/* scoped */ /* scoped */

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

File diff suppressed because one or more lines are too long

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

@ -9,16 +9,16 @@
</template> </template>
<script> <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 { export default {
name: "DvActiveRingChart", name: 'DvActiveRingChart',
components: { components: {
dvDigitalFlop dvDigitalFlop
}, },
@ -37,20 +37,20 @@ export default {
* @default radius = '50%' * @default radius = '50%'
* @example radius = '50%' | 100 * @example radius = '50%' | 100
*/ */
radius: "50%", radius: '50%',
/** /**
* @description Active ring radius * @description Active ring radius
* @type {String|Number} * @type {String|Number}
* @default activeRadius = '55%' * @default activeRadius = '55%'
* @example activeRadius = '55%' | 110 * @example activeRadius = '55%' | 110
*/ */
activeRadius: "55%", activeRadius: '55%',
/** /**
* @description Ring data * @description Ring data
* @type {Array<Object>} * @type {Array<Object>}
* @default data = [{ name: '', value: 0 }] * @default data = [{ name: '', value: 0 }]
*/ */
data: [{ name: "", value: 0 }], data: [{ name: '', value: 0 }],
/** /**
* @description Ring line width * @description Ring line width
* @type {Number} * @type {Number}
@ -76,7 +76,7 @@ export default {
*/ */
digitalFlopStyle: { digitalFlopStyle: {
fontSize: 25, fontSize: 25,
fill: "#fff" fill: '#fff'
}, },
/** /**
* @description Digital flop toFixed * @description Digital flop toFixed
@ -88,7 +88,7 @@ export default {
* @type {String} * @type {String}
* @default animationCurve = 'easeOutCubic' * @default animationCurve = 'easeOutCubic'
*/ */
animationCurve: "easeOutCubic", animationCurve: 'easeOutCubic',
/** /**
* @description CRender animationFrame * @description CRender animationFrame
* @type {String} * @type {String}
@ -109,116 +109,116 @@ export default {
activeIndex: 0, activeIndex: 0,
animationHandler: "" animationHandler: ''
}; }
}, },
computed: { computed: {
digitalFlop() { digitalFlop() {
const { mergedConfig, activeIndex } = this; const { mergedConfig, activeIndex } = this
if (!mergedConfig) return {}; if (!mergedConfig) return {}
const { const {
digitalFlopStyle, digitalFlopStyle,
digitalFlopToFixed, digitalFlopToFixed,
data, data,
showOriginalValue showOriginalValue
} = mergedConfig; } = mergedConfig
const value = data.map(({ value }) => value); const value = data.map(({ value }) => value)
let displayValue; let displayValue
if (showOriginalValue) { if (showOriginalValue) {
displayValue = value[activeIndex]; displayValue = value[activeIndex]
} else { } else {
const sum = value.reduce((all, v) => all + v, 0); const sum = value.reduce((all, v) => all + v, 0)
const percent = parseFloat((value[activeIndex] / sum) * 100) || 0; const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
displayValue = percent; displayValue = percent
} }
return { return {
content: showOriginalValue ? "{nt}" : "{nt}%", content: showOriginalValue ? '{nt}' : '{nt}%',
number: [displayValue], 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 ''
return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`; return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`
} }
}, },
watch: { watch: {
config() { 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: { methods: {
init() { init() {
const { initChart, mergeConfig, setRingOption } = this; const { initChart, mergeConfig, setRingOption } = this
initChart(); initChart()
mergeConfig(); mergeConfig()
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( this.mergedConfig = deepMerge(
deepClone(defaultConfig, true), deepClone(defaultConfig, true),
config || {} config || {}
); )
}, },
setRingOption() { 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() { getRingOption() {
const { mergedConfig, getRealRadius } = this; const { mergedConfig, getRealRadius } = this
const radius = getRealRadius(); const radius = getRealRadius()
mergedConfig.data.forEach(dataItem => { mergedConfig.data.forEach(dataItem => {
dataItem.radius = radius; dataItem.radius = radius
}); })
return { return {
series: [ series: [
{ {
type: "pie", type: 'pie',
...mergedConfig, ...mergedConfig,
outsideLabel: { outsideLabel: {
show: false show: false
@ -226,69 +226,69 @@ 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
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") if (typeof realRadius !== 'number')
realRadius = (parseInt(realRadius) / 100) * maxRadius; 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()
const active = getRealRadius(true); const active = getRealRadius(true)
const option = getRingOption(); const option = getRingOption()
const { data } = option.series[0]; const { data } = option.series[0]
data.forEach((dataItem, i) => { data.forEach((dataItem, i) => {
if (i === activeIndex) { if (i === activeIndex) {
dataItem.radius = active; dataItem.radius = active
} else { } 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 => { 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(); this.ringAnimation()
}, activeTimeGap); }, activeTimeGap)
} }
}, },
mounted() { mounted() {
const { init } = this; const { init } = this
init(); init()
}, },
beforeDestroy() { beforeDestroy() {
const { animationHandler } = this; const { animationHandler } = this
clearTimeout(animationHandler); clearTimeout(animationHandler)
} }
}; }
</script> </script>

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

@ -34,12 +34,12 @@
</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,
@ -63,20 +63,20 @@ export default {
* @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: [ colors: [
"#37a2da", '#37a2da',
"#32c5e9", '#32c5e9',
"#67e0e3", '#67e0e3',
"#9fe6b8", '#9fe6b8',
"#ffdb5c", '#ffdb5c',
"#ff9f7f", '#ff9f7f',
"#fb7293" '#fb7293'
], ],
/** /**
* @description Chart unit * @description Chart unit
* @type {String} * @type {String}
* @default unit = '' * @default unit = ''
*/ */
unit: "", unit: '',
showVal: false showVal: false
}, },
@ -86,70 +86,70 @@ export default {
capsuleValue: [], capsuleValue: [],
labelData: [], labelData: [],
labelDataLength: [] 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( this.mergedConfig = deepMerge(
deepClone(defaultConfig, true), deepClone(defaultConfig, true),
config || {} 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.capsuleValue = capsuleValue; this.capsuleValue = capsuleValue
this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0)); this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
const oneFifth = maxValue / 5; const oneFifth = maxValue / 5
const labelData = Array.from( const labelData = Array.from(
new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))) new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
); )
this.labelData = labelData; this.labelData = labelData
this.labelDataLength = Array.from(labelData).map(v => this.labelDataLength = Array.from(labelData).map(v =>
maxValue ? v / maxValue : 0 maxValue ? v / maxValue : 0
); )
}, },
/** /**
* 计算x轴label位置 * 计算x轴label位置
*/ */
calcUnitLabelStyle(index) { calcUnitLabelStyle(index) {
if((this.labelData.length - 1) === index){ if (this.labelData.length - 1 === index) {
return `right: 0;`; return `right: 0;`
} }
return `left: ${this.labelDataLength[index] * 100}%;`; return `left: ${this.labelDataLength[index] * 100}%;`
} }
}, },
mounted() { mounted() {
const { calcData } = this; const { calcData } = this
calcData(); calcData()
} }
}; }
</script> </script>

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

@ -9,16 +9,16 @@
</template> </template>
<script> <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 { export default {
name: "DvActiveRingChart", name: 'DvActiveRingChart',
components: { components: {
dvDigitalFlop dvDigitalFlop
}, },
@ -37,20 +37,20 @@ export default {
* @default radius = '50%' * @default radius = '50%'
* @example radius = '50%' | 100 * @example radius = '50%' | 100
*/ */
radius: "50%", radius: '50%',
/** /**
* @description Active ring radius * @description Active ring radius
* @type {String|Number} * @type {String|Number}
* @default activeRadius = '55%' * @default activeRadius = '55%'
* @example activeRadius = '55%' | 110 * @example activeRadius = '55%' | 110
*/ */
activeRadius: "55%", activeRadius: '55%',
/** /**
* @description Ring data * @description Ring data
* @type {Array<Object>} * @type {Array<Object>}
* @default data = [{ name: '', value: 0 }] * @default data = [{ name: '', value: 0 }]
*/ */
data: [{ name: "", value: 0 }], data: [{ name: '', value: 0 }],
/** /**
* @description Ring line width * @description Ring line width
* @type {Number} * @type {Number}
@ -76,7 +76,7 @@ export default {
*/ */
digitalFlopStyle: { digitalFlopStyle: {
fontSize: 25, fontSize: 25,
fill: "#fff" fill: '#fff'
}, },
/** /**
* @description Digital flop toFixed * @description Digital flop toFixed
@ -88,7 +88,7 @@ export default {
* @type {String} * @type {String}
* @default animationCurve = 'easeOutCubic' * @default animationCurve = 'easeOutCubic'
*/ */
animationCurve: "easeOutCubic", animationCurve: 'easeOutCubic',
/** /**
* @description CRender animationFrame * @description CRender animationFrame
* @type {String} * @type {String}
@ -109,116 +109,116 @@ export default {
activeIndex: 0, activeIndex: 0,
animationHandler: "" animationHandler: ''
}; }
}, },
computed: { computed: {
digitalFlop() { digitalFlop() {
const { mergedConfig, activeIndex } = this; const { mergedConfig, activeIndex } = this
if (!mergedConfig) return {}; if (!mergedConfig) return {}
const { const {
digitalFlopStyle, digitalFlopStyle,
digitalFlopToFixed, digitalFlopToFixed,
data, data,
showOriginalValue showOriginalValue
} = mergedConfig; } = mergedConfig
const value = data.map(({ value }) => value); const value = data.map(({ value }) => value)
let displayValue; let displayValue
if (showOriginalValue) { if (showOriginalValue) {
displayValue = value[activeIndex]; displayValue = value[activeIndex]
} else { } else {
const sum = value.reduce((all, v) => all + v, 0); const sum = value.reduce((all, v) => all + v, 0)
const percent = parseFloat((value[activeIndex] / sum) * 100) || 0; const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
displayValue = percent; displayValue = percent
} }
return { return {
content: showOriginalValue ? "{nt}" : "{nt}%", content: showOriginalValue ? '{nt}' : '{nt}%',
number: [displayValue], 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 ''
return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`; return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`
} }
}, },
watch: { watch: {
config() { 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: { methods: {
init() { init() {
const { initChart, mergeConfig, setRingOption } = this; const { initChart, mergeConfig, setRingOption } = this
initChart(); initChart()
mergeConfig(); mergeConfig()
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( this.mergedConfig = deepMerge(
deepClone(defaultConfig, true), deepClone(defaultConfig, true),
config || {} config || {}
); )
}, },
setRingOption() { 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() { getRingOption() {
const { mergedConfig, getRealRadius } = this; const { mergedConfig, getRealRadius } = this
const radius = getRealRadius(); const radius = getRealRadius()
mergedConfig.data.forEach(dataItem => { mergedConfig.data.forEach(dataItem => {
dataItem.radius = radius; dataItem.radius = radius
}); })
return { return {
series: [ series: [
{ {
type: "pie", type: 'pie',
...mergedConfig, ...mergedConfig,
outsideLabel: { outsideLabel: {
show: false show: false
@ -226,71 +226,71 @@ 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
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") if (typeof realRadius !== 'number')
realRadius = (parseInt(realRadius) / 100) * maxRadius; 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()
const active = getRealRadius(true); const active = getRealRadius(true)
const option = getRingOption(); const option = getRingOption()
const { data } = option.series[0]; const { data } = option.series[0]
data.forEach((dataItem, i) => { data.forEach((dataItem, i) => {
if (i === activeIndex) { if (i === activeIndex) {
dataItem.radius = active; dataItem.radius = active
} else { } 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 => { 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(); this.ringAnimation()
}, activeTimeGap); }, activeTimeGap)
} }
}, },
mounted() { mounted() {
const { init } = this; const { init } = this
init(); init()
}, },
beforeDestroy() { beforeDestroy() {
const { animationHandler } = this; const { animationHandler } = this
clearTimeout(animationHandler); clearTimeout(animationHandler)
} }
}; }
</script> </script>
<style lang="less"> <style lang="less">

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

@ -34,12 +34,12 @@
</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,
@ -63,20 +63,20 @@ export default {
* @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: [ colors: [
"#37a2da", '#37a2da',
"#32c5e9", '#32c5e9',
"#67e0e3", '#67e0e3',
"#9fe6b8", '#9fe6b8',
"#ffdb5c", '#ffdb5c',
"#ff9f7f", '#ff9f7f',
"#fb7293" '#fb7293'
], ],
/** /**
* @description Chart unit * @description Chart unit
* @type {String} * @type {String}
* @default unit = '' * @default unit = ''
*/ */
unit: "", unit: '',
showVal: false showVal: false
}, },
@ -86,72 +86,72 @@ export default {
capsuleValue: [], capsuleValue: [],
labelData: [], labelData: [],
labelDataLength: [] 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( this.mergedConfig = deepMerge(
deepClone(defaultConfig, true), deepClone(defaultConfig, true),
config || {} 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.capsuleValue = capsuleValue; this.capsuleValue = capsuleValue
this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0)); this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
const oneFifth = maxValue / 5; const oneFifth = maxValue / 5
const labelData = Array.from( const labelData = Array.from(
new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))) new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
); )
this.labelData = labelData; this.labelData = labelData
this.labelDataLength = Array.from(labelData).map(v => this.labelDataLength = Array.from(labelData).map(v =>
maxValue ? v / maxValue : 0 maxValue ? v / maxValue : 0
); )
}, },
/** /**
* 计算x轴label位置 * 计算x轴label位置
*/ */
calcUnitLabelStyle(index) { calcUnitLabelStyle(index) {
if((this.labelData.length - 1) === index){ if (this.labelData.length - 1 === index) {
return `right: 0;`; return `right: 0;`
} }
return `left: ${this.labelDataLength[index] * 100}%;`; return `left: ${this.labelDataLength[index] * 100}%;`
} }
}, },
mounted() { mounted() {
const { calcData } = this; const { calcData } = this
calcData(); calcData()
} }
}; }
</script> </script>
<style lang="less"> <style lang="less">