wuhuacong(伍華聰)的專欄

//聲明Props的接口類型
interface Props {
  data?: any[]; // 固定列表方式，直接綁定,項目包括id,label屬性
}
//使用默認值定義Props
const props = withDefaults(defineProps<Props>(), {
  data: () => {
    return [];
  },
});

watch(
  () => props.data,
  (newValue = []) => {
    loadChart(newValue);
  },
  { immediate: true } // 可選：如果你希望首次立即觸發(fā)
);

// 加載圖表數(shù)據(jù)
async function loadChart(res) {
  setOptions(
    {
      tooltip: {
        trigger: "item"
      },
      legend: { //圖例設(shè)置
        orient: "vertical",
        right: 'right'
      },
      series: [
        {
          name: "標(biāo)題信息", //圖表標(biāo)題
          type: "pie",    //圖表類型，餅圖
          radius: "60%",
          center: ["30%", "50%"],
          data: res, //動態(tài)數(shù)據(jù)
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    },
    {
      name: "click",
      callback: params => {
        console.log("click", params);
      }
    },
    {
      type: "zrender",
      name: "click",
      callback: params => {
        console.log("點擊空白處", params);
      }
    }
  );
};

<template>
  <div ref="pieChartRef" style="width: 100%; height: 35vh" />
</template>

// 餅圖處理
async function searchPie() {
  const data = await report.CarbonSummaryCategory(Number(year.value));
  pieData.value = data.map(item => ({
    value: item.value,
    name: `${item.category} (${item.percentage})`
  }));
}

import Pie from '@/components/echarts/Pie.vue';

//聲明Props的接口類型
interface Props {
  year?: number | string;
  month?: number | string;
  stack?: boolean; //是否堆疊
  type?: string; //圖表類型
  showLink?: boolean;
}

//使用默認值定義Props
const props = withDefaults(defineProps<Props>(), {
  year: 0,
  month: 0,
  stack: true,
  type: 'bar',
  showLink: false,
});

// 獲取當(dāng)前日期
const currentDate = new Date();
const currentYear = ref(currentDate.getFullYear());
const currentMonth = ref(currentDate.getMonth() + 1); // 月份從0開始，所以加1

// ? 在 setup 中補充默認值（只當(dāng) props 沒傳時才使用當(dāng)前時間）
const year = computed(() => Number(props.year || currentYear.value))
const month = computed(() => Number(props.month || currentMonth.value))

const loading = ref(true);
const barData = ref(); // 折線圖數(shù)據(jù)
const pieData = ref([]); // 餅圖數(shù)據(jù)

//頁面初始化加載
onMounted(async () => {
  await search();
});

async function search() {
  loading.value = true;
  await searchPie();

  setTimeout(() => {
    loading.value = false;
  }, 500);
}

// 監(jiān)聽 Props 變化
watch(
  () => [props.year, props.month, props.stack, props.type],
  async () => {
    await search();
  }
);

// 餅圖處理
async function searchPie() {
  const data = await report.CarbonSummaryCategory(Number(year.value));
  pieData.value = data.map(item => ({
    value: item.value,
    name: `${item.category} (${item.percentage})`
  }));
}

<template>
  <div class="welcome">
    <el-card>
      <template #header>
        <span style="font-size: 16px; font-weight: 500"> {{ year }} 年碳排放占比 </span>
        <div class="float-end" v-if="showLink">
          <router-link to="/report/carbon_summary">
            <el-link type="primary">查看詳細</el-link>
          </router-link>
        </div>
      </template>
      <el-skeleton animated :rows="7" :loading="loading">
        <template #default>
          <Pie :data="pieData" />
        </template>
      </el-skeleton>
    </el-card>
  </div>
</template>