✨ feat: 首页左侧图形部分完成 , 右侧文字部分未完成完成度80%

2024-04-22 18:00:58 +08:00 · 2024-04-22 18:00:58 +08:00 · 926484334e
commit 926484334e
parent 6c393bea22
5 changed files with 124 additions and 50 deletions
--- a/src/components/echarts/bar.vue
+++ b/src/components/echarts/bar.vue
@ -6,6 +6,7 @@

 <script setup lang="ts">
 import * as echarts from 'echarts'
+import type { AnalysisValidateResult } from 'tdesign-vue/es/form/const'
 import { onMounted, ref } from 'vue'

 // 定义图表容器引用
@ -15,22 +16,22 @@ const { categories, seriesData, title, legendList } = defineProps({
  // 横坐标
  categories: {
    type: Array,
-    required: true
+    default: () => []
  },
  // 纵坐标
  seriesData: {
    type: Array,
-    required: true
+    default: () => []
  },
  // 标题
  title: {
    type: String,
-    required: true
+    default: ''
  },
  // 图例
  legendList: {
    type: Array,
-    required: true
+    default: () => []
  },
  // 宽度
  width: {
@ -68,7 +69,15 @@ const option = {
  yAxis: {
    type: 'value'
  },
-  series: seriesData
+  series: seriesData.map((serie: any) => ({
+    ...serie,
+    itemStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        { offset: 0, color: '#57c1ff' }, // 填充色开始颜色（可自定义）
+        { offset: 1, color: '#1a91ff' } // 填充色结束颜色（可自定义）
+      ])
+    }
+  }))
 }

 // 在组件挂载后初始化ECharts实例并设置选项
--- a/src/components/echarts/pie.vue
+++ b/src/components/echarts/pie.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="display: flex; justify-content: center">
    <div ref="pieChartRef" :style="{ width: width, height: height }"></div>
  </div>
 </template>
