初始化

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

@@ -0,0 +1,192 @@
+<!-- 默认饼图 -->
+<template>
+  <div class="pie" ref="chartsRef"></div>
+</template>
+<script lang="ts" setup>
+import * as echarts from "echarts";
+import { ref } from "vue";
+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({}),
+  chart: any = ref();
+
+ const labelIsShow = ref(true)//引导线台数和鼠标点击饼图是否弹出提示显示
+const init = () => {
+
+
+  customData.value = {
+    title: "", //标题
+    textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
+    ratio: true, //是否显示数值占比，默认不显示
+    isRing: false, //是否环形图
+    isRadius: false, //是否圆角
+    isSpace: false, //是否显示间隔
+    isLabelLine: true, //是否显示引导线
+    titleFontSize: '14px', //标题字体大小
+    
+    ...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,百分比,数值,
+    itemGap: 10, // 设置图例项之间的间隔为20
+    ...props.legendData,
+  };
+  chart.value = chartsRef.value && echarts.init(chartsRef.value);
+  var option = {
+    title: {
+      text: customData.value.title,
+      left: customData.value.textAlign,
+      textStyle: {
+        fontSize: customData.value.titleFontSize, // 使用 titleFontSize 属性
+      },
+    },
+    legend:legendData.value,
+    // legend: {
+    //   icon: legendData.value.icon, // 图例项的icon,类型包括 circle(圆形),rect(正方形),//roundRect(圆角正方形),triangle(三角形),diamond(菱形),//pin(大头针行),arrow(箭头形),none(无图例项的icon)
+    //   orient: "vertical", //图例排列方向
+    //   left: legendData.value.left, //可选属性left,right,top,bottom,可选属性值 left,right,top,bottom,px,百分比,数值,
+    //   itemGap: 1, // 设置图例项之间的间隔为20
+    //   formatter: function (name) {
+
+    //     const item = props.chartsData.filter(item=>item.name==name)
+    //     console.log(item)
+    //     if(item)
+    //     return item[0].value;
+
+    //                 },
+    // },    
+    tooltip: {
+      show: labelIsShow.value,
+      trigger: "item",
+      formatter: customData.value.ratio ? `{b} : {c} ({d}%)` : "{b} :{c} ",
+      borderWidth: 1,
+    },
+    series: [
+      {
+        type: "pie",
+        radius: customData.value.isRing ? ["55", "75"] : "80%",
+        data: props.chartsData,
+        formatter: function (name: any) {
+          const item = props.chartsData.filter(item=>item.name==name)
+          //console.log(item)
+          if(item)
+          return item[0].value;
+          },
+        center: ["55%", "55%"], // 设置饼图的中心位置
+        // padAngle: 2,
+        minAngle: 15, //最小角度
+        startAngle: 270, //起始角度
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)",
+          },
+        },
+        label: {
+          normal: {
+            show: labelIsShow.value,
+            position: "outside",
+            textStyle: {
+              //color: "#fff",
+              fontSize: 12,
+            },
+            formatter: function (data) {
+                              return labelIsShow.value ? data.value + '台' : '';
+                            }
+          },
+        },
+        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.value && chart.value.setOption(option);
+  setTimeout(() => {
+    chart.value.resize();
+  }, 0);
+};
+const reSize = (widthValue: number,heightValue: number,silentValue: boolean) => {
+  if (chart.value) {
+    chart.value.resize({
+    width: widthValue,
+    height: heightValue,
+    silent: silentValue,
+  });
+  }
+};
+const resizeCharts = () => {
+ //console.log(chart.value,111111);
+
+  if (chart.value) {
+    chart.value.resize();
+  }
+};
+window.addEventListener("resize", resizeCharts);
+onUnmounted(() => {
+  if (chart.value) {
+    chart.value.resize();
+  }
+  window.removeEventListener("resize", resizeCharts);
+  if (chart.value != null && chart.value.dispose) {
+    chart.value.dispose(); // 销毁图表
+  }
+});
+watch(
+  () => props.chartsData,
+  (val, oldVal) => {
+    if (val) {
+      const item = props.chartsData.find(item => item.value === 0);
+      if(item != undefined){
+        labelIsShow.value = false;
+      }else{
+        labelIsShow.value = true;
+      }
+      init();
+    }
+  },
+  {
+    deep: true,
+  }
+);
+onMounted(() => {
+  init();
+});
+defineExpose({ init,reSize });
+</script>
+<style lang="scss" scoped>
+.pie {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+</style>