登录页面样式&检测计划样式修改

frontend/src/components/echarts/pie/default.vue

@@ -1,9 +1,16 @@
 <!-- 默认饼图 -->
 <template>
-  <div class="charts" ref="chartsRef"></div>
+  <div class="pie" ref="chartsRef"></div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, defineProps, defineExpose, watch } from "vue";
+import {
+  ref,
+  onMounted,
+  defineProps,
+  defineExpose,
+  watch,
+  onUnmounted,
+} from "vue";
 import * as echarts from "echarts";
 const chartsRef = ref();
 const props = defineProps({
@@ -26,7 +33,6 @@ const props = defineProps({
 const customData: any = ref({}),
   legendData: any = ref({});
 const init = () => {
-  console.log("init", props.customData);
   customData.value = {
     title: "", //标题
     textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
@@ -41,6 +47,7 @@ const init = () => {
     icon: "roundRect", // 图例项的icon,类型包括 circle(圆形),rect(正方形),//roundRect(圆角正方形),triangle(三角形),diamond(菱形),//pin(大头针行),arrow(箭头形),none(无图例项的icon)
     orient: "vertical", //图例排列方向
     left: "right", //可选属性left,right,top,bottom,可选属性值 left,right,top,bottom,px,百分比,数值,
+    itemGap: 0, // 设置图例项之间的间隔为20
     ...props.legendData,
   };
   var chart = chartsRef.value && echarts.init(chartsRef.value);
@@ -61,8 +68,10 @@ const init = () => {
         type: "pie",
         radius: customData.value.isRing ? ["45", "65"] : "65%",
         data: props.chartsData,
-        center: ["50%", "60%"], // 设置饼图的中心位置
+        center: ["55%", "50%"], // 设置饼图的中心位置
         // padAngle: 2,
+        minAngle: 15, //最小角度
+        startAngle: 270, //起始角度
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
@@ -82,8 +91,27 @@ const init = () => {
     ],
   };
   option && chart.setOption(option);
+  setTimeout(() => {
+    chart.resize();
+  }, 0);
 };
-
+const resizeCharts = () => {
+  var chart = chartsRef.value && echarts.init(chartsRef.value);
+  if (chart) {
+    chart.resize();
+  }
+};
+window.addEventListener("resize", resizeCharts);
+onUnmounted(() => {
+  var chart = chartsRef.value && echarts.init(chartsRef.value);
+  if (chart) {
+    chart.resize();
+  }
+  window.removeEventListener("resize", resizeCharts);
+  if (chart) {
+    chart.dispose();
+  }
+});
 watch(
   () => props.chartsData,
   (val, oldVal) => {
@@ -101,9 +129,10 @@ onMounted(() => {
 defineExpose({ init });
 </script>
 <style lang="scss" scoped>
-.charts {
+.pie {
   width: 100%;
   height: 100%;
   padding: 10px;
+  box-sizing: border-box;
 }
 </style>