From e2f4183d0b99faed0da8c55c1d78cb4e8dc73f56 Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUDKNA8\\znjsz" <tonystark@starkindustries.mil>
Date: Wed, 10 Apr 2024 11:23:17 +0800
Subject: [PATCH] update chart resize

---
 src/views/dashboard/charts/ChipInvest.vue     | 48 +++++++--
 src/views/dashboard/charts/Fto.vue            | 46 +++++++--
 .../dashboard/components/ChartContainer.vue   |  2 +-
 src/views/dashboard/components/Container.vue  |  3 +
 src/views/dashboard/components/Header.vue     |  7 +-
 src/views/dashboard/mixins/chart.js           | 97 +++++++++++++++++++
 6 files changed, 181 insertions(+), 22 deletions(-)
 create mode 100644 src/views/dashboard/mixins/chart.js

diff --git a/src/views/dashboard/charts/ChipInvest.vue b/src/views/dashboard/charts/ChipInvest.vue
index 058b05d..ac68c48 100644
--- a/src/views/dashboard/charts/ChipInvest.vue
+++ b/src/views/dashboard/charts/ChipInvest.vue
@@ -7,30 +7,58 @@
 
 <template>
   <chart-container class="chip-invest-chart">
-    <div class="chart-title">chip-invest</div>
-    <div class="chart-body" style="width: 1000px; background: #f024;">
-      <div class="chart-item">chip-invest</div>
-      <div class="chart-item">chip-invest</div>
-      <div class="chart-item">chip-invest</div>
-      <div class="chart-item">chip-invest</div>
-    </div>
+    <div ref="chart" style="max-width: 22vw; height: 34vh"></div>
   </chart-container>
 </template>
 
 <script>
 import ChartContainerVue from "../components/ChartContainer.vue";
