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

active-ring-chart add showOriginalValue

This commit is contained in:
costa 2020-04-28 16:15:12 +08:00
parent 57b6c726eb
commit fdd1e243a7
4 changed files with 270 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
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,19 +19746,26 @@
* @type {String} * @type {String}
* @default animationCurve = 'easeOutCubic' * @default animationCurve = 'easeOutCubic'
*/ */
animationCurve: 'easeOutCubic', animationCurve: "easeOutCubic",
/** /**
* @description CRender animationFrame * @description CRender animationFrame
* @type {String} * @type {String}
* @default animationFrame = 50 * @default animationFrame = 50
*/ */
animationFrame: 50 animationFrame: 50,
/**
* @description CRender showOriginalValue
* @type {Boolean}
* @default showOriginalValue = false
*/
showOriginalValue: false
}, },
mergedConfig: null, mergedConfig: null,
chart: null, chart: null,
activeIndex: 0, activeIndex: 0,
animationHandler: '' animationHandler: ""
}; };
}, },
@ -19772,16 +19779,25 @@
const { const {
digitalFlopStyle, digitalFlopStyle,
digitalFlopToFixed, digitalFlopToFixed,
data data,
showOriginalValue
} = mergedConfig; } = mergedConfig;
const value = data.map(({ const value = data.map(({
value value
}) => 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 { return {
content: '{nt}%', content: showOriginalValue ? "{nt}" : "{nt}%",
number: [percent], number: [displayValue],
style: digitalFlopStyle, style: digitalFlopStyle,
toFixed: digitalFlopToFixed toFixed: digitalFlopToFixed
}; };
@ -19792,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;
}, },
@ -19800,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;`;
} }
@ -19835,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() {
@ -19868,7 +19884,7 @@
}); });
return { return {
series: [{ series: [{
type: 'pie', type: "pie",
...mergedConfig, ...mergedConfig,
outsideLabel: { outsideLabel: {
show: false show: false
@ -19891,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];
@ -19981,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-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 */ /* scoped */

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

File diff suppressed because one or more lines are too long

211
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
}, },
@ -28,7 +28,7 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -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,13 +88,19 @@ 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}
* @default animationFrame = 50 * @default animationFrame = 50
*/ */
animationFrame: 50 animationFrame: 50,
/**
* @description CRender showOriginalValue
* @type {Boolean}
* @default showOriginalValue = false
*/
showOriginalValue: false
}, },
mergedConfig: null, mergedConfig: null,
@ -103,100 +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 { 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 { return {
content: '{nt}%', content: showOriginalValue ? "{nt}" : "{nt}%",
number: [percent], 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(deepClone(defaultConfig, true), config || {}) this.mergedConfig = deepMerge(
deepClone(defaultConfig, true),
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
@ -204,68 +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') 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];
}, },
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>

211
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
}, },
@ -28,7 +28,7 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -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,13 +88,19 @@ 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}
* @default animationFrame = 50 * @default animationFrame = 50
*/ */
animationFrame: 50 animationFrame: 50,
/**
* @description CRender showOriginalValue
* @type {Boolean}
* @default showOriginalValue = false
*/
showOriginalValue: false
}, },
mergedConfig: null, mergedConfig: null,
@ -103,100 +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 { 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 { return {
content: '{nt}%', content: showOriginalValue ? "{nt}" : "{nt}%",
number: [percent], 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(deepClone(defaultConfig, true), config || {}) this.mergedConfig = deepMerge(
deepClone(defaultConfig, true),
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
@ -204,70 +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') 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];
}, },
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">