src/views/dashboard/charts/Bipv.vue

@@ -0,0 +1,57 @@
+<!-- 
+    filename: Bipv.vue
+    author: liubin
+    date: 2024-04-10 15:39:54
+    description: 
+-->
+
+<template>
+  <right-chart-base
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    :vHeight="20"
+    class="bipv-chart"
+  />
+</template>
+
+<script>
+import RightChartBase from "./RightChartBase.vue";
+
+export default {
+  name: "BipvChart",
+  components: { RightChartBase },
+  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)
+          ),
+        },
+      ],
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/dashboard/charts/LeftChartBase.vue

@@ -1,5 +1,5 @@
 <!-- 
-    filename: chip-invest.vue
+    filename: left-chart-base
     author: liubin
     date: 2024-04-10 08:59:28
     description: 
@@ -16,7 +16,11 @@
         >{{ item.label }}</span
       >
     </div>
-    <div ref="chart" style="max-width: 22vw; height: 34vh"></div>
+    <div
+      ref="chart"
+      style="max-width: 22vw"
+      :style="{ height: vHeight + 'vh' }"
+    ></div>
   </chart-container>
 </template>
 
@@ -26,12 +30,16 @@ import ChartContainerVue from "../components/ChartContainer.vue";
 import chartMixin from "../mixins/chart.js";
 
 export default {
-  name: "chip-investChart",
+  name: "LeftChartBase",
   components: {
     ChartContainer: ChartContainerVue,
   },
   mixins: [chartMixin],
   props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
     legend: {
       type: Array,
       required: true,
@@ -53,7 +61,7 @@ export default {
           left: "3%",
           right: "4%",
           bottom: "0",
-          top: "12%",
+          top: "15%",
           containLabel: true,
         },
         tooltip: {},
@@ -212,7 +220,7 @@ export default {
       display: inline-block;
       width: 10px;
       height: 10px;
-      background-color: attr(data-color);
+      background-color: #ccc;
       border-radius: 2px;
       margin-right: 0.22vw;
     }

src/views/dashboard/charts/RightChartBase.vue

@@ -0,0 +1,242 @@
+<!-- 
+    filename: right-chart-base
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <chart-container class="right-chart-base">
+    <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"
+      :style="{ height: vHeight + 'vh' }"
+    ></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainerVue from "../components/ChartContainer.vue";
+import chartMixin from "../mixins/chart.js";
+
+export default {
+  name: "RightChartBase",
+  components: {
+    ChartContainer: ChartContainerVue,
+  },
+  mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      options: {
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "0",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          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",
+            },
+          },
+        },
+        series: [
+          {
+            name: "2023年",
+            type: "bar",
+            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">
+.left-chart-base {
+  // 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: #ccc;
+      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/index.vue

@@ -23,11 +23,9 @@
               icon="std"
               title="标准组件产出"
             ></db-container>
-            <db-container
-              side="right"
-              icon="bipv"
-              title="BIPV产出"
-            ></db-container>
+            <db-container side="right" icon="bipv" title="BIPV产出">
+              <bipv-chart />
+            </db-container>
           </div>
         </div>
       </div>
@@ -49,6 +47,7 @@ import Container from "./dashboard/components/Container.vue";
 import ChartContainer from "./dashboard/components/ChartContainer.vue";
 import FtoChart from "./dashboard/charts/Fto.vue";
 import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
+import BipvChart from "./dashboard/charts/Bipv.vue";
 
 export default {
   name: "Index",
@@ -59,6 +58,7 @@ export default {
     ChartContainer,
     FtoChart,
     ChipInvestChart,
+    BipvChart,
   },
   data() {
     return {