新增 雷达组件

src/components/Radar.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="radar"></div>
+</template>
+
+<script>
+import { ref, onMounted, computed } from "vue";
+import { mapState } from "vuex";
+
+export default {
+  setup() {
+    let echarts = inject("ec");
+
+    let radartDom = ref({});
+    let radarChart = ref({});
+    function init() {
+      radartDom.value = document.getElementById("radar");
+      radarChart.value = echarts.init(radartDom, "dark");
+      radarChart.value.setOption(option.value);
+    }
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+
+    let option = ref({
+      title: {},
+      legend: {},
+      radar: {
+        // shape: 'circle',
+        indicator: [
+          { name: "数据1", max: 6500 },
+          { name: "数据2", max: 16000 },
+          { name: "数据3", max: 30000 },
+          { name: "数据4", max: 38000 },
+          { name: "数据5", max: 52000 },
+        ],
+        axisLine: {
+          // (圆内的几条直线)坐标轴轴线相关设置
+          lineStyle: {
+            color: "#45FAFF",
+            // 坐标轴线线的颜色。
+            width: 2,
+            // 坐标轴线线宽。
+            type: "solid",
+            // 坐标轴线线的类型。
+          },
+        },
+        splitLine: {
+          // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
+          lineStyle: {
+            color: "#45FAFF",
+            // 分隔线颜色
+            width: 2,
+            // 分隔线线宽
+          },
+        },
+        splitArea: {
+          // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+          show: true,
+          areaStyle: {
+            // 分隔区域的样式设置。
+            color: ["rgba(250,250,250,0)", "rgba(200,200,200,0)"],
+            // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+          },
+        },
+      },
+      series: [
+        {
+          name: "Budget vs spending",
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000],
+            },
+          ],
+          areaStyle: {
+            // 单项区域填充样式
+            normal: {
+              color: "rgb(69,250,255)", // 填充的颜色。[ default: "#000" ]
+            },
+          },
+        },
+      ],
+    });
+
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/main.js

@@ -9,21 +9,23 @@ import store from "./store";
 import md5 from "md5";
 import "./styles/index.scss";
 import NumberVue from "comps/Number.vue";
-import SafetyCard from "comps/SafetyCard.vue";
+import SafetyModule from "comps/SafetyModule.vue";
 import TitleLine from "comps/TitleLine.vue";
 import CargoOwnderCard from "comps/CargoOwnderCard.vue";
 import IconInfo from "comps/IconInfo.vue";
 import ShipOwnerInfo from "comps/ShipOwnerInfo.vue";
 import ShipInfoCard from "comps/ShipInfoCard.vue";
 import CapacityCard from "comps/CapacityCard.vue";
+import IntelligentModule from "comps/IntelligentModule.vue";
 
+app.component("IntelligentModule", IntelligentModule);
 app.component("CapacityCard", CapacityCard);
 app.component("ShipInfoCard", ShipInfoCard);
 app.component("ShipOwnerInfo", ShipOwnerInfo);
 app.component("IconInfo", IconInfo);
 app.component("CargoOwnderCard", CargoOwnderCard);
 app.component("TitleLine", TitleLine);
-app.component("SafetyCard", SafetyCard);
+app.component("SafetyModule", SafetyModule);
 app.component("NumberVue", NumberVue);
 
 router.beforeEach(async (to, from, next) => {