pqs-9100_client/frontend/src/components/echarts/pie/default.vue

<!-- 默认饼图 -->
<template>
  <div class="pie" ref="chartsRef"></div>
</template>
<script lang="ts" setup>
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({}),
  chart: any = ref();
const init = () => {
  customData.value = {
    title: "", //标题
    textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
    ratio: true, //是否显示数值占比，默认不显示
    isRing: false, //是否环形图
    isRadius: false, //是否圆角
    isSpace: true, //是否显示间隔
    isLabelLine: false, //是否显示引导线
    ...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: 0, // 设置图例项之间的间隔为20
    ...props.legendData,
  };
  chart.value = 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 ? ["55", "75"] : "80%",
        data: props.chartsData,
        center: ["55%", "50%"], // 设置饼图的中心位置
        // padAngle: 2,
        minAngle: 15, //最小角度
        startAngle: 270, //起始角度
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        label: {
          normal: {
            show: true,
            position: "inside",
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
        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 resizeCharts = () => {
 
  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) {
      init();
    }
  },
  {
    deep: true,
  }
);
onMounted(() => {
  init();
});
defineExpose({ init });
</script>
<style lang="scss" scoped>
.pie {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>