4dkk_mp/src/views/statistics/viewKankan/pieEchart.vue

<template>
  <Card title="作品类型统计">
    <div class="piechart" ref="chartPieRef" :style="{ height: '280px', width: '100%' }"></div>
  </Card>
</template>
<script lang="ts" setup>
  import { Card } from 'ant-design-vue';
  import { ref, Ref, onMounted } from 'vue';
  import { workType } from '/@/api/statistics/index';
  import { useECharts } from '/@/hooks/web/useECharts';
  const chartPieRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartPieRef as Ref<HTMLDivElement>);
  const colorList = ['#38a0ff', '#4cca73', '#FDD56A', '#d58b55', '#c8ffff'];
  let pieData = ref([])
  var rich = {
    name: {
      color: '#666666',
      fontSize: 14,
      padding: [8, 30, 0, 30],
      fontWeight: '400',
      align: 'left',
    },
    value: {
      color: '#333',
      fontSize: 15,
      padding: [0, 30, 8, 30],
      fontWeight: '500',
      align: 'left',
    },
    percent: {
      color: '#FFF',
      align: 'right',
      fontSize: 15,
      fontWeight: '500',
      //padding: [0, 5]
    },
    hr: {
      borderColor: '#DFDFDF',
      width: '100%',
      borderWidth: 1,
      height: 0,
    },
    cir: {
      fontSize: 26,
    },
  };
  function handlesetOptions() {
    setOptions({
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>数量 : {c} ({d}%)',
      },
      legend: {
        orient: 'horizontal',
        bottom: 0,
      },
      series: [
        {
          name: '库存情况',
          type: 'pie',
          radius: '68%',
          center: ['50%', '50%'],
          clockwise: false,
          data: pieData.value,
          label: {
            normal: {
              position: 'inner',
              formatter: (params) => {
                return '{percent|' + params.percent.toFixed(0) + '%}';
              },
              rich: rich,
            },
          },
          labelLine: {
            normal: {
              position: 'inner',
              formatter: (params) => {
                return '{percent|' + params.percent.toFixed(0) + '%}';
              },
              rich: rich,
            },
          },
          itemStyle: {
            borderWidth: 5,
            borderColor: '#fff',
          },
        },
      ],
      color: colorList,
      backgroundColor: '#fff',
    });
  }
  async function getList() {
    const res = await workType({});
    let zhStr = {
      "4dkk": '三维场景',    //四维看看作品
      "mix": '综合作品', //   混合作品
      "pano": '全景图'  //全景看看作品
    }
    pieData.value = res.map(ele => {
      return {
        ...ele,
        value: ele.count,
        name: zhStr[ele.groupKey],
      }
    })
    handlesetOptions();
  }

  onMounted(() => {
    getList();
  });
</script>
<style lang="less" scoped>
  .piechart {
    width: 100%;
    height: 100%;
  }
</style>