sy-water-data-board-ui/src/views/Main/ProjectCountCard/index.vue

<template>
  <div class="project-count-card">
    <div class="sy-water-cart-title">工程数量</div>
    <div ref="chartRef" class="chart-wrapper"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';
import { useChartStore } from '@/store/modules/chart';

const chartStore = useChartStore();

defineOptions({
  name: 'ProjectCountCard'
});
const chartRef = ref();
let chart: echarts.ECharts | undefined;
const handleResize = () => {
  chart?.resize();
};
const projectCount = ref(0);
const projectData: any = ref([]);
const getChartData = async () => {
  projectCount.value = 0;
  // projectData.value = [];
  const pramas = {
    endTime: '',
    startTime: '',
    group: 'K1'
  };
  
  const data: any = await chartStore.initStatisticChart(pramas)
  if (data?.yaxis?.length) {
    projectData.value = [];
    let newArr = data.yaxis.flatMap((v: any) => v.series);
    newArr?.forEach((item: any) => {
      // if (item.code === 'YZT_TOUR_CHECK_RWS_SUM') {
      //   projectData.value.rws = +(+item.sum).toFixed(0);
      // }
      projectData.value.push({
        name: item.name || '',
        value: Number(item.sum)?.toFixed(0) || 0,
        unit: item.unit || ''
      });
      projectCount.value += Number(item.sum || 0);
    });
  } else {
    // 默认数据
    projectData.value = [
      {
        name: '水库',
        value: 0,
        unit: '座'
      },
      {
        name: '水闸',
        value: 0,
        unit: '座'
      },
      {
        name: '堤防',
        value: 0,
        unit: '段'
      }
    ];
  }
  await initChart();
};
const initChart = () => {
  if (!chartRef.value) return;
  chart?.clear();
  chart = echarts.init(chartRef.value);
  const legendName = projectData.value.map((item: any) => item.name);

  // Chart options
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      height: '95%',
      right: '8%',
      top: '20%',
      icon: 'circle', //设置为圆，删除则为矩形
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 16,
      data: legendName,
      formatter: function (name: any) {
        for (var i = 0; i < legendName.length; i++) {
          if (name == projectData.value[i].name) {
            return (
              '{name|' + name + '}{rate|' + projectData.value[i].value + '}{unit|' + projectData.value[i].unit + '}'
            );
          }
        }
      },
      textStyle: {
        rich: {
          name: {
            fontSize: 16,
            fontWeight: 400,
            height: 24,
            width: 60,
            padding: [0, 0, 0, 5],
            color: 'rgba(0, 0, 0, 0.55)'
          },
          rate: {
            fontSize: 18,
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei',
            height: 24,
            padding: [48, 0, 0, -60],
            color: 'rgba(0, 0, 0, 0.9)'
          },
          unit: {
            fontSize: 16,
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei',
            height: 24,
            padding: [48, 0, 0, 9],
            // align: 'right',
            color: 'rgba(0, 0, 0, 0.9)'
          }
        }
      }
    },
    series: [
      {
        name: '工程数量',
        type: 'pie',
        roseType: 'area',
        radius: ['40%', '70%'],
        center: ['30%', '55%'],
        startAngle: 270,
        clockwise: false, // Set to counter-clockwise to match design
        z: 10,
        itemStyle: {
          borderRadius: 0,
          borderWidth: 0,
          borderColor: '#fff'
        },
        label: {
          show: false
        },
        color: ['#4293F4', '#30DFBA', '#FF755B', '#FFF03B', '#FFF03B'],
        data: projectData.value
        // [
        //   {
        //     value: reservoirCount,
        //     name: '水库',
        //     itemStyle: { color: '#4293F4' }
        //   },
        //   {
        //     value: sluiceCount,
        //     name: '水闸',
        //     itemStyle: { color: '#30DFBA' }
        //   },
        //   {
        //     value: damCount,
        //     name: '堤防',
        //     itemStyle: { color: '#FF755B' }
        //   }
        // ]
      },
      {
        name: '总数',
        type: 'pie',
        radius: ['0', '30%'],
        center: ['30%', '55%'],
        z: 0,
        itemStyle: {
          color: 'transparent',
          borderWidth: 0,
          borderColor: '#eee'
        },
        label: {
          position: 'center',
          formatter: function () {
            return ['{total|' + projectCount.value + '}', '{label|总数}'].join('\n');
          },
          rich: {
            total: {
              color: '#000',
              fontSize: 28,
              fontWeight: 'bold',
              fontFamily: 'DIN',
              lineHeight: 34
            },
            label: {
              color: 'rgba(0, 0, 0, 0.6)',
              fontSize: 14,
              lineHeight: 18,
              fontFamily: 'Source Han Sans'
            }
          }
        },
        data: [{ value: 1, name: '总数', tooltip: { show: false } }]
      }
    ]
  };

  // Set options and render chart
  chart.setOption(option);
};
onMounted(() => {
  getChartData();
  window.addEventListener('resize', handleResize);
});
onBeforeUnmount(() => {
  chart?.dispose();
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped lang="less">
.project-count-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  .chart-wrapper {
    width: 100%;
    height: 254px;
  }
}
</style>