fix: 优化物联概览页面线图的显示

src/utils/dataUiOptions.ts

@@ -1,6 +1,11 @@
 
 export function getLineData({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 1000, height = 400 }) {
   const colors = ['#6376DD', '#FBBB04']
+
+  const maxVal = Math.max(...datas.flat())
+  // 设置最大值为 接近这个数值并且比这个数值稍大的整数
+  const radio = 10 ** (maxVal.toString().length - 2)
+  const max = Math.ceil(maxVal * 1.4 / radio) * radio
   const config = {
     "chart": {
       "fontFamily": "inherit",
@@ -13,7 +18,7 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
         "show": false
       },
       "padding": {
-        "top": height * 0.3,
+        "top": 30,
         "right": 14,
         "bottom": 34,
         "left": 30
@@ -28,7 +33,9 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
             "fontSize": 12
           },
           "yAxis": {
-            "commonScaleSteps": 5,
+            "commonScaleSteps": 10,
+            "scaleMin": 0,
+            "scaleMax": max,
           },
           "xAxisLabels": {
             "show": true,
@@ -165,4 +172,112 @@ export function getPieData({ datas = [] as number[][], legend = [] as string[],
   })
 
   return { config, dataset }
+}
+
+export function getGaugeData({ value = 50, width = 500, height = 1300 }) {
+
+  const config = {
+    "responsive": false,
+    "theme": "",
+    "customPalette": [],
+    "style": {
+      "fontFamily": "inherit",
+      "chart": {
+        "backgroundColor": "#FFFFFFff",
+        "color": "#1A1A1Aff",
+        "animation": {
+          "use": false,
+          "speed": 1,
+          "acceleration": 1
+        },
+        "layout": {
+          "track": {
+            "size": 1,
+            "useGradient": true,
+            "gradientIntensity": 20
+          },
+          "markers": {
+            "color": "#1A1A1Aff",
+            "bold": true,
+            "fontSizeRatio": 1,
+            "offsetY": 0,
+            "roundingValue": 0
+          },
+          "pointer": {
+            "type": "pointy",
+            "size": 1,
+            "stroke": "#1A1A1Aff",
+            "strokeWidth": 12,
+            "useRatingColor": true,
+            "color": "#CCCCCCff",
+            "circle": {
+              "radius": 10,
+              "stroke": "#1A1A1Aff",
+              "strokeWidth": 2,
+              "color": "#FFFFFFff"
+            }
+          }
+        },
+        "legend": {
+          "fontSize": 48,
+          "prefix": "",
+          "suffix": "",
+          "roundingValue": 1,
+          "showPlusSymbol": true,
+          "useRatingColor": true,
+          "color": "#1A1A1Aff",
+          "formatter": null
+        },
+        "title": {
+          "text": "Title",
+          "color": "#1A1A1Aff",
+          "fontSize": 20,
+          "bold": true,
+          "textAlign": "center",
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "subtitle": {
+            "color": "#A1A1A1ff",
+            "text": "",
+            "fontSize": 16,
+            "bold": false
+          }
+        }
+      }
+    },
+    "userOptions": {
+      "show": true,
+      "position": "right",
+      "buttons": {
+        "tooltip": false,
+        "pdf": true,
+        "csv": false,
+        "img": true,
+        "table": false,
+        "labels": false,
+        "fullscreen": true,
+        "sort": false,
+        "stack": false,
+        "animation": false
+      },
+      "buttonTitles": {
+        "open": "Open options",
+        "close": "Close options",
+        "pdf": "Download PDF",
+        "img": "Download PNG",
+        "fullscreen": "Toggle fullscreen"
+      }
+    },
+    "translations": {
+      "base": "Base"
+    }
+  }
+
+  const dataset = {
+    "series": [{ "from": 0, "to": 50, "color": "#6376DD", "id": "111" }, { "from": 50, "to": 100, "color": "#42d392", "id": "222" }],
+    value
+  }
+
+
+  return { config, dataset }
 }

src/views/iot/iotmanager/dashboard.vue

@@ -87,7 +87,6 @@
 <script lang="ts" setup>
 import { toRefs, reactive, onMounted, ref, watch, nextTick, onActivated, getCurrentInstance, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
-import { useStore } from '/@/store/index';
 import { VueUiXy, VueUiDonut } from "vue-data-ui";
 import "vue-data-ui/style.css";
 import { getLineData, getPieData } from "/@/utils/dataUiOptions";