format code
This commit is contained in:
costa
parent
fdd1e243a7
commit
dd37ba167a
|
|
@ -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,7 +19746,7 @@
|
|||
* @type {String}
|
||||
* @default animationCurve = 'easeOutCubic'
|
||||
*/
|
||||
animationCurve: "easeOutCubic",
|
||||
animationCurve: 'easeOutCubic',
|
||||
|
||||
/**
|
||||
* @description CRender animationFrame
|
||||
|
|
@ -19765,7 +19765,7 @@
|
|||
mergedConfig: null,
|
||||
chart: null,
|
||||
activeIndex: 0,
|
||||
animationHandler: ""
|
||||
animationHandler: ''
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -19796,7 +19796,7 @@
|
|||
}
|
||||
|
||||
return {
|
||||
content: showOriginalValue ? "{nt}" : "{nt}%",
|
||||
content: showOriginalValue ? '{nt}' : '{nt}%',
|
||||
number: [displayValue],
|
||||
style: digitalFlopStyle,
|
||||
toFixed: digitalFlopToFixed
|
||||
|
|
@ -19808,7 +19808,7 @@
|
|||
mergedConfig,
|
||||
activeIndex
|
||||
} = this;
|
||||
if (!mergedConfig) return "";
|
||||
if (!mergedConfig) return '';
|
||||
return mergedConfig.data[activeIndex].name;
|
||||
},
|
||||
|
||||
|
|
@ -19816,7 +19816,7 @@
|
|||
const {
|
||||
mergedConfig
|
||||
} = this;
|
||||
if (!mergedConfig) return "";
|
||||
if (!mergedConfig) return '';
|
||||
return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`;
|
||||
}
|
||||
|
||||
|
|
@ -19851,7 +19851,7 @@
|
|||
const {
|
||||
$refs
|
||||
} = this;
|
||||
this.chart = new Charts($refs["active-ring-chart"]);
|
||||
this.chart = new Charts($refs['active-ring-chart']);
|
||||
},
|
||||
|
||||
mergeConfig() {
|
||||
|
|
@ -19884,7 +19884,7 @@
|
|||
});
|
||||
return {
|
||||
series: [{
|
||||
type: "pie",
|
||||
type: 'pie',
|
||||
...mergedConfig,
|
||||
outsideLabel: {
|
||||
show: false
|
||||
|
|
@ -19907,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];
|
||||
|
|
@ -19997,7 +19997,7 @@
|
|||
/* style */
|
||||
const __vue_inject_styles__$s = function (inject) {
|
||||
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 */
|
||||
|
|
@ -20031,7 +20031,7 @@
|
|||
|
||||
//
|
||||
var script$t = {
|
||||
name: "DvCapsuleChart",
|
||||
name: 'DvCapsuleChart',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
|
|
@ -20056,14 +20056,14 @@
|
|||
* @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
|
||||
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
||||
*/
|
||||
colors: ["#37a2da", "#32c5e9", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293"],
|
||||
colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
|
||||
|
||||
/**
|
||||
* @description Chart unit
|
||||
* @type {String}
|
||||
* @default unit = ''
|
||||
*/
|
||||
unit: "",
|
||||
unit: '',
|
||||
showVal: false
|
||||
},
|
||||
mergedConfig: null,
|
||||
|
|
@ -20246,7 +20246,7 @@
|
|||
/* style */
|
||||
const __vue_inject_styles__$t = function (inject) {
|
||||
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 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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,7 +88,7 @@ export default {
|
|||
* @type {String}
|
||||
* @default animationCurve = 'easeOutCubic'
|
||||
*/
|
||||
animationCurve: "easeOutCubic",
|
||||
animationCurve: 'easeOutCubic',
|
||||
/**
|
||||
* @description CRender animationFrame
|
||||
* @type {String}
|
||||
|
|
@ -109,116 +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,
|
||||
showOriginalValue
|
||||
} = mergedConfig;
|
||||
} = mergedConfig
|
||||
|
||||
const value = data.map(({ value }) => value);
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
let displayValue;
|
||||
let displayValue
|
||||
|
||||
if (showOriginalValue) {
|
||||
displayValue = value[activeIndex];
|
||||
displayValue = value[activeIndex]
|
||||
} 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 {
|
||||
content: showOriginalValue ? "{nt}" : "{nt}%",
|
||||
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 || {}
|
||||
);
|
||||
)
|
||||
},
|
||||
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
|
||||
|
|
@ -226,69 +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>
|
||||
|
|
@ -34,12 +34,12 @@
|
|||
</template>
|
||||
|
||||
<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 {
|
||||
name: "DvCapsuleChart",
|
||||
name: 'DvCapsuleChart',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
|
|
@ -63,20 +63,20 @@ export default {
|
|||
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
||||
*/
|
||||
colors: [
|
||||
"#37a2da",
|
||||
"#32c5e9",
|
||||
"#67e0e3",
|
||||
"#9fe6b8",
|
||||
"#ffdb5c",
|
||||
"#ff9f7f",
|
||||
"#fb7293"
|
||||
'#37a2da',
|
||||
'#32c5e9',
|
||||
'#67e0e3',
|
||||
'#9fe6b8',
|
||||
'#ffdb5c',
|
||||
'#ff9f7f',
|
||||
'#fb7293'
|
||||
],
|
||||
/**
|
||||
* @description Chart unit
|
||||
* @type {String}
|
||||
* @default unit = ''
|
||||
*/
|
||||
unit: "",
|
||||
unit: '',
|
||||
showVal: false
|
||||
},
|
||||
|
||||
|
|
@ -86,70 +86,70 @@ export default {
|
|||
capsuleValue: [],
|
||||
labelData: [],
|
||||
labelDataLength: []
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config() {
|
||||
const { calcData } = this;
|
||||
const { calcData } = this
|
||||
|
||||
calcData();
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcData() {
|
||||
const { mergeConfig, calcCapsuleLengthAndLabelData } = this;
|
||||
const { mergeConfig, calcCapsuleLengthAndLabelData } = this
|
||||
|
||||
mergeConfig();
|
||||
mergeConfig()
|
||||
|
||||
calcCapsuleLengthAndLabelData();
|
||||
calcCapsuleLengthAndLabelData()
|
||||
},
|
||||
mergeConfig() {
|
||||
let { config, defaultConfig } = this;
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
);
|
||||
)
|
||||
},
|
||||
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(
|
||||
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 =>
|
||||
maxValue ? v / maxValue : 0
|
||||
);
|
||||
)
|
||||
},
|
||||
/**
|
||||
* 计算x轴label位置
|
||||
*/
|
||||
calcUnitLabelStyle(index) {
|
||||
if((this.labelData.length - 1) === index){
|
||||
return `right: 0;`;
|
||||
if (this.labelData.length - 1 === index) {
|
||||
return `right: 0;`
|
||||
}
|
||||
return `left: ${this.labelDataLength[index] * 100}%;`;
|
||||
return `left: ${this.labelDataLength[index] * 100}%;`
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const { calcData } = this;
|
||||
const { calcData } = this
|
||||
|
||||
calcData();
|
||||
calcData()
|
||||
}
|
||||
};
|
||||
}
|
||||
</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,7 +88,7 @@ export default {
|
|||
* @type {String}
|
||||
* @default animationCurve = 'easeOutCubic'
|
||||
*/
|
||||
animationCurve: "easeOutCubic",
|
||||
animationCurve: 'easeOutCubic',
|
||||
/**
|
||||
* @description CRender animationFrame
|
||||
* @type {String}
|
||||
|
|
@ -109,116 +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,
|
||||
showOriginalValue
|
||||
} = mergedConfig;
|
||||
} = mergedConfig
|
||||
|
||||
const value = data.map(({ value }) => value);
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
let displayValue;
|
||||
let displayValue
|
||||
|
||||
if (showOriginalValue) {
|
||||
displayValue = value[activeIndex];
|
||||
displayValue = value[activeIndex]
|
||||
} 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 {
|
||||
content: showOriginalValue ? "{nt}" : "{nt}%",
|
||||
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 || {}
|
||||
);
|
||||
)
|
||||
},
|
||||
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
|
||||
|
|
@ -226,71 +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">
|
||||
|
|
|
|||
|
|
@ -34,12 +34,12 @@
|
|||
</template>
|
||||
|
||||
<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 {
|
||||
name: "DvCapsuleChart",
|
||||
name: 'DvCapsuleChart',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
|
|
@ -63,20 +63,20 @@ export default {
|
|||
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
||||
*/
|
||||
colors: [
|
||||
"#37a2da",
|
||||
"#32c5e9",
|
||||
"#67e0e3",
|
||||
"#9fe6b8",
|
||||
"#ffdb5c",
|
||||
"#ff9f7f",
|
||||
"#fb7293"
|
||||
'#37a2da',
|
||||
'#32c5e9',
|
||||
'#67e0e3',
|
||||
'#9fe6b8',
|
||||
'#ffdb5c',
|
||||
'#ff9f7f',
|
||||
'#fb7293'
|
||||
],
|
||||
/**
|
||||
* @description Chart unit
|
||||
* @type {String}
|
||||
* @default unit = ''
|
||||
*/
|
||||
unit: "",
|
||||
unit: '',
|
||||
showVal: false
|
||||
},
|
||||
|
||||
|
|
@ -86,72 +86,72 @@ export default {
|
|||
capsuleValue: [],
|
||||
labelData: [],
|
||||
labelDataLength: []
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config() {
|
||||
const { calcData } = this;
|
||||
const { calcData } = this
|
||||
|
||||
calcData();
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcData() {
|
||||
const { mergeConfig, calcCapsuleLengthAndLabelData } = this;
|
||||
const { mergeConfig, calcCapsuleLengthAndLabelData } = this
|
||||
|
||||
mergeConfig();
|
||||
mergeConfig()
|
||||
|
||||
calcCapsuleLengthAndLabelData();
|
||||
calcCapsuleLengthAndLabelData()
|
||||
},
|
||||
mergeConfig() {
|
||||
let { config, defaultConfig } = this;
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
);
|
||||
)
|
||||
},
|
||||
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(
|
||||
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 =>
|
||||
maxValue ? v / maxValue : 0
|
||||
);
|
||||
)
|
||||
},
|
||||
/**
|
||||
* 计算x轴label位置
|
||||
*/
|
||||
calcUnitLabelStyle(index) {
|
||||
if((this.labelData.length - 1) === index){
|
||||
return `right: 0;`;
|
||||
if (this.labelData.length - 1 === index) {
|
||||
return `right: 0;`
|
||||
}
|
||||
return `left: ${this.labelDataLength[index] * 100}%;`;
|
||||
return `left: ${this.labelDataLength[index] * 100}%;`
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const { calcData } = this;
|
||||
const { calcData } = this
|
||||
|
||||
calcData();
|
||||
calcData()
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
|
|
|||
Loading…
Reference in New Issue