From 14d39ee4fab77642a9ab7c4229407a1a3b0defac Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期三, 06 十二月 2023 16:13:20 +0800
Subject: [PATCH] 标准需求优化
---
Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue | 86 ++++++++++++++++++++++++++----------------
1 files changed, 53 insertions(+), 33 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
index 94d451c..9efd832 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
@@ -21,6 +21,52 @@
default: ""
}
},
+ watch:{
+ pieData:{
+ immediate:true,
+ handler(newval,oldval){
+ if (newval) {
+ // console.log(newval)
+ const series=[
+ {
+ name: '',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap:false,
+ label: {
+ formatter: '{b}\n{d}%',
+ fontSize:14
+ },
+ itemStyle: {
+ color: function(params) {
+ // 鏍规嵁鍏蜂綋闇�姹傝缃鑹�
+ const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
+ return colorList[params.dataIndex % colorList.length];
+ }
+ },
+ data:newval[0].map((value, index) => {
+ return {
+ value: value,
+ name: this.getMonthName(index),
+ newValue: newval[1][index]
+ };
+ }),
+ }
+ ]
+ this.chartOptions.series = series;
+ }
+ }
+ },
+ chartName:{
+ handler(newval,oldval){
+ if(newval){
+ this.chartOptions.title.text = newval + "鏁版嵁缁熻"
+ }
+ },
+ immediate:true,
+ deep:true
+ }
+ },
data() {
return {
chartOptions: {
@@ -47,41 +93,15 @@
top: 'middle',
data: ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�']
},
- series: [
- {
- name: '',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap:false,
- label: {
- formatter: '{b}\n{d}%',
- fontSize:14
- },
- itemStyle: {
- color: function(params) {
- // 鏍规嵁鍏蜂綋闇�姹傝缃鑹�
- const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
- return colorList[params.dataIndex % colorList.length];
- }
- },
- data: [
- { value: 110, name: '涓�鏈�', newValue: 10, totalValue: 110 },
- { value: 220, name: '浜屾湀', newValue: 20, totalValue: 220 },
- { value: 330, name: '涓夋湀', newValue: 30, totalValue: 330 },
- { value: 440, name: '鍥涙湀', newValue: 40, totalValue: 440 },
- { value: 550, name: '浜旀湀', newValue: 50, totalValue: 550 },
- { value: 660, name: '鍏湀', newValue: 60, totalValue: 660 },
- { value: 770, name: '涓冩湀', newValue: 70, totalValue: 770 },
- { value: 880, name: '鍏湀', newValue: 80, totalValue: 880 },
- { value: 990, name: '涔濇湀', newValue: 90, totalValue: 990 },
- { value: 1100, name: '鍗佹湀', newValue: 100, totalValue: 1100 },
- { value: 1210, name: '鍗佷竴鏈�', newValue: 110, totalValue: 1210 },
- { value: 1320, name: '鍗佷簩鏈�', newValue: 120, totalValue: 1320 }
- ]
- }
- ]
+ series: []
},
}
+ },
+ methods:{
+ getMonthName(index){
+ const monthNames = ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�'];
+ return monthNames[index];
+ }
}
}
</script>
--
Gitblit v1.9.3