74 lines
1.4 KiB
Vue
74 lines
1.4 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: {
|
|
series: []
|
|
},
|
|
chartOpts: {
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
|
padding: [5, 5, 5, 5],
|
|
legend: {
|
|
show: false
|
|
},
|
|
dataLabel: false, // 不显示数据标签
|
|
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 => {
|
|
// 过滤 totalPrice 非数字/小于等于0的项
|
|
const price = Number(p.totalPrice);
|
|
return !isNaN(price) && price > 0;
|
|
})
|
|
.map(p => ({
|
|
name: p.projectName,
|
|
value: parseInt(p.totalPrice)
|
|
}));
|
|
// this.chartData = {
|
|
// series: [{
|
|
// data: pieData
|
|
// }]
|
|
// }
|
|
let res = {
|
|
series: [{
|
|
data: pieData
|
|
}]
|
|
};
|
|
this.chartData = JSON.parse(JSON.stringify(res));
|
|
},
|
|
immediate: true,
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style> |