首页

src/views/dashboard/LineChartnew.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="LineChartnew" :style="{ width: width, height: height }"></div>
+  <div :id="id" :style="{ width: width, height: height }"></div>
 </template>
 
 <script>
@@ -7,6 +7,9 @@ import * as echarts from 'echarts';
 
 export default {
   props: {
+    id: {
+      type: String
+    },
     className: {
       type: String,
       default: 'chart'
@@ -17,7 +20,7 @@ export default {
     },
     height: {
       type: String,
-      default: '350px'
+      default: '300px'
     },
     autoResize: {
       type: Boolean,
@@ -40,9 +43,7 @@ export default {
           show: true,
           trigger: 'axis'
         },
-        legend: {
+        legend: {},
-          data: []
-        },
         grid: {
           left: '3%',
           right: '4%',
@@ -66,9 +67,9 @@ export default {
   },
   methods: {
     initChart() {
-      console.log(this.chartData);
       this.defaultOption = { ...this.defaultOption, ...this.chartData };
-      const chartDom = document.getElementById('LineChartnew');
+      console.log(this.defaultOption);
+      const chartDom = document.getElementById(this.id);
       const myChart = echarts.init(chartDom);
       myChart.setOption(this.defaultOption);
     }

src/views/index.vue

@@ -52,39 +52,76 @@
         </el-card>
       </el-col>
       <el-col :span="12">
-        <el-card header="收入支出（万）"></el-card>
+        <el-card header="收入支出（万）">
+          <LineChartnew v-if="isbar" :chartData="barchartData" id="barchart" />
+          <!-- <LineChartnew v-if="lineChartsShow" :chartData="LinechartData" id="lineChartsShow" /> -->
+        </el-card>
       </el-col>
     </el-row>
     <el-row>
       <el-col :span="12">
         <el-card header="用户量">
-          <LineChartnew v-if="lineChartsShow" :chartData="LinechartData" />
+          <LineChartnew v-if="lineChartsShow" :chartData="LinechartData" id="lineChartsShow" />
         </el-card>
       </el-col>
       <el-col :span="12">
-        <el-card header="短视频"></el-card>
+        <el-card header="短视频">
+          <LineChartnew v-if="monthlyVlogShow" :chartData="monthlyVlogList" id="monthlyVlogShow" />
+        </el-card>
       </el-col>
     </el-row>
     <el-row>
       <el-col :span="12">
-        <el-card header="店铺TOP20"></el-card>
+        <el-card header="店铺TOP20">
+          <div class="table-head" v-if="istopstores">
+            <div>排名</div>
+            <div>店铺名称</div>
+            <div>销量量</div>
+            <div>总交易额</div>
+          </div>
+          <div class="body">
+            <div class="table-body" v-for="(item, index) in topStoresList" :key="index">
+              <div>{{ index + 1 }}</div>
+              <div>{{ item.company_name }}</div>
+              <div>{{ item.sales }}</div>
+              <div>{{ item.total_amount }}</div>
+            </div>
+          </div>
+        </el-card>
       </el-col>
       <el-col :span="12">
-        <el-card header="商品TOP20"></el-card>
+        <el-card header="商品TOP20">
+          <div class="table-head" v-if="istopproduct">
+            <div>排名</div>
+            <div>店铺名称</div>
+            <div>销量量</div>
+            <div>总交易额</div>
+          </div>
+          <div class="body">
+            <div class="table-body" v-for="(item, index) in topProductList" :key="index">
+              <div>{{ index + 1 }}</div>
+              <div>{{ item.name }}</div>
+              <div>{{ item.sales }}</div>
+              <div>{{ item.total_amount }}</div>
+            </div>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup name="Index" lang="ts">
+import * as echarts from 'echarts';
 import { getIndex } from '@/api/login';
-import { indexObjOV } from '@/api/types';
+import { indexObjOV, top20Stores, top20Product } from '@/api/types';
 import LineChartnew from '@/views/dashboard/LineChartnew.vue'; //引入折线图
 const goTarget = (url: string) => {
   window.open(url, '__blank');
 };
 const indexObj = ref<indexObjOV>();
 const lineChartsShow = ref(false);
+
 const LinechartData = ref({
   // color: 'red',
   xAxis: {
@@ -93,25 +130,138 @@ const LinechartData = ref({
     data: []
   },
   series: [
-    { name: '用户量', data: [] },
+    { name: '用户量', type: 'line', data: [] },
-    { name: '在线用户', data: [] },
+    { name: '在线用户', type: 'line', data: [] },
-    { name: '活跃', data: [] },
+    { name: '活跃', type: 'line', data: [] },
-    { name: '下单用户', data: [] }
+    { name: '下单用户', type: 'line', data: [] }
   ]
 });
+const monthlyVlogShow = ref(false);
+const monthlyVlogList = ref({
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: []
+  },
+  series: [
+    {
+      name: '视频',
+      type: 'line',
+      smooth: true,
+      showSymbol: false,
+      lineStyle: {
+        width: 0
+      },
+      data: [],
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
+          {
+            offset: 0,
+            color: 'rgba(58,77,233,0.8)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(58,77,233,0.3)'
+          }
+        ])
+      }
+    }
+  ]
+});
+//店铺
+const topStoresList = ref<top20Stores[]>([]);
+const istopstores = ref(false);
+//商品
+const topProductList = ref<top20Product[]>([]);
+const istopproduct = ref(false);
+//饼形
+
+const barchartData = ref({
+  xAxis: {
+    type: 'category',
+    boundaryGap: [0, 0],
+    data: []
+  },
+  legend: {
+    show: false
+  },
+  series: [
+    {
+      name: '收入',
+      type: 'bar',
+      data: [],
+      barCategoryGap: '20%',
+      // 方案2：直接设柱子宽度（如像素值或百分比）
+      barWidth: '30%',
+      itemStyle: {
+        // 线性渐变填充：从上到下透明度递减
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(255, 99, 132, 1)' }, // 顶部：完全不透明
+            { offset: 1, color: 'rgba(255, 99, 132, 0.3)' } // 底部：30% 透明度
+          ],
+          global: false
+        }
+      }
+    },
+    {
+      name: '支出',
+      type: 'bar',
+      data: [],
+      barCategoryGap: '20%',
+      // 方案2：直接设柱子宽度（如像素值或百分比）
+      barWidth: '30%',
+      itemStyle: {
+        // 线性渐变填充：从上到下透明度递减
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0, // 渐变起点（左上角）
+          x2: 0,
+          y2: 1, // 渐变终点（左下角）
+          colorStops: [
+            { offset: 0, color: 'rgba(54, 162, 235, 1)' }, // 顶部：完全不透明
+            { offset: 1, color: 'rgba(54, 162, 235, 0.3)' } // 底部：30% 透明度
+          ],
+          global: false // 只在当前图形内生效
+        }
+      }
+    }
+  ]
+});
+const isbar = ref(false);
 const getList = async () => {
   const res = await getIndex();
   indexObj.value = res.data;
-  const a = [];
+  res.data?.monthlyUserVolume.forEach((item: any) => {
-  res.data?.monthlyUserVolume.forEach((item) => {
     LinechartData.value.xAxis.data.push(item.month);
-    LinechartData.value.series[0].data.push(item.registerMemberCount);
+    LinechartData.value.series[0].data.push(Number(item.registerMemberCount));
-    LinechartData.value.series[1].data.push(item.loginMemberCount);
+    LinechartData.value.series[1].data.push(Number(item.loginMemberCount));
-    LinechartData.value.series[2].data.push(item.addCartMemberCount);
+    LinechartData.value.series[2].data.push(Number(item.addCartMemberCount));
-    LinechartData.value.series[3].data.push(item.dealMemberCount);
+    LinechartData.value.series[3].data.push(Number(item.dealMemberCount));
   });
-
   lineChartsShow.value = true;
+  res.data?.monthlyVlog.forEach((item: any) => {
+    monthlyVlogList.value.xAxis.data.push(item.month);
+    monthlyVlogList.value.series[0].data.push(Number(item.vlog_count));
+  });
+  console.log(monthlyVlogList.value);
+  monthlyVlogShow.value = true;
+  topStoresList.value = res.data?.top20Stores;
+  istopstores.value = true;
+  topProductList.value = res.data?.top20Product;
+  istopproduct.value = true;
+  res.data?.monthlyIncomeExpense.forEach((item: any) => {
+    barchartData.value.xAxis.data.push(item.month);
+    barchartData.value.series[0].data.push(Number(item.income_amount));
+    barchartData.value.series[1].data.push(Number(item.expense_amount));
+  });
+  isbar.value = true;
 };
 onMounted(() => {
   getList();
@@ -180,4 +330,41 @@ onMounted(() => {
     }
   }
 }
+.table-head {
+  width: 100%;
+  display: flex;
+  div {
+    width: 25%;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 15px;
+    background: #d8d8d8;
+  }
+}
+.body {
+  width: 100%;
+  height: 250px;
+  overflow: auto;
+  .table-body {
+    width: 100%;
+    display: flex;
+    div {
+      width: 25%;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 15px;
+      box-shadow: 0 1px 0px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+// ::v-deep {
+//   .el-card__body {
+//     height: 300px;
+//   }
+// }
 </style>