导航栏/菜单栏显示逻辑修改

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

@@ -0,0 +1,109 @@
+<!-- 默认饼图 -->
+<template>
+  <div class="charts" ref="chartsRef"></div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, defineProps, defineExpose, watch } from "vue";
+import * as echarts from "echarts";
+const chartsRef = ref();
+const props = defineProps({
+  //饼图数据
+  chartsData: {
+    type: Array,
+    default: () => [],
+  },
+  //自定义数据
+  customData: {
+    type: Object,
+    default: () => ({}),
+  },
+  //legend配置
+  legendData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const customData: any = ref({}),
+  legendData: any = ref({});
+const init = () => {
+  console.log("init", props.customData);
+  customData.value = {
+    title: "", //标题
+    textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
+    ratio: true, //是否显示数值占比，默认不显示
+    isRing: false, //是否环形图
+    isRadius: false, //是否圆角
+    isSpace: true, //是否显示间隔
+    isLabelLine: true, //是否显示引导线
+    ...props.customData,
+  };
+  legendData.value = {
+    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,百分比,数值,
+    ...props.legendData,
+  };
+  var chart = chartsRef.value && echarts.init(chartsRef.value);
+  var option = {
+    title: {
+      text: customData.value.title,
+      left: customData.value.textAlign,
+    },
+    legend: legendData.value,
+    tooltip: {
+      show: true,
+      trigger: "item",
+      formatter: customData.value.ratio ? `{b} : {c} ({d}%)` : "{b} :{c} ",
+      borderWidth: 1,
+    },
+    series: [
+      {
+        type: "pie",
+        radius: customData.value.isRing ? ["45", "65"] : "65%",
+        data: props.chartsData,
+        center: ["50%", "60%"], // 设置饼图的中心位置
+        // padAngle: 2,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)",
+          },
+        },
+        itemStyle: {
+          borderRadius: customData.value.isRadius ? 10 : 0,
+          borderColor: customData.value.isSpace ? "#fff" : "",
+          borderWidth: customData.value.isSpace ? 2 : 0,
+        },
+        labelLine: {
+          show: customData.value.isLabelLine,
+        },
+      },
+    ],
+  };
+  option && chart.setOption(option);
+};
+
+watch(
+  () => props.chartsData,
+  (val, oldVal) => {
+    if (val) {
+      init();
+    }
+  },
+  {
+    deep: true,
+  }
+);
+onMounted(() => {
+  init();
+});
+defineExpose({ init });
+</script>
+<style lang="scss" scoped>
+.charts {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+}
+</style>