update chart resize

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 ref="chart" style="max-width: 22vw; height: 34vh"></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>
   </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>
 

src/views/dashboard/charts/Fto.vue

@@ -7,27 +7,57 @@
 
 <template>
   <chart-container class="fto-chart">
-    <div class="chart-title">FTO</div>
+    <div ref="chart" style="max-width: 22vw; height: 100%"></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>
   </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: {},

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;
 }

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 {

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>

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();
+    }
+  },
+};