advises-admin/src/views/main/dashboard/components/charts/index.vue

<template>
  <div>
    <lineChartModel :tableData="tableData" :lineListData="lineListData" title="收益" />
    <lineChartModel :tableData="tableData" :lineListData="lineListData" :type="'ecpm'" title="ECPM趋势"  />
  
    <userDataChart />
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { getIndexProfit, getIndexHourReport } from '@/api/dashboard.js'
import lineChartModel from './lineChartModel.vue'
import userDataChart from './userDataChart.vue'


const tableData = ref([])
const getIndexProfitData = async () => {
  const res = await getIndexProfit()
  tableData.value = res.data
}

const lineListData = ref({})
const getIndexHourReportData = async () => {
    const res = await getIndexHourReport()

    // 整理 lineListData
    lineListData.value = res.data.reduce((acc, item) => {
        const { channelName, estimatedRevenueList, estimatedRevenueEcpmList } = item;
        acc[channelName] = { estimatedRevenueList, estimatedRevenueEcpmList };
        return acc;
    }, {});
}

onBeforeMount(async () => {
  await getIndexProfitData()
  await getIndexHourReportData()
})

</script>

<style lang="scss" scoped></style>