xt-front/src/views/biz/stats/chart/pie.vue

<template>
  <div class="pie">
    <!-- <div class="pie-percentage no-print" @click="handlePercentage"
      >{{ showPercentage ? '隐藏' : '显示' }}百分比</div> -->
    <div ref="chartRef" :style="{ height, width }" />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, PropType, ref, Ref, watch } from 'vue';

  import { useECharts } from '/@/hooks/web/useECharts';
  const props = defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '400px',
    },
    data: {
      type: Object,
      default: () => {},
    },
  });
  // console.log('props', props);
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const showPercentage = ref(true);
  onMounted(async () => {
    setChart();
  });
  watch(
    () => props.data,
    _newVal => {
      setChart();
    },
  );
  // function handlePercentage() {
  //   showPercentage.value = !showPercentage.value;
  //   setChart();
  // }
  function setChart() {
    const data = props.data?.content;
    const sum = data?.reduce((pre, cur) => pre + cur.value, 0) || 0;
    let legend = {} as any;
    legend =
      props.data.id != 'bubble' &&
      props.data.id != 'jam' &&
      props.data.id != 'noBox' &&
      props.data.id != 'limit' &&
      props.data.id != 'lowBattery' &&
      props.data.id != 'outOfControl' &&
      props.data.id != 'machine'
        ? {
            orient: 'vertical',
            right: 20,
            top: 40,
            bottom: 20,
          }
        : {
            orient: 'horizontal',
            right: 20,
            top: 40,
            type: 'scroll',
          };

    const lableFormatter = showPercentage.value ? '{b} (数量: {c}, 占比: {d}%)' : '{b} ({c})';
    setOptions({
      title: {
        show: false,
        text: props.data?.description || '',
        left: 'left',
      },
      tooltip: {
        trigger: 'item',
        valueFormatter: (value: number) =>
          '数量: ' + value + ' 占比: ' + (Number(((value / sum) * 100).toFixed(2)) || 0) + '%',
      },
      toolbox: {
        feature: {
          saveAsImage: {
            type: 'png',
          },
        },
      },
      legend,
      series: [
        {
          type: 'pie',
          radius: '50%',
          data: props.data?.content || [],
          minAngle: 5,
          avoidLabelOverlap: true,
          label: {
            show: true,
            formatter: lableFormatter,
            overflow: 'break',
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    });
  }
</script>
<style lang="less" scoped>
  .pie {
    position: relative;

    &-percentage {
      position: absolute;
      top: 4px;
      right: 35px;
      z-index: 99;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 2px 4px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;

      &:hover {
        box-shadow: 2px 4px 4px rgb(12 12 12 / 10%);
      }
    }
  }
</style>