update home

2024-04-18 17:01:10 +08:00
parent 67bfb9981a
commit a262fb96d4
55 changed files with 3836 additions and 134 deletions
--- a/src/mixins/chart.js
+++ b/src/mixins/chart.js
@@ -0,0 +1,101 @@
+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 < this.MIN_WIDTH
+            ? this.MIN_WIDTH
+            : contentBoxSize.inlineSize,
+        height: contentBoxSize.blockSize,
+      });
+    } else {
+      // manipulate contentRect
+      this.chart_mixin_chartInstance.resize({
+        width:
+          entry.contentRect.width < this.MIN_WIDTH
+            ? this.MIN_WIDTH
+            : entry.contentRect.width,
+        height: entry.contentRect.height,
+      });
+    }
+  }
+}
+
+export default {
+  data() {
+    const resizeObserver = new ResizeObserver(__resizeHandler.bind(this));
+
+    return {
+      MIN_WIDTH: 400,
+      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();
+    }
+  },
+};