新增加缓存监控

2022-04-17 10:35:24 +08:00
parent 6da756c685
commit a4f002edc0
2 changed files with 284 additions and 0 deletions
@@ -0,0 +1,99 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+// import("echarts/theme/macarons"); // echarts theme
+import { debounce } from "@/utils";
+
+export default {
+  props: {
+    name: {
+      type: String,
+      default: "业务指标",
+    },
+    min: {
+      type: [Object, Number],
+      default: 0,
+    },
+    max: {
+      type: [Object, Number],
+      default: 0,
+    },
+    data: {
+      type: Array,
+      default: () => [
+        {
+          value: "",
+          name: "占比",
+        },
+      ],
+    },
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "300px",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }, 100);
+    window.addEventListener("resize", this.__resizeHandler);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    window.removeEventListener("resize", this.__resizeHandler);
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+
+      this.chart.setOption({
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}",
+        },
+        // toolbox: {
+        //   feature: {
+        //     restore: {},
+        //     saveAsImage: {},
+        //   },
+        // },
+        series: [
+          {
+            name: this.name,
+            type: "gauge",
+            min: this.min,
+            max: this.max,
+            detail: {
+              formatter: "{value}%",
+            },
+            data: this.data,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>