src/views/dashboard/charts/ChipInvest.vue

@@ -7,11 +7,21 @@
 
 <template>
   <chart-container class="chip-invest-chart">
+    <div class="legend">
+      <span
+        v-for="item in legend"
+        :key="item.label"
+        class="legend-item"
+        :style="{ fontSize: isFullscreen ? '16px' : '12px' }"
+        >{{ item.label }}</span
+      >
+    </div>
     <div ref="chart" style="max-width: 22vw; height: 34vh"></div>
   </chart-container>
 </template>
 
 <script>
+import screenfull from "screenfull";
 import ChartContainerVue from "../components/ChartContainer.vue";
 import chartMixin from "../mixins/chart.js";
 
@@ -21,45 +31,220 @@ export default {
     ChartContainer: ChartContainerVue,
   },
   mixins: [chartMixin],
-  props: {},
+  props: {
+    legend: {
+      type: Array,
+      default: () => [
+        { label: "2023年", color: "#12f7f1" },
+        { label: "2024年", color: "#58adfa" },
+      ],
+    },
+    xAxis: {
+      type: Array,
+      default: () => ["成都", "邯郸", "株洲", "瑞昌", "heels", "socks"],
+    },
+    series: {
+      type: Array,
+      default: () => [
+        {
+          name: "2023年",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
+        {
+          name: "2024年",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
+      ],
+    },
+  },
   data() {
     return {
+      isFullscreen: false,
       options: {
         grid: {
           left: "3%",
           right: "4%",
           bottom: "0",
+          top: "12%",
           containLabel: true,
         },
         tooltip: {},
-        legend: {
-          data: ["Sales"],
-        },
         xAxis: {
-          data: [
+          axisTick: {
-            "shirt",
+            show: false,
-            "cardign",
+          },
-            "chiffon shirt",
+          axisLine: {
-            "pants",
+            lineStyle: {
-            "heels",
+              color: "#4561AE",
-            "socks",
+            },
-          ],
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/片",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
         },
-        yAxis: {},
         series: [
           {
-            name: "Sales",
+            name: "2023年",
             type: "bar",
-            data: [5, 20, 36, 10, 10, 20],
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#12f7f1", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.35,
+                    color: "#12f7f177", // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.75,
+                    color: "#12f7f133", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: this.series[0].data,
+          },
+          {
+            name: "2024年",
+            type: "bar",
+            barWidth: 12,
+            // tooltip: {
+            //   valueFormatter: function (value) {
+            //     return value + " ml";
+            //   },
+            // },
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#57abf8", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#364BFE66", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: this.series[1].data,
           },
         ],
       },
     };
   },
+  watch: {
+    isFullscreen(val) {
+      this.options.series.map((item) => {
+        item.barWidth = val ? 24 : 12;
+      });
+      this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.initOptions(this.options);
+    },
+  },
   mounted() {
     this.initOptions(this.options);
+
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
   },
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.chip-invest-chart {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    font-size: 12px;
+    margin-right: 0.67vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      background-color: attr(data-color);
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+
+  /** add more */
+  // .legend-item:nth-child(3):before {
+  //   background-color: #f7f1;
+  // }
+}
+</style>

src/views/dashboard/components/ChartContainer.vue

@@ -27,7 +27,6 @@ export default {
 
 <style scoped lang="scss">
 .chart-container {
-  background: #151516;
   height: 0;
   flex: 1;
   overflow-x: scroll;

src/views/dashboard/components/Container.vue

@@ -67,6 +67,7 @@ export default {
   display: flex;
   flex-direction: column;
   position: relative;
+  box-shadow: inset 0 0 20px 1px #fff1;
 
   .container-head {
     // height: 40px;

src/views/index.vue

@@ -137,6 +137,13 @@ export default {
 };
 </script>
 
+<style>
+.hideSidebar.mobile .dashboard-factory-all {
+  left: 0 !important;
+  width: 100vw !important;
+}
+</style>
+
 <style lang="scss" scoped>
 .dashboard-factory-all {
   background: #151516;
@@ -160,7 +167,6 @@ export default {
     left: 0;
     width: 100%;
     height: 100%;
-    background: #15151633;
     z-index: 1;
     display: flex;
     flex-direction: column;