+import chartMixin from "../mixins/chart.js";
 
 export default {
   name: "chip-investChart",
   components: {
     ChartContainer: ChartContainerVue,
   },
+  mixins: [chartMixin],
   props: {},
   data() {
-    return {};
+    return {
+      options: {
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "0",
+          containLabel: true,
+        },
+        tooltip: {},
+        legend: {
+          data: ["Sales"],
+        },
+        xAxis: {
+          data: [
+            "shirt",
+            "cardign",
+            "chiffon shirt",
+            "pants",
+            "heels",
+            "socks",
+          ],
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "Sales",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.initOptions(this.options);
   },
-  computed: {},
-  methods: {},
 };
 </script>
 
diff --git a/src/views/dashboard/charts/Fto.vue b/src/views/dashboard/charts/Fto.vue
index 37df3c3..f2ce79b 100644
--- a/src/views/dashboard/charts/Fto.vue
+++ b/src/views/dashboard/charts/Fto.vue
@@ -7,27 +7,57 @@
 
 <template>
   <chart-container class="fto-chart">
-    <div class="chart-title">FTO</div>
-    <div class="chart-body">
-      <div class="chart-item">FTO</div>
-      <div class="chart-item">FTO</div>
-      <div class="chart-item">FTO</div>
-      <div class="chart-item">FTO</div>
-    </div>
+    <div ref="chart" style="max-width: 22vw; height: 100%"></div>
   </chart-container>
 </template>
 
 <script>
 import ChartContainerVue from "../components/ChartContainer.vue";
+import chartMixin from "../mixins/chart.js";
 
 export default {
   name: "FtoChart",
   components: {
     ChartContainer: ChartContainerVue,
   },
+  mixins: [chartMixin],
   props: {},
   data() {
-    return {};
+    return {
+      options: {
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        tooltip: {},
+        legend: {
+          data: ["Sales"],
+        },
+        xAxis: {
+          data: [
+            "shirt",
+            "cardign",
+            "chiffon shirt",
+            "pants",
+            "heels",
+            "socks",
+          ],
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "Sales",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.initOptions(this.options);
   },
   computed: {},
   methods: {},
diff --git a/src/views/dashboard/components/ChartContainer.vue b/src/views/dashboard/components/ChartContainer.vue
index d831677..d56bc89 100644
--- a/src/views/dashboard/components/ChartContainer.vue
+++ b/src/views/dashboard/components/ChartContainer.vue
@@ -28,7 +28,7 @@ export default {
 <style scoped lang="scss">
 .chart-container {
   background: #151516;
-  height: 100%;
+  height: 0;
   flex: 1;
   overflow-x: scroll;
 }
diff --git a/src/views/dashboard/components/Container.vue b/src/views/dashboard/components/Container.vue
index a721061..e1f0074 100644
--- a/src/views/dashboard/components/Container.vue
+++ b/src/views/dashboard/components/Container.vue
@@ -62,6 +62,7 @@ export default {
 
 <style scoped lang="scss">
 .dashboard-container {
+  height: 0;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -86,7 +87,9 @@ export default {
   .container-body {
     padding: 12px;
     display: flex;
+    flex-direction: column;
     flex: 1;
+    height: 0;
   }
 
   .corner {
diff --git a/src/views/dashboard/components/Header.vue b/src/views/dashboard/components/Header.vue
index dc01b48..66533e1 100644
--- a/src/views/dashboard/components/Header.vue
+++ b/src/views/dashboard/components/Header.vue
@@ -49,18 +49,19 @@ h1 {
 .side {
   position: absolute;
   font-size: 1.18vw;
-  line-height: 24px;
+  // line-height: 24px;
+  line-height: 1.277vw;
   letter-spacing: 2px;
   color: #69b4ff;
 }
 
 .left {
   left: 22vw;
-  top: 4.65vh;
+  top: 4.9vh;
 }
 
 .right {
   right: 15vw;
-  top: 4.65vh;
+  top: 4.9vh;
 }
 </style>
diff --git a/src/views/dashboard/mixins/chart.js b/src/views/dashboard/mixins/chart.js
new file mode 100644
index 0000000..b39156f
--- /dev/null
+++ b/src/views/dashboard/mixins/chart.js
@@ -0,0 +1,97 @@
+import * as echarts from "echarts";
+
+function __resizeHandler(entries) {
+  for (const entry of entries) {
+    if (entry.contentBoxSize) {
+      // manipulate contentBoxSize
+      const contentBoxSize = Array.isArray(entry.contentBoxSize)
+        ? entry.contentBoxSize[0]
+        : entry.contentBoxSize;
+      this.chart_mixin_chartInstance.resize({
+        width:
+          contentBoxSize.inlineSize < 400 ? 400 : contentBoxSize.inlineSize,
+        height: contentBoxSize.blockSize,
+      });
+    } else {
+      // manipulate contentRect
+      this.chart_mixin_chartInstance.resize({
+        width: entry.contentRect.width < 400 ? 400 : entry.contentRect.width,
+        height: entry.contentRect.height,
+      });
+    }
+
+    console.log("[resizing.......] ");
+  }
+}
+
+export default {
+  data() {
+    const resizeObserver = new ResizeObserver(__resizeHandler.bind(this));
+
+    return {
+      chart_mixin_chartInstance: null,
+      chart_mixin_observer: resizeObserver,
+      chart_mixin_options: {
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        tooltip: {},
+        legend: {
+          data: ["Sales"],
+        },
+        xAxis: {
+          data: [
+            "shirt",
+            "cardign",
+            "chiffon shirt",
+            "pants",
+            "heels",
+            "socks",
+          ],
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "Sales",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // this.$nextTick(() => {
+    //   this.initChart().then(() => {
+    //     this.initOptions(this.chart_mixin_options);
+    //     this.initListener();
+    //   });
+    // });
+    this.initChart();
+    this.initListener();
+  },
+  methods: {
+    initChart() {
+      (this.$refs.chart ||
+        console.warn('[mixins/chart] 注意是否有 ref="chart" 的元素存在')) &&
+        (this.chart_mixin_chartInstance = echarts.init(this.$refs.chart));
+      //   return new Promise((resolve, reject) => {
+      //     this.$refs.chart ? resolve(true) : reject(false);
+      //   });
+    },
+    initOptions(options) {
+      this.chart_mixin_chartInstance.setOption(options);
+    },
+    initListener() {
+      this.chart_mixin_observer.observe(this.$refs.chart);
+    },
+  },
+  beforeDestroy() {
+    if (this.chart_mixin_chartInstance) {
+      this.chart_mixin_chartInstance.dispose();
+    }
+  },
+};