首页接入收益和ECPM数据图表

src/api/dashboard.js

@@ -7,4 +7,13 @@ export function getIndexProfit(data) {
         method: 'post',
         data
     })
+}
+
+// 查询分小时报表
+export function getIndexHourReport(data) {
+    return request({
+        url: '/agent-service/index/hourReport',
+        method: 'post',
+        data
+    })
 }

src/views/main/dashboard/components/charts/barChart.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="box">
-    <Chart :option="options" />
-  </div>
-</template>
-
-<script lang="js">
-import { defineComponent, onBeforeUnmount, reactive } from 'vue'
-import Chart from '@/components/charts/index.vue'
-import option from './modules/bar'
-export default defineComponent({
-  components: {
-    Chart
-  },
-  setup() {
-    let timer = null;
-    const datar = [100,200,300,400,500,600,700,800,900,1000,1100,1200]
-    const options = reactive(option)
-    // 模拟异步请求
-    timer = setTimeout(() => {
-      options.series[0].data = datar
-    },1000)
-    // 组件销毁时清除定时器
-    onBeforeUnmount(() => {
-      clearInterval(timer)
-      timer = null;
-    })
-    return {
-      options
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-  .box {
-    margin: 10px auto 0;
-    width: calc(100% - 40px);
-    height: 400px;
-    background: var(--system-page-background);
-    padding: 20px;
-    overflow: hidden;
-  }
-</style>

src/views/main/dashboard/components/charts/circleChart.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="box">
-    <Chart :option="options" />
-  </div>
-</template>
-
-<script lang="js">
-import { defineComponent, reactive } from 'vue'
-import Chart from '@/components/charts/index.vue'
-import option from './modules/circle'
-export default defineComponent({
-  components: {
-    Chart
-  },
-  setup() {
-    const options = reactive(option)
-    return {
-      options
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-  .box {
-    margin: 20px auto 0;
-    width: calc(100% - 40px);
-    height: 400px;
-    background: var(--system-page-background);
-    padding: 20px 20px 10px;
-    overflow: hidden;
-  }
-</style>

src/views/main/dashboard/components/charts/ecpmChaet.vue

@@ -1,421 +0,0 @@
-<template>
-    <div class="layout-container-main" id="jcsb">
-        <div class="item" id="box1">
-            <div class="layout-container-main-top">
-                <div class="top-left">
-                    <div class="line"></div>
-                    <span>平均ECPM</span>
-                </div>
-                <div class="main"></div>
-            </div>
-            <div class="main-echart" ref="chartRef">
-                <el-table class="table" :data="tableData" border height="100%" :fit="true" :scroll-x="false"
-                    :style="{ width: '100%' }">
-                    <el-table-column prop="platform" label="统计" align="center" />
-                    <el-table-column prop="today" label="今日" align="center" />
-                    <el-table-column prop="yesterday" label="昨日" align="center" />
-                    <el-table-column prop="month" label="本月" align="center" />
-                </el-table>
-
-                <Chart class="chart" :option="options" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { defineComponent, reactive, ref, onMounted } from 'vue'
-import Chart from '@/components/charts/index.vue'
-//穿山甲、优量汇、快手、Sigmob、百度
-
-const xAxisList = [
-    '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00',
-    '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-    '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
-];
-
-const seriesData = [450, 200, 300, 520, 800, 760, 700, 680, 700, 650, 690, 710, 450, 200, 300, 520, 800, 760, 700, 680, 700, 650, 690, 710];
-// 穿山甲数据（随机生成，保持原40-80范围）
-const seriesData1 = [42, 25, 33, 55, 76, 68, 72, 63, 71, 65, 62, 69, 45, 22, 31, 53, 79, 73, 68, 64, 72, 61, 67, 70];
-
-// 优量汇数据（模拟中型广告平台，范围200-500）
-const seriesData2 = (() => {
-    const base = [380, 210, 290, 470, 490, 420, 450, 430, 460, 410, 440, 480];
-    return [...base, ...base.map(v => v * 0.9)]; // 下午数据略降
-})();
-
-// 快手数据（模拟短视频平台，高峰在晚间）
-const seriesData3 = [
-    320, 180, 220, 300, 350,
-    420, 550, 680, 720, 650, // 早高峰
-    600, 580, 320, 280, 350,
-    480, 620, 750, 820, 880, // 晚高峰
-    760, 680, 550, 450
-];
-
-// Sigmob数据（模拟国际广告平台，较平稳）
-const seriesData4 = Array(24).fill(0).map(
-    (_, i) => 350 + Math.sin(i / 4) * 100 + (i > 12 ? -20 : 0) + Math.random() * 30
-).map(v => Math.round(v));
-
-// 百度数据（模拟搜索广告，白天稳定）
-const seriesData5 = xAxisList.map((_, i) =>
-    i < 8 ? 280 + i * 20 :       // 清晨上升
-        i < 18 ? 420 + (i % 3) * 15 :  // 白天稳定
-            400 - (i - 18) * 25            // 夜间下降
-);
-
-
-const options = {
-    /* title: {
-        text: "单位：个",
-        textStyle: {
-            color: "#808080",
-            fontSize: 12
-        },
-        left: "20",
-        top: "0"
-    }, */
-    grid: {
-        top: 20,
-        right: 20,
-        bottom: 0,  // 可根据需要设为 0~40
-        left: 40,
-        containLabel: true
-    },
-    tooltip: {
-        trigger: 'axis', // 触发类型为坐标轴
-        axisPointer: {
-            type: 'cross' // 指示器类型为十字准星
-        },
-        formatter: function (params) {
-            // 自定义提示框内容
-            let result = params[0].axisValue + '<br>'; // 显示时间点
-            params.forEach(function (item) {
-                // 为每个系列添加数据行
-                result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'
-                    + item.color + '"></span>'
-                    + item.seriesName + ': ' + item.value + '<br>';
-            });
-            return result;
-        }
-    },
-    legend: {
-        data: ['平均ecpm', '穿山甲', '优量汇', '快手', 'Sigmob', '百度'],
-        top: 'top',
-        textStyle: {
-            color: '#808080'
-        }
-    },
-    xAxis: {
-        type: 'category',
-        data: xAxisList,
-        axisLabel: {
-            color: "#808080",
-            fontSize: 12
-        },
-        axisLine: {
-            show: false,
-        },
-        axisTick: {
-            show: false
-        },
-        splitLine: {
-            show: false
-        },
-    },
-    yAxis: {
-        min: 0,
-        nameTextStyle: {
-            color: '#808080',
-            fontSize: 12,
-        },
-        axisLabel: {
-            color: "#808080",
-            fontSize: 12
-        },
-        axisLine: {
-            show: false
-        },
-        axisTick: {
-            show: false
-        },
-        splitLine: {
-            show: true,
-            lineStyle: {
-                color: 'rgba(0,0,0,0.15)',
-            }
-        }
-    },
-    series: [
-        {
-            type: 'line',
-            name: '平均ecpm',
-            symbolSize: 6,
-            z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#70e3cd'
-            },
-            lineStyle: {
-                color: '#70e3cd',
-                width: 2,
-            },
-            data: seriesData,
-        },
-        {
-            type: 'line',
-            name: '穿山甲',
-            symbolSize: 6,
-            z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#add7f6'
-            },
-            lineStyle: {
-                color: '#add7f6',
-                width: 2,
-            },
-            data: seriesData1,
-        },
-        {
-            type: 'line',
-            name: '优量汇',
-            symbolSize: 6,
-            z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#f7a8b8'
-            },
-            lineStyle: {
-                color: '#f7a8b8',
-                width: 2,
-            },
-            data: seriesData2,
-        },
-        {
-            type: 'line',
-            name: '快手',
-            symbolSize: 6,
-            z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#ffcc5c'
-            },
-            lineStyle: {
-                color: '#ffcc5c',
-                width: 2,
-            },
-            data: seriesData3,
-        },
-        {
-            type: 'line',
-            name: 'Sigmob',
-            symbolSize: 6,
-            z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#88d8b0'
-            },
-            lineStyle: {
-                color: '#88d8b0',
-                width: 2,
-            },
-            data: seriesData4,
-        },
-        {
-            type: 'line',
-            name: '百度',
-            symbolSize: 6,
-            z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#9966cc'
-            },
-            lineStyle: {
-                color: '#9966cc',
-                width: 2,
-            },
-            data: seriesData5,
-        }
-    ]
-};
-
-
-
-
-// 收益统计表格数据格式
-const tableData = ref([
-    {
-        platform: '穿山甲',
-        today: '0.00',
-        yesterday: '0.00',
-        month: '0.00'
-    },
-    {
-        platform: '优量汇',
-        today: '10',
-        yesterday: '9.70',
-        month: '53.43'
-    },
-    {
-        platform: '快手',
-        today: '18',
-        yesterday: '16.43',
-        month: '16.03'
-    },
-    {
-        platform: 'Sigmob',
-        today: '0.00',
-        yesterday: '0.00',
-        month: '0.00'
-    },
-    {
-        platform: '百度',
-        today: '0.00',
-        yesterday: '0.00',
-        month: '0.00'
-    }
-]);
-</script>
-
-<style lang="scss" scoped>
-.layout-container-main {
-    margin-top: 10px;
-    display: flex;
-    /* margin: 0 1.25rem; */
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    .item {
-        width: calc(100vw - 1.13rem - 1.31rem);
-        display: flex;
-        flex-direction: column;
-        padding: 1.13rem 1.31rem;
-        margin-bottom: 1.25rem;
-        /* height: 26.94rem; */
-        border-radius: 0.5rem;
-        background: #fff;
-        box-shadow: 0 0 0.13rem #00000029;
-
-        .layout-container-main-top {
-            height: 6vh;
-            display: flex;
-            justify-content: space-between;
-
-            .top-left {
-                display: flex;
-
-                .line {
-                    width: 0.25rem;
-                    height: 1.56rem;
-                    border-radius: 0.13rem;
-                    background: #409eff;
-                }
-
-                span {
-                    margin: 0 1rem;
-                    font-family: "PingFang SC SNaNremibold";
-                    font-weight: 600;
-                    font-size: 1.13rem;
-
-                    color: #333;
-                }
-
-                .text {
-                    display: inline-block;
-                    /* // margin: 0 0.63rem; */
-                    width: 3.63rem;
-                    font-weight: 400;
-                    height: 1.88rem;
-                    line-height: 1.88rem;
-                    border-radius: 0.25rem;
-                    background: transparent;
-                    border: 0.03rem solid #999;
-                    font-size: 0.88rem;
-                    text-align: center;
-                    color: #999;
-                    cursor: pointer;
-                }
-
-                .active {
-                    border-radius: 0.25rem;
-                    background: #fdb818;
-                    color: #fff;
-                    border: 0.03rem solid #fff;
-                }
-            }
-        }
-
-        .main-echart {
-            width: 100%;
-            display: flex;
-            height: 55vh;
-
-            .table {
-                flex: 1;
-                min-width: 250px;
-                /* 防止过窄导致表格挤压 */
-                overflow-x: auto;
-            }
-
-            .table :deep(.el-table__body-wrapper tbody tr) {
-                // height: calc(100% / 7);
-                height: calc(61vh / 6);
-            }
-
-            .chart {
-                flex: 3;
-                min-width: 300px;
-            }
-
-            @media screen and (max-width: 1024px) {
-                flex-direction: column;
-
-                .table,
-                .chart {
-                    width: 100%;
-                    min-width: unset;
-                }
-
-                .table {
-                    flex: 2;
-                    overflow-x: auto;
-                    margin-bottom: 10px;
-                }
-
-                .table :deep(.el-table__body-wrapper tbody tr) {
-                    height: calc(100% / 6);
-                }
-
-                .chart {
-                    flex: 3;
-                }
-            }
-        }
-    }
-}
-
-
-.stats-table {
-    margin: 20px;
-    width: 100vw;
-}
-
-:deep(.el-table__header th) {
-    background-color: #f5f7fa;
-    font-weight: bold;
-}
-</style>

src/views/main/dashboard/components/charts/index.vue

@@ -1,47 +1,42 @@
 <template>
   <div>
-    <earningsChart />
-    <ecpmChaet />
+    <lineChartModel :tableData="tableData" :lineListData="lineListData" title="收益" />
+    <lineChartModel :tableData="tableData" :lineListData="lineListData" :type="'ecpm'" title="ECPM趋势"  />
+  
     <userDataChart />
-    <!-- <onlineChart /> -->
-
-    <!-- <barChart /> -->
-    <!-- <el-row :gutter="20">
-      <el-col :lg="12" :md="24">
-        <pieChart />
-      </el-col>
-      <el-col :lg="12" :md="24">
-        <circleChart />
-      </el-col>
-    </el-row> -->
   </div>
 </template>
 
-<script lang="js">
-  import { defineComponent } from 'vue'
-  import barChart from './barChart.vue'
-  import pieChart from './pieChart.vue'
-  import circleChart from './circleChart.vue'
-  import onlineChart from './onlineChart.vue'
-  import earningsChart from './earningsChart.vue'
-  import ecpmChaet from './ecpmChaet.vue'
-  import userDataChart from './userDataChart.vue'
-  export default defineComponent({
-    components: {
-      onlineChart,
-      barChart,
-      pieChart,
-      circleChart,
-      earningsChart,
-      ecpmChaet,
-      userDataChart
-    },
-    setup() {
-
-    }
-  })
-</script>
+<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()
 
-<style lang="scss" scoped>
+    // 整理 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>
+<style lang="scss" scoped></style>

src/views/main/dashboard/components/charts/earningsChart.vue → src/views/main/dashboard/components/charts/lineChartModel.vue

@@ -4,9 +4,9 @@
             <div class="layout-container-main-top">
                 <div class="top-left">
                     <div class="line"></div>
-                    <span>收益</span>
+                    <span>{{ title }}</span>
                 </div>
-                <div class="main">
+                <div class="main" v-if="type === 'earn'">
                     <el-row>
                         <el-col :span="8">
                             <el-statistic title="今日收益" :value="268.5" precision="2" />
@@ -24,9 +24,9 @@
                 <el-table class="table" :data="tableData" border height="100%" :fit="true" :scroll-x="false"
                     :style="{ width: '100%' }">
                     <el-table-column prop="platform" label="统计" align="center" />
-                    <el-table-column prop="today" label="今日" align="center" />
-                    <el-table-column prop="yesterday" label="昨日" align="center" />
-                    <el-table-column prop="month" label="本月" align="center" />
+                    <el-table-column :prop="type === 'earn' ? 'today' : 'ecpmToday'" label="今日" align="center" />
+                    <el-table-column :prop="type === 'earn' ? 'yesterday' : 'ecpmYesterday'" label="今日" align="center" />
+                    <el-table-column :prop="type === 'earn' ? 'month' : 'ecpmMonth'" label="今日" align="center" />
                 </el-table>
 
                 <Chart class="chart" :option="options" />
@@ -36,24 +36,30 @@
 </template>
 
 <script setup>
-import { defineComponent, reactive, ref, onMounted, onBeforeMount } from 'vue'
+import { ref, watch } from 'vue'
 import Chart from '@/components/charts/index.vue'
-import { getIndexProfit } from '@/api/dashboard.js'
-//穿山甲、优量汇、快手、Sigmob、百度
 
-// 收益统计表格数据格式
-const tableData = ref([])
-
-const getIndexProfitData = async () => {
-    let res = await getIndexProfit()
-    tableData.value = res.data
-
-    console.log('收益数据', res)
-}
-
-onBeforeMount(async () => {
-    await getIndexProfitData()
-})
+const props = defineProps({
+    // 表格数据
+    tableData: {
+        type: Array,
+        default: []
+    },
+    // 折线图数据
+    lineListData: {
+        type: Object,
+        default: {}
+    },
+    // 类型 'earn'- 收益 | 'ecpm'
+    type: {
+        type: String,
+        default: 'earn'
+    },
+    title: {
+        type: String,
+        default: ''
+    }
+});
 
 const xAxisList = [
     '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00',
@@ -61,39 +67,7 @@ const xAxisList = [
     '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
 ];
 
-const seriesData = [450, 200, 300, 520, 800, 760, 700, 680, 700, 650, 690, 710, 450, 200, 300, 520, 800, 760, 700, 680, 700, 650, 690, 710];
-// 穿山甲数据（随机生成，保持原40-80范围）
-const seriesData1 = [42, 25, 33, 55, 76, 68, 72, 63, 71, 65, 62, 69, 45, 22, 31, 53, 79, 73, 68, 64, 72, 61, 67, 70];
-
-// 优量汇数据（模拟中型广告平台，范围200-500）
-const seriesData2 = (() => {
-    const base = [380, 210, 290, 470, 490, 420, 450, 430, 460, 410, 440, 480];
-    return [...base, ...base.map(v => v * 0.9)]; // 下午数据略降
-})();
-
-// 快手数据（模拟短视频平台，高峰在晚间）
-const seriesData3 = [
-    320, 180, 220, 300, 350,
-    420, 550, 680, 720, 650, // 早高峰
-    600, 580, 320, 280, 350,
-    480, 620, 750, 820, 880, // 晚高峰
-    760, 680, 550, 450
-];
-
-// Sigmob数据（模拟国际广告平台，较平稳）
-const seriesData4 = Array(24).fill(0).map(
-    (_, i) => 350 + Math.sin(i / 4) * 100 + (i > 12 ? -20 : 0) + Math.random() * 30
-).map(v => Math.round(v));
-
-// 百度数据（模拟搜索广告，白天稳定）
-const seriesData5 = xAxisList.map((_, i) =>
-    i < 8 ? 280 + i * 20 :       // 清晨上升
-        i < 18 ? 420 + (i % 3) * 15 :  // 白天稳定
-            400 - (i - 18) * 25            // 夜间下降
-);
-
-
-const options = {
+const options = ref({
     /* title: {
         text: "单位：个",
         textStyle: {
@@ -128,7 +102,7 @@ const options = {
         }
     },
     legend: {
-        data: ['平均收益', '穿山甲', '优量汇', '快手', 'Sigmob', '百度'],
+        data: ['穿山甲', '优量汇', '快手', 'Sigmob', '百度'],
         top: 'top',
         textStyle: {
             color: '#808080'
@@ -174,111 +148,77 @@ const options = {
             }
         }
     },
-    series: [
-        {
-            type: 'line',
-            name: '平均收益',
-            symbolSize: 6,
-            z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#70e3cd'
-            },
-            lineStyle: {
-                color: '#70e3cd',
-                width: 2,
-            },
-            data: seriesData,
-        },
+    series: []
+});
+
+
+// 监听 props.lineListData 变化，动态更新 series
+watch(() => props.lineListData, (newVal) => {
+    if (Object.keys(newVal).length === 0) return; // 空数据不更新
+
+    options.value.series = [
         {
             type: 'line',
             name: '穿山甲',
             symbolSize: 6,
             z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#add7f6'
-            },
-            lineStyle: {
-                color: '#add7f6',
-                width: 2,
-            },
-            data: seriesData1,
+            label: { show: false },
+            itemStyle: { color: '#add7f6' },
+            lineStyle: { color: '#add7f6', width: 2 },
+            data: props.type === 'earn' ?
+                newVal['穿山甲']?.estimatedRevenueList ?? [] :
+                newVal['穿山甲']?.estimatedRevenueEcpmList ?? []
         },
         {
             type: 'line',
             name: '优量汇',
             symbolSize: 6,
             z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#f7a8b8'
-            },
-            lineStyle: {
-                color: '#f7a8b8',
-                width: 2,
-            },
-            data: seriesData2,
+            label: { show: false },
+            itemStyle: { color: '#f7a8b8' },
+            lineStyle: { color: '#f7a8b8', width: 2 },
+            data: props.type === 'earn' ?
+                newVal['优量汇']?.estimatedRevenueList ?? [] :
+                newVal['优量汇']?.estimatedRevenueEcpmList ?? []
         },
         {
             type: 'line',
             name: '快手',
             symbolSize: 6,
             z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#ffcc5c'
-            },
-            lineStyle: {
-                color: '#ffcc5c',
-                width: 2,
-            },
-            data: seriesData3,
+            label: { show: false },
+            itemStyle: { color: '#ffcc5c' },
+            lineStyle: { color: '#ffcc5c', width: 2 },
+            data: props.type === 'earn' ?
+                newVal['快手']?.estimatedRevenueList ?? [] :
+                newVal['快手']?.estimatedRevenueEcpmList ?? []
         },
         {
             type: 'line',
             name: 'Sigmob',
             symbolSize: 6,
             z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#88d8b0'
-            },
-            lineStyle: {
-                color: '#88d8b0',
-                width: 2,
-            },
-            data: seriesData4,
+            label: { show: false },
+            itemStyle: { color: '#88d8b0' },
+            lineStyle: { color: '#88d8b0', width: 2 },
+            data: props.type === 'earn' ?
+                newVal['Sigmob']?.estimatedRevenueList ?? [] :
+                newVal['Sigmob']?.estimatedRevenueEcpmList ?? []
         },
         {
             type: 'line',
             name: '百度',
             symbolSize: 6,
             z: 1,
-            label: {
-                show: false // Hide labels
-            },
-            itemStyle: {
-                color: '#9966cc'
-            },
-            lineStyle: {
-                color: '#9966cc',
-                width: 2,
-            },
-            data: seriesData5,
+            label: { show: false },
+            itemStyle: { color: '#9966cc' },
+            lineStyle: { color: '#9966cc', width: 2 },
+            data: props.type === 'earn' ?
+                newVal['百度']?.estimatedRevenueList ?? [] :
+                newVal['百度']?.estimatedRevenueEcpmList ?? []
         }
     ]
-};
+}, { immediate: true })
 
 </script>
 

src/views/main/dashboard/components/charts/modules/bar.js

@@ -1,151 +0,0 @@
-var xAxis_data = ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"]
-var data_A = [820, 932, 901, 934, 1290, 1330, 1320, 720, 832, 501, 334, 990]
-var data_B = [720, 832, 501, 334, 990, 830, 720, 620, 732, 801, 1134, 908]
-var data_C = [620, 732, 801, 1134, 908, 930, 920, 820, 932, 901, 934, 1290]
-var names = ['红包余额', '累计红包', '收益余额']
-var color = ['#4D8EFF', '#84BFFF', '#FE9D9A']
-
-const option = {
-  tooltip: {
-    trigger: 'axis',
-    // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
-    formatter: function (params, ticket, callback) {
-      var htmlStr = '';
-      for (var i = 0; i < params.length; i++) {
-        var param = params[i];
-        var xName = param.name;//x轴的名称
-        var seriesName = param.seriesName;//图例名称
-        var value = param.value;//y轴值
-        var color = param.color;//图例颜色
-        if (i === 0) {
-          htmlStr += xName + '<br/>';//x轴的名称
-        }
-        htmlStr += '<div>';
-        htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';//一个点
-        htmlStr += seriesName + '：' + value + '万元';//圆点后面显示的文本
-        htmlStr += '</div>';
-      }
-      return htmlStr;
-    }
-  },
-  grid: {       //页边距
-    top: '20%',
-    left: '1%',
-    right: '1%',
-    bottom: '1%',
-    containLabel: true
-  },
-  legend: {      // 图例
-    top: '5%',
-    // right:'20%',
-    data: names
-  },
-
-  xAxis: {
-    type: 'category',
-    data: xAxis_data,
-    axisLine: {//坐标线
-      lineStyle: {
-        type: 'solid',
-        color: '#E3E3E3', //轴线的颜色
-        width: '2' //坐标线的宽度
-      }
-    },
-    axisLabel: {
-      formatter: '{value}',
-    },
-    textStyle: {
-      fontSize: 12,
-      fontFamily: 'PingFang SC',
-      fontWeight: 400,
-      lineHeight: 17,
-      color: '#646464', //坐标值的具体的颜色
-      opacity: 1,
-    },
-    axisTick: {
-      show: false
-    }
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: {//线
-      show: false
-    },
-    axisTick: {//刻度
-      show: false
-    },
-    axisLabel: {
-      formatter: '{value}',
-    },
-    textStyle: {
-      fontSize: 12,
-      fontFamily: 'PingFang SC',
-      fontWeight: 400,
-      lineHeight: 17,
-      color: '#979A9F', //坐标值的具体的颜色
-      opacity: 1,
-    },
-    splitLine: {
-      lineStyle: {
-        type: 'dashed',
-        width: 2,
-        color: ['#E3E3E3'] //分割线的颜色
-        // color: ['#5d5d5d'] //分割线的颜色
-      }
-    }
-  },
-  series: [
-    {
-      type: 'bar',
-      name: names[1],
-      data: data_A,
-      symbolSize: 9, //设置拐点大小
-      itemStyle: {
-        color: color[0]
-      },
-      lineStyle: {
-        width: 2,
-        type: 'solid'  //'dotted'虚线 'solid'实线
-      }
-    }, {
-      type: 'bar',
-      name: names[2],
-      data: data_B,
-      symbolSize: 9, //设置拐点大小
-      itemStyle: {
-        color: color[1]
-      },
-      lineStyle: {
-        width: 2,
-        type: 'solid'  //'dotted'虚线 'solid'实线
-      }
-    }, {
-      type: 'line',
-      name: names[0],
-      data: data_C,
-      symbolSize: 9, //设置拐点大小
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [{
-            offset: 0, color: '#fe9d9a66' // 0% 处的颜色
-          }, {
-            offset: 1, color: '#fe9d9a00' // 100% 处的颜色
-          }],
-          global: false // 缺省为 false
-        }
-      },
-      color: color[2], //设置颜色
-      lineStyle: {
-        width: 2,
-        type: 'solid'  //'dotted'虚线 'solid'实线
-      }
-    },
-  ]
-}
-
-export default option

src/views/main/dashboard/components/charts/modules/circle.js

@@ -1,42 +0,0 @@
-const option = {
-  series: [
-    {
-      name: '访问来源',
-      type: 'pie',
-      radius: ['40%', '70%'],
-      avoidLabelOverlap: false,
-      itemStyle: {
-        borderRadius: 10,
-        borderColor: '#fff',
-        borderWidth: 10
-      },
-      label: {
-        show: false,
-        position: 'center'
-      },
-      emphasis: {
-        label: {
-          show: true,
-          fontSize: '26',
-          fontWeight: 'bold',
-          formatter: (p) => {
-            let dom = `<div backgroundColor="red">1</div>`
-            return p.name + '\n' + p.value
-          }
-        }
-      },
-      labelLine: {
-        show: false
-      },
-      data: [
-        { value: 1048, name: '搜索引擎' },
-        { value: 735, name: '直接访问' },
-        { value: 580, name: '邮件营销' },
-        { value: 484, name: '联盟广告' },
-        { value: 300, name: '视频广告' }
-      ]
-    }
-  ]
-};
-
-export default option

src/views/main/dashboard/components/charts/modules/pie.js

@@ -1,68 +0,0 @@
-const option = {
-  title: {
-      text: '注册人数占比变化',
-      subtext: '纯属虚构',
-      top: 10,
-      left: 10
-  },
-  tooltip: {
-      trigger: 'item'
-  },
-  legend: {
-      type: 'scroll',
-      bottom: 10,
-      data: (function (){
-          var list = [];
-          for (var i = 1; i <=28; i++) {
-              list.push(i + 2000 + '');
-          }
-          return list;
-      })()
-  },
-  visualMap: {
-      top: 'middle',
-      right: 10,
-      color: ['red', 'yellow'],
-      calculable: true
-  },
-  radar: {
-      indicator: [
-          { text: '安卓', max: 400},
-          { text: '平板', max: 400},
-          { text: 'Safari', max: 400},
-          { text: 'Windows', max: 400},
-          { text: 'iOS', max: 400}
-      ]
-  },
-  series: (function (){
-      var series = [];
-      for (var i = 1; i <= 28; i++) {
-          series.push({
-              name: '浏览器（数据纯属虚构）',
-              type: 'radar',
-              symbol: 'none',
-              lineStyle: {
-                  width: 1
-              },
-              emphasis: {
-                  areaStyle: {
-                      color: 'rgba(0,250,0,0.3)'
-                  }
-              },
-              data: [{
-                  value: [
-                      (40 - i) * 10,
-                      (38 - i) * 4 + 60,
-                      i * 5 + 10,
-                      i * 9,
-                      i * i /2
-                  ],
-                  name: i + 2000 + ''
-              }]
-          });
-      }
-      return series;
-  })()
-};
-
-export default option

src/views/main/dashboard/components/charts/onlineChart.vue

@@ -1,271 +0,0 @@
-<template>
-    <div class="layout-container-main" id="jcsb">
-        <div class="item" id="box1">
-            <div class="layout-container-main-top" style="display: flex;justify-content: space-between;">
-                <div class="top-left">
-                    <div class="line"></div>
-                    <span>用户在线量</span>
-                    <!--  <div v-for="(item, index) in options" :key="item.value">
-                        <span class="text" :class="{ active: tabIndex == index }" @click="clickTap(index, item)">{{
-                            item.label
-                            }}</span>
-                    </div> -->
-                </div>
-                <!--  <div>
-                    <el-select v-model="value1" placeholder="年份" style="width: 100px" @change="changeData1">
-                        <el-option v-for="item in year" :key="item.value" :label="`${item.label}年`"
-                            :value="item.value" />
-                    </el-select>
-                    <el-select v-model="value2" placeholder="月份" style="width: 80px" @change="changeData">
-                        <el-option v-for="(item, index) in 12" :key="index" :label="`${item}月`" :value="item" />
-                    </el-select>
-                </div> -->
-                <div class="main"></div>
-            </div>
-            <div class="main-echart" ref="chartRef">
-                <Chart :option="options" />
-            </div>
-
-        </div>
-        <div class="item" id="box1">
-            <div class="layout-container-main-top" style="display: flex;justify-content: space-between;">
-                <div class="top-left">
-                    <div class="line"></div>
-                    <span>收益</span>
-                    <!--  <div v-for="(item, index) in options" :key="item.value">
-                        <span class="text" :class="{ active: tabIndex == index }" @click="clickTap(index, item)">{{
-                            item.label
-                            }}</span>
-                    </div> -->
-                </div>
-                 <!-- <div>
-                    <el-select v-model="value1" placeholder="年份" style="width: 100px" @change="changeData1">
-                        <el-option v-for="item in year" :key="item.value" :label="`${item.label}年`"
-                            :value="item.value" />
-                    </el-select>
-                    <el-select v-model="value2" placeholder="月份" style="width: 80px" @change="changeData">
-                        <el-option v-for="(item, index) in 12" :key="index" :label="`${item}月`" :value="item" />
-                    </el-select>
-                </div> -->
-                <div class="main"></div>
-            </div>
-            <div class="main-echart" ref="chartRef">
-                <Chart :option="options" />
-            </div>
-
-        </div>
-    </div>
-</template>
-
-<script lang="js" setup>
-    import { defineComponent, reactive, ref, onMounted } from 'vue'
-    import Chart from '@/components/charts/index.vue'
-    // import * as echarts from 'echarts'
-
-    const seriesData = [450, 200, 300, 520, 800, 760, 700, 680, 700, 650, 690, 710, 450, 200, 300, 520, 800, 760, 700, 680, 700, 650, 690, 710]
-    const xAxisList = [
-        '00:00',
-        '01:00',
-        '02:00',
-        '03:00',
-        '04:00',
-        '05:00',
-        '06:00',
-        '07:00',
-        '08:00',
-        '09:00',
-        '10:00',
-        '11:00',
-        '12:00',
-        '13:00',
-        '14:00',
-        '15:00',
-        '16:00',
-        '17:00',
-        '18:00',
-        '19:00',
-        '20:00',
-        '21:00',
-        '22:00',
-        '23:00',
-    ]
-    const options = {
-        title: {
-            text: "单位：个", // 主标题文本，支持使用 \n 换行
-            textStyle: {
-                color: "#808080", // 主标题文字的颜色
-                fontSize: 12 // 主标题文字的字体大小
-            },
-            left: "20", // title 组件离容器左侧的距离
-            top: "20" // title 组件离容器上侧的距离
-        },
-        tooltip: {
-            trigger: 'axis',
-            formatter: '{c}个' // 提示框浮层内容格式器
-        },
-        legend: {
-            data: ['在线量'],
-            top: 'top', // 或者自定义位置
-            textStyle: {
-                color: '#808080'
-            }
-        },
-        xAxis: {
-            type: 'category',
-            data: xAxisList,
-            axisLabel: {
-                // 坐标轴字体颜色
-                color: "#808080",
-                fontSize: 12
-            },
-            axisLine: {
-                show: false, // 是否显示
-            },
-            axisTick: { // y轴刻度线
-                show: false // 是否显示
-            },
-            splitLine: { // 网格
-                show: false // 是否显示
-            },
-        },
-        yAxis: {
-            min: 0,
-            nameTextStyle: {
-                color: '#808080',
-                fontSize: 12,
-            },
-            axisLabel: {
-                // 坐标轴字体颜色
-                color: "#808080",
-                fontSize: 12
-            },
-            axisLine: {
-                show: false
-            },
-            axisTick: {
-                // y轴刻度线
-                show: false
-            },
-            splitLine: { // 网格
-                show: true, // 是否显示
-                lineStyle: {
-                    color: 'rgba(0,0,0,0.15)', // 颜色
-                }
-            }
-        },
-
-        series: [
-            {
-                type: 'line',
-                name: '在线量',
-                symbolSize: 10,
-                z: 1,
-                label: {
-                    show: true, // 线条折点处显示值
-                    position: 'top', // 标签的位置
-                    color: "#808080", // 文字颜色
-                    fontSize: 12, // 文字像素
-                },
-                itemStyle: {
-                    color: '#325DEC' // 图形的颜色
-                },
-                lineStyle: {
-                    color: '#325DEC', // 线的颜色
-                    width: 1, // 线的宽度
-                },
-                data: seriesData, // 数据
-            }
-        ]
-    };
-
-    /*   const chartRef = ref(null)
-  
-      onMounted(() => {
-          const chart = echarts.init(chartRef.value)
-          chart.setOption(options)
-      }) */
-</script>
-
-<style lang="scss" scoped>
-    .box {
-        margin: 20px auto 0;
-        width: calc(100% - 40px);
-        /* height: 400px; */
-        background: var(--system-page-background);
-        padding: 20px 20px 10px;
-        overflow: hidden;
-    }
-
-    .layout-container-main {
-        display: flex;
-        /* margin: 0 1.25rem; */
-        flex-wrap: wrap;
-        justify-content: space-between;
-
-        .item {
-            /* width: 100%; */
-            width: 40vw;
-            display: flex;
-            flex-direction: column;
-            padding: 1.13rem 1.31rem;
-            margin-bottom: 1.25rem;
-            height: 26.94rem;
-            border-radius: 0.5rem;
-            background: #fff;
-            box-shadow: 0 0 0.13rem #00000029;
-
-            .layout-container-main-top {
-                height: 6vh;
-
-                .top-left {
-                    display: flex;
-
-                    .line {
-                        width: 0.25rem;
-                        height: 1.56rem;
-                        border-radius: 0.13rem;
-                        background: #fdb818;
-                    }
-
-                    span {
-                        margin: 0 1rem;
-                        font-family: "PingFang SC SNaNremibold";
-                        font-weight: 600;
-                        font-size: 1.13rem;
-
-                        color: #333;
-                    }
-
-                    .text {
-                        display: inline-block;
-                        // margin: 0 0.63rem;
-                        width: 3.63rem;
-                        font-weight: 400;
-                        height: 1.88rem;
-                        line-height: 1.88rem;
-                        border-radius: 0.25rem;
-                        background: transparent;
-                        border: 0.03rem solid #999;
-                        font-size: 0.88rem;
-                        text-align: center;
-                        color: #999;
-                        cursor: pointer;
-                    }
-
-                    .active {
-                        border-radius: 0.25rem;
-                        background: #fdb818;
-                        color: #fff;
-                        border: 0.03rem solid #fff;
-                    }
-                }
-            }
-
-            .main-echart {
-                width: 100%;
-                height: 55vh;
-                /* background-color: red; */
-            }
-        }
-    }
-</style>

src/views/main/dashboard/components/charts/pieChart.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="box">
-    <Chart :option="options" />
-  </div>
-</template>
-
-<script lang="js">
-import { defineComponent, reactive } from 'vue'
-import Chart from '@/components/charts/index.vue'
-import option from './modules/pie'
-export default defineComponent({
-  components: {
-    Chart
-  },
-  setup() {
-    const options = reactive(option)
-    return {
-      options
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-  .box {
-    margin: 20px auto 0;
-    width: calc(100% - 40px);
-    height: 400px;
-    background: var(--system-page-background);
-    padding: 20px 20px 10px;
-    overflow: hidden;
-  }
-</style>

src/views/main/dashboard/components/charts/userDataChart.vue

@@ -27,6 +27,13 @@ import { ref } from 'vue'
 import Chart from '@/components/charts/index.vue'
 //穿山甲、优量汇、快手、Sigmob、百度
 
+
+const xAxisList = [
+    '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00',
+    '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00',
+    '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
+];
+
 const options = {
     grid: {
         top: 20,
@@ -44,10 +51,7 @@ const options = {
     xAxis: {
         type: 'category',
         boundaryGap: false,
-        data: [
-            '00:00', '04:00', '08:00',
-            '12:00', '16:00', '20:00'
-        ]
+        data: xAxisList
     },
     yAxis: {
         type: 'value'
@@ -56,37 +60,37 @@ const options = {
         {
             name: '新增数(ZID)',
             type: 'line',
-            data: [0.03, 0.1, 0.1, 0.3, 0.2, 0.5]
+            data: [0.03, 0.1, 0.1, 0.3, 0.2, 0.5,0,0,0.1,0,0,0.5,0,0,0,0,0.8,0,0,0.4,0,0,0,0]
         },
         {
             name: '注册数',
             type: 'line',
-            data: [0.3, 0, 0.2, 0.1, 0.3, 0.2]
+            data: [0.3, 0, 0.2, 0.1, 0.3, 0.2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.5,0,0,0]
         },
         {
             name: '登录数',
             type: 'line',
-            data: [0.2, 0.4, 0.2, 1, 0, 0.3]
+            data: [0.2, 0.4, 0.2, 1, 0, 0.3,0,0,0,0,0,0,0,0,0,0,0,0,0.6,0,0,0,0,0]
         },
         {
             name: '新增封禁',
             type: 'line',
-            data: [0, 0.2, 0.4, 0, 0.5, 0.7]
+            data: [0, 0.2, 0.4, 0, 0.5, 0.7,0,0,0,0,0,0,0,0,0,0,0,0,0.4,0,0,0,0,0]
         },
         {
             name: '总封禁',
             type: 'line',
-            data: [0.1, 0.1, 0, 0.1, 0, 0]
+            data: [0.1, 0.1, 0, 0.1, 0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0.3,0,0,0,0,0]
         },
         {
             name: '新增封号',
             type: 'line',
-            data: [0, 0.1, 0, 0.3, 0, 0]
+            data: [0, 0.1, 0, 0.3, 0, 0,0,0,0,0,0,0,0,0.2,0,0,0,0,0,0,0,0,0,0]
         },
         {
             name: '总封号',
             type: 'line',
-            data: [0, 0, 0, 0, 0, 0]
+            data: [0, 0, 0, 0, 0, 0,0,0,0,0,0,0,0,0,0,0.1,0,0,0,0,0,0,0,0]
         }
     ]
 }