src/views/dashboard/charts/StdChart.vue

@@ -0,0 +1,64 @@
+<!-- 
+    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.5"
+    class="std-chart"
+  />
+</template>
+
+<script>
+import RightChartBase from "./RightChartBase.vue";
+
+export default {
+  name: "StdChart",
+  components: { RightChartBase },
+  props: {
+    legend: {
+      type: Array,
+      default: () => [
+        { label: "2024年目标值", color: "#f3c000" },
+        { label: "2023年", color: "#12f7f1" },
+        { label: "2024年", color: "#58adfa" },
+      ],
+    },
+    xAxis: {
+      type: Array,
+      default: () => ["成都", "邯郸", "株洲", "瑞昌", "heels", "socks"],
+    },
+    series: {
+      type: Array,
+      default: () => [
+        {
+          name: "2024年目标值",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
+        {
+          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/index.vue

@@ -20,7 +20,9 @@
               side="right"
               icon="std"
               title="标准组件产出"
-            ></db-container>
+            >
+              <std-chart />
+            </db-container>
             <db-container side="right" icon="bipv" title="BIPV产出">
               <bipv-chart />
             </db-container>
@@ -47,6 +49,7 @@ import FtoChart from "./dashboard/charts/Fto.vue";
 import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
 import BipvChart from "./dashboard/charts/Bipv.vue";
 import ChipYieldChart from "./dashboard/charts/ChipYield.vue";
+import StdChart from "./dashboard/charts/StdChart.vue";
 
 const LOCATIONS = [
   // 佳木斯
@@ -74,6 +77,7 @@ export default {
     ChipInvestChart,
     ChipYieldChart,
     BipvChart,
+    StdChart,
   },
   data() {
     return {