首页

src/components/HomeCharts/dashboard.vue

+<script setup lang="ts" name="DashboardCharts">
+import { ref, onMounted, watch, nextTick, inject } from "vue";
+import * as echarts from "echarts";
+
+const props = defineProps(['color', 'chartNum']);
+const DashboardCharts = ref();
+
+let myChart;
+watch(
+  () => props.chartNum,
+  (newVal) => {
+    nextTick().then(() => {
+      myChart = echarts.init(DashboardCharts.value);
+      if (newVal.toString() && myChart) {
+        myChart.setOption({
+          series: [
+            // 低圈--外环
+            {
+              type: 'pie',
+              zlevel: 1,
+              radius: ['137%', '152%'],
+              center: ['50%', '80%'],
+              startAngle: 180,
+              endAngle: 0,
+              animation: false,
+              itemStyle: {
+                borderRadius: 20
+              },
+              data: [
+                {
+                  value: 100,
+                  itemStyle: {
+                    color: 'rgba(247, 247, 247, 1)',
+                  },
+                }
+              ],
+            },
+            {
+              type: 'gauge',
+              center: ['50%', '76%'],
+              radius: '115%',
+              startAngle: 180,
+              endAngle: 0,
+              min: 0,
+              max: 100,
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                      offset: 0,
+                      color: props.color[0]
+                  },
+                  {
+                      offset: 1,
+                      color: props.color[1]
+                  }
+              ]),
+              },
+              progress: {
+                show: true,
+                roundCap: true,
+                width: 18,
+              },
+              axisLine: {
+                roundCap: true,
+                lineStyle: {
+                  color: [
+                        [1,  props.color[2]]
+                    ],
+                  width: 18
+                  
+                }
+              },
+              pointer: {
+                show: false,
+              },
+              axisTick: {
+                show: false
+              },
+              splitLine: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              },
+              title: {
+                show: false
+              },
+               detail: {
+                show: false
+              },
+              data: [
+                {
+                  value: props.chartNum
+                }
+              ]
+            },
+            {
+              z:10,
+              type: 'gauge',
+              center: ['50%', '76%'],
+              radius: '115%',
+              startAngle: 180,
+              endAngle: 0,
+              min: 0,
+              max: 100,
+              itemStyle: {
+                color: 'rgba(255,255,255,0)',
+              },
+              progress: {
+                show: false,
+                itemStyle: {
+                  opacity: 0
+                },
+              },
+              pointer: {
+                icon: 'circle',
+                width: 20,
+                length: 20,
+                offsetCenter: ['3%', '-83%'],
+                itemStyle: {
+                  z: 10,
+                  zlevel: 3,
+                  color: props.color[1],
+                  borderWidth: 6,
+                  borderColor: '#fff',
+                  shadowBlur: 6,
+                  shadowColor: 'rgba(53, 64, 79, 0.2)',
+                }
+              },
+              axisLine: {
+                show: false
+
+            },
+              axisTick: {
+                show: false
+              },
+              splitLine: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              },
+              title: {
+                show: false
+              },
+               detail: {
+                show: false
+              },
+              data: [
+                {
+                  value: props.chartNum
+                }
+              ]
+            }
+          ]
+        });
+      }
+    });
+  },
+  { deep: true, immediate: true }
+);
+
+const generateRandomColors = () => {
+  const hue = Math.floor(Math.random() * 360);
+  const saturation = Math.floor(Math.random() * 30) + 70;
+  const lightness = Math.floor(Math.random() * 20) + 40;
+  const color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  return color;
+}
+
+onMounted(() => {
+  myChart = echarts.init(DashboardCharts.value);
+});
+</script>
+<template>
+  <div class="echarts-wrapper">
+    <div ref="DashboardCharts" id="DashboardCharts" class="bar-chart" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.echarts-wrapper {
+  height: 100%;
+  width: 100%;
+
+  .bar-chart {
+    height: 100%;
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file

src/components/HomeCharts/index.vue

@@ -14,12 +14,6 @@ watch(
 
       if (newVal && myChart) {
         myChart.setOption({
-          title: {
-            text: '磁盘空间',
-            textStyle: {
-              color: "#7a8495",
-            }
-          },
           tooltip: {
             trigger: "axis",
             axisPointer: {
@@ -28,6 +22,7 @@ watch(
             },
           },
           grid: {
+            top: "3%",
             left: "3%",
             right: "4%",
             bottom: "3%",
@@ -38,22 +33,28 @@ watch(
             axisLine: {
               lineStyle: {
                 color: "#808eb7",
-                width: 2,
+                width: 2
               },
             },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(224, 230, 237, 1)",
+                type: "dashed",
+              }
+            }
           },
           yAxis: {
             type: "category",
             axisLine: {
               lineStyle: {
                 color: "#808eb7",
-                width: 2,
+                width: 2
               },
             },
             splitLine: {
               //分割线配置
               lineStyle: {
-                color: "#AAAAAA56",
+                color: "#AAAAAA56"
               },
             },
             data: homeChartData.xList,
@@ -67,9 +68,15 @@ watch(
               data: homeChartData.yList1,
               itemStyle: {
                 normal: {
-                  color: (params) => {
-                    return generateRandomColors();
+                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                      offset: 0,
+                      color: 'rgba(120, 166, 252, 1)'
                   },
+                  {
+                      offset: 1,
+                      color: 'rgba(45, 117, 250, 1)'
+                  }
+              ]),
                 },
               },
             },
@@ -82,7 +89,7 @@ watch(
               data: homeChartData.yList2,
               itemStyle: {
                 normal: {
-                  color: "#dfe1e3",
+                  color: "rgba(236, 243, 254, 1)",
                 },
               },
             },

src/components/PageTitle/iconTitle.vue

@@ -15,8 +15,13 @@ const props = withDefaults(defineProps<{
 
 <template>
   <div class="pageTitle">
-    <img class="icon" :src="props.icon" alt="">
-    <span>{{ props.title }}</span>
+    <div class="left">
+      <img class="icon" :src="props.icon" alt="">
+      <span>{{ props.title }}</span>
+    </div>
+    <div>
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -24,12 +29,17 @@ const props = withDefaults(defineProps<{
 .pageTitle {
   margin-bottom: 20px;
   display: flex;
+  justify-content: space-between;
   align-items: center;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0px;
   line-height: 22px;
   color: rgba(53, 64, 79, 1);
+  .left{
+    display: flex;
+    align-items: center;
+  }
 
   .icon {
     margin-right: 6px;