59 lines
1.0 KiB
Vue
59 lines
1.0 KiB
Vue
<template>
|
|
<view class="charts-box">
|
|
<qiun-data-charts type="pie" :chartData="chartData" :opts="chartOpts" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
projectList: {
|
|
required: true,
|
|
type: Array
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chartData: {},
|
|
chartOpts: {
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
|
padding: [5, 5, 5, 5],
|
|
enableScroll: false,
|
|
extra: {
|
|
pie: {
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 15,
|
|
border: false,
|
|
borderWidth: 3,
|
|
borderColor: "#FFFFFF"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
projectList: {
|
|
handler(newVal) {
|
|
const pieData = this.projectList
|
|
// .filter(p => p.totalPrice > 0)
|
|
.map(p => ({
|
|
name: p.projectName,
|
|
value: p.totalPrice,
|
|
}));
|
|
this.chartData = {
|
|
series: [{
|
|
data: pieData
|
|
}]
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style> |