@ -51,7 +51,7 @@ const option = {
      name: '访问来源',
      type: 'pie',
      radius: '50%',
-      left: '50',
+      left: '60',
      data: dataP,
      emphasis: {
        itemStyle: {
--- a/src/views/home/components/homeCenter.vue
+++ b/src/views/home/components/homeCenter.vue
@ -23,7 +23,7 @@
      :titleP="title"
      :legendList="legendList"
      :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
    />
    <line-chart
      v-else-if="title === '购货退货单'"
@ -32,7 +32,7 @@
      :titleP="title"
      :legendList="legendList"
      :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
    />
    <line-chart
      v-else-if="title === '销货出库单'"
@ -41,7 +41,7 @@
      :titleP="title"
      :legendList="legendList"
      :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
    />
    <line-chart
      v-else-if="title === '销货退货单'"
@ -50,7 +50,7 @@
      :titleP="title"
      :legendList="legendList"
      :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
    />
    <line-chart
      v-else-if="title === '收款单'"
@ -59,7 +59,7 @@
      :titleP="title"
      :legendList="legendList"
      :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
    />
    <line-chart
      v-else-if="title === '付款单'"
@ -68,25 +68,25 @@
      :titleP="title"
      :legendList="legendList"
      :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
    />
-    <line-chart
+    <pie
      v-else-if="title === '库存数据'"
-      :categories="categories"
-      :seriesData="seriesData"
      :titleP="title"
-      :legendList="legendList"
-      :height="'80%'"
-      :width="'92rem'"
+      :dataP="data"
+      :height="'15rem'"
+      :width="'40rem'"
    />
  </div>
 </template>

 <script setup lang="ts">
 import lineChart from '@/components/echarts/line.vue'
+import pie from '@/components/echarts/pie.vue'
 import { ref } from 'vue'

-const title = ref('销货出库单')
+const title = ref('采购入库单')
+// 折线图
 const categories = ref([
  '一月',
  '二月',
@ -109,10 +109,17 @@ const seriesData = ref([
    type: 'line'
  }
 ])
+// 饼状图
+const data = ref([
+  { value: 50, name: '上午' },
+  { value: 50, name: '下午' },
+  { value: 100, name: '晚上' },
+  { value: 200, name: '睡觉' }
+])
 const circleClassList = ref([
  {
    color: '#5e5e5e',
-    judge: false
+    judge: true
  },
  {
    color: '#5e5e5e',
--- a/src/views/home/components/homeFooter.vue
+++ b/src/views/home/components/homeFooter.vue
@ -1,16 +1,38 @@
 <template>
  <div class="centerC">
    <div class="center-pie">
-      <pie :titleP="title" :dataP="data" :height="'15rem'" :width="'40rem'" />
+      <div class="title_class">
+        <span>资产数据</span>
+      </div>
+      <t-divider />
+      <div class="content">
+        <div class="allMoney">
+          <span>{{ '总资产' }}</span>
+          <span style="font-size: 20px; font-weight: 700; color: #606266">{{
+            '6224972.1353'
+          }}</span>
+        </div>
+        <div v-for="(item, index) in MoneyList" :key="index">
+          <div class="portionMoney">
+            <div :style="{ background: item.color }"></div>
+            <span style="margin: 0 3rem 0 0.5rem">{{ item.name }}</span>
+            <span>{{ item.money }}</span>
+          </div>
+        </div>
+      </div>
    </div>
    <div class="center-bar">
+      <div class="title_class">
+        <span>资金数据</span>
+      </div>
+      <t-divider />
      <bar
        :categories="categories"
        :seriesData="seriesData"
        :title="titlebar"
        :legendList="legendList"
-        :height="'100%'"
-        :width="'52rem'"
+        :height="'80%'"
+        :width="'57rem'"
      />
    </div>
  </div>
@ -18,18 +40,34 @@

 <script setup lang="ts">
 import { ref } from 'vue'
-import pie from '@/components/echarts/pie.vue'
+
 import bar from '@/components/echarts/bar.vue'

-const title = ref('一天的开心程度')
-const titlebar = ref('销售额')
-const data = ref([
-  { value: 50, name: '上午' },
-  { value: 50, name: '下午' },
-  { value: 100, name: '晚上' },
-  { value: 200, name: '睡觉' }
+const MoneyList = ref([
+  {
+    color: '#2196f3',
+    name: '资金余额',
+    money: '-2351917.2039'
+  },
+  {
+    color: '#4caf50',
+    name: '库存成本',
+    money: '8333528.3592'
+  },
+  {
+    color: '#f44336',
+    name: '应收欠款',
+    money: '183346.98'
+  },
+  {
+    color: '#ff9800',
+    name: '应付欠款',
+    money: '-60014'
+  }
 ])

+const titlebar = ref('资金')
+
 const categories = ref([
  '一月',
  '二月',
@ -44,22 +82,12 @@ const categories = ref([
  '十一月',
  '十二月'
 ])
-const legendList = ['类别A', '类别B', '类别C']
+const legendList = ['类别A']
 const seriesData = ref([
  {
    name: '类别A',
    type: 'bar',
-    data: [1000, 1200, 1400, 1500, 1600, 1800, 1700, 1900, 2000, 2200, 2300, 2500]
-  },
-  {
-    name: '类别B',
-    type: 'bar',
-    data: [200, 400, 1000, 500, 700, 800, 1000, 1100, 1150, 1200, 1300, 1400]
-  },
-  {
-    name: '类别C',
-    type: 'bar',
-    data: [800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900]
+    data: [-1000, 1200, 1400, 1500, 1600, 1800, 1700, 1900, 2000, 2200, 2300, 2500]
  }
 ])
 </script>
@ -77,17 +105,47 @@ export default {
  display: flex;
  justify-content: space-between;
  .center-pie {
-    width: 49%;
+    width: 30%;
    height: 100%;
    background-color: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
  }
  .center-bar {
-    width: 49%;
+    width: 68%;
    height: 100%;
    background-color: #fff;
  }
 }
+.title_class {
+  padding: 0 1rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+}
+
+.content {
+  width: 100%;
+  height: 80%;
+  padding: 0 1rem;
+  .allMoney {
+    height: 25%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .portionMoney {
+    width: 100%;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    div {
+      width: 0.2rem;
+      height: 2rem;
+      background-color: aqua;
+    }
+  }
+}
+
+:deep(.t-divider) {
+  margin: 0 0 1rem 0;
+}
 </style>
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -12,7 +12,7 @@
          <home-footer />
        </t-content>
      </t-content>
-      <t-aside class="contentInfo">Aside</t-aside>
+      <t-aside class="contentInfo"></t-aside>
    </t-layout>
  </div>
 </template>