74 lines
1.4 KiB
Vue
74 lines
1.4 KiB
Vue
<template>
|
|
<view class="pie" :style="{background:tvalue.bg}">
|
|
<slot>
|
|
</slot>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pie {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: [String, Array],
|
|
default: '100|#128dea'
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
tvalue() {
|
|
var colors = ['#4fa6f1', '#57c85b', '#9C27B0', '#FFEB3B', '#2353c3', '#FF5722', '#87b800', '#a66100',
|
|
'#00796B', '#E91E63', '#a1a1a1'
|
|
];
|
|
var dats = [...this.data];
|
|
if (typeof(this.data) == 'string') {
|
|
dats = [];
|
|
var das = this.data.split(',');
|
|
for (var i in das) {
|
|
var dc = das[i].split('|');
|
|
if (dc.length == 1 || dc[1][0] != '#') {
|
|
dc[1] = colors[i];
|
|
}
|
|
dats.push({
|
|
num: this.tofloat(dc),
|
|
color: dc[1]
|
|
});
|
|
}
|
|
}
|
|
var total = 0;
|
|
for (var i in dats) {
|
|
total += dats[i].num;
|
|
}
|
|
var ret = {
|
|
bg: '#cccccc'
|
|
};
|
|
if (total > 0) {
|
|
ret.bg = 'conic-gradient(from 270deg';
|
|
var nextdeg = 0;
|
|
for (var i in dats) {
|
|
var medeg = dats[i].num * 360 / total
|
|
ret.bg += ', ' + dats[i].color + ' '+nextdeg+'deg ';
|
|
nextdeg += medeg;
|
|
ret.bg += nextdeg+'deg';
|
|
}
|
|
}
|
|
return ret;
|
|
}
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script> |