finance/components/RingEcharts.vue

<template>
  <!-- <div id="yield-chart"></div> -->
  <div :id="props.id" style="width: 400px; height: 260px"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import { taskExpense, rowExpense, memberFinance } from 'apis/finance';
const projectId = useProjectId();
const props = defineProps({ id: { type: String, default: () => {} } });

let oData = [
  {
    name: '办公费',
    value: 36,
    rate: 12,
  },
  {
    name: '车辆费用',
    value: 20,
    rate: 20,
  },
  {
    name: '差旅费33',
    value: 15,
    rate: -40,
  },
  {
    name: '租赁费',
    value: 10,
    rate: -15,
  },
  {
    name: '其他',
    value: 9,
    rate: 12,
  },
];
// 获取echarts图表数据(任务支出)
async function getTaskExpense() {
  const params = { param: { projectId: projectId.value } };
  const res = await taskExpense(params);
  return changeData(res, 'taskName');
}
// 获取echarts图表数据(名目支出)
async function getRowExpense() {
  const params = { param: { projectId: projectId.value } };
  const res = await rowExpense(params);
  return changeData(res, 'rowName');
}
// 获取echarts图表数据(成员财务)
async function getMemberFinance() {
  const params = { param: { projectId: projectId.value } };
  const res = await memberFinance(params);
  return changeData(res, 'memberName');
}
// 修改数据为optionData
function changeData(list, name) {
  let optionsData = [];
  for (let i = 0; i < list.length; i++) {
    const data = {
      name: list[i][name],
      value: list[i].money - 0,
      percentage: list[i].percentage,
    };
    optionsData.push(data);
  }
  return optionsData;
}
function setData() {
  if (props.id === 'taskEcharts') {
    return getTaskExpense();
  } else if (props.id === 'nameEcharts') {
    return getRowExpense();
  } else if (props.id === 'memberEcharts') {
    return getMemberFinance();
  } else {
    return oData;
  }
}

function getTitleNum(list) {
  let num = 0;
  for (let i = 0; i < list.length; i++) {
    num += list[i].value;
  }
  return num;
}
onMounted(async () => {
  if (props.id) {
    var myChart = echarts.init(document.getElementById(props.id));
  }
  const data = await setData();
  const title = getTitleNum(data);
  const option = {
    title: {
      text: title,
      textStyle: {
        fontSize: 17,
        color: 'black',
      },
      textAlign: 'center',
      x: '24%',
      y: '35%',
    },
    legend: {
      type: 'plain',
      icon: 'circle',
      orient: 'vertical',
      left: '55%',
      top: '15%',
      align: 'left',
      itemGap: 15,
      itemWidth: 10, // 设置宽度
      itemHeight: 10, // 设置高度
      symbolKeepAspect: false,
      textStyle: {
        color: '#000',
        rich: {
          name: {
            verticalAlign: 'right',
            align: 'left',
            width: 50,
            fontSize: 12,
          },
          value: {
            align: 'left',
            width: 40,
            fontSize: 12,
          },
          count: {
            align: 'left',
            width: 80,
            fontSize: 12,
          },
        },
      },
      data: data.map(item => item.name),
      formatter: function (name) {
        if (data && data.length) {
          for (var i = 0; i < data.length; i++) {
            if (name === data[i].name) {
              return (
                '{name| ' +
                name +
                '}  | ' +
                '{value| ' +
                data[i].percentage +
                '%}' +
                '{count| ' +
                data[i].value +
                '} '
              );
            }
          }
        }
      },
    },
    series: [
      {
        name: '数量',
        type: 'pie',
        radius: ['40%', '55%'],
        center: ['25%', '40%'],
        data: data,
        label: {
          normal: {
            show: false,
            position: 'center',
            formatter: '{text|{c}}\n{b}',
            rich: {
              text: {
                align: 'center',
                verticalAlign: 'middle',
                padding: 8,
                fontSize: 30,
              },
              value: {
                align: 'center',
                verticalAlign: 'middle',
                fontSize: 20,
              },
            },
          },
        },
        labelLine: {
          normal: {
            show: true,
          },
        },
      },
    ],
  };
  myChart.setOption(option);
});
</script>

<style scoped></style>