<template>
  <div>
     <div class="itemsall">
         <span>{{ totalCount }}</span>
         <span>项目总数</span>
       </div>
      <div ref="chart" style="width: 30rem; height: 15rem;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { allchanyeml } from '@/api/ManageApi/index';

export default {
   name: 'RingChart',
   data() {
     return {
       chartData: [
         { value: 54, name: '重点鼓励上楼', itemStyle: { color: '#50DFB3' } },
         { value: 65, name: '有条件上楼', itemStyle: { color: '#507AFC' } },
       ],
       totalCount: 0 // 新增总数值
     };
   },
   mounted() {
     this.getData();
   },
   methods: {
     async getData() {
       const response = await allchanyeml();
       if (response && response.code === 200 && response.data) {
         this.chartData = this.processData(response.data);
         this.calculateTotal(); // 计算总和
         this.renderChart();
       } else {}
     },
     processData(data) {
       const names = ['重点鼓励上楼', '有条件上楼'];
       const counts = data.map(item => item.count);
       return names.map((name, index) => ({
         value: counts[index] || 0,
         name: name,
         itemStyle: { color: ['#50DFB3', '#507AFC'][index] },
       }));
     },
     calculateTotal() {
       // 计算所有value的总和
       this.totalCount = this.chartData.reduce((sum, item) => sum + item.value, 0);
     },
     renderChart() {
       const chartDom = this.$refs.chart;
       const myChart = echarts.init(chartDom);
       const option = {
         tooltip: {
           trigger: 'item'
         },
         legend: {
           orient: 'vertical', // 图例垂直排列
           right: '10%', // 图例在右侧
           top: 'center', // 图例垂直居中
           itemGap: 50, // 右侧间隔
           formatter: function (name) {
             // 自定义图例显示格式
             const item = this.chartData.find(item => item.name === name);
             return `${name} ${item.value}个`;
           }.bind(this)
         },
         series: [
           {
             name: '项目分布',
             type: 'pie',
             radius: ['40%', '60%'],
             center: ['30%', '50%'],
             data: this.chartData,
             label: {
               show: false // 隐藏标签
             },
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
             }
           }
         ]
       };
 
       myChart.setOption(option);
     }
   }
};
</script>

<style scoped>
.itemsall {
 position: absolute;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 top: 5.4rem;
  left: 7rem;
}

.itemsall span:nth-child(1) {
  font-family: DINbold;
  font-weight: 500;
  font-size: 2rem;
  color: #292C33;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.itemsall span:nth-child(2) {
  font-family: alibold;
  font-weight: 400;
  font-size: 1rem;
  color: #9E9E9E;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>