<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script setup>
import { init } from 'echarts';

const assetEchart = ref(null);
let { type, xData, center, padding, itemStyle, x, y } = defineProps(['data']);
const all = xData.reduce((n, v) => {
  return n + v.value;
}, 0);
const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    title: {
      text: all + '(个)',
      subtext: '总数',
      x,
      y,
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
        color: '#fff',
      },
      subtextStyle: {
        fontSize: 20,
        fontWeight: 'normal',
        align: 'center',
        color: '#fff',
      },
    },
    tooltip: {
      // formatter: `{a} {c} <br/> {b}({d}%)`,
      formatter: params => {
        return params.name + ': ' + params.value + '(个)' + '<br/>' + '占比:' + ((params.value / all) * 100).toFixed(2) + '%';
      },
      padding: [10, 10],
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(67,100,247,0.08)',
        },
      },
    },
    legend: {
      icon: 'circle',
      align: 'left',
      orient: 'vertical',
      x: 'right',
      y: 'center',
      padding,
      show: false,
      formatter: function (name) {
        let total = 0;
        let tarValue;
        let arr = name;
        for (let i = 0; i < xData.length; i++) {
          total += xData[i].value;
          // if (name.length > 20) {
          // name =name.slice(20, name.length) + "...";
          // xData[i].name=arr.slice(20, arr.length) + "...";
          // }
          if (xData[i].name == name) {
            tarValue = xData[i].value;
          }
        }
        return `${name}  ${tarValue}(个)`;
      },
    },

    series: [
      {
        avoidLabelOverlap: 10,
        label: {
          show: true, // 设置为false，否则会重复
        },
        emphasis: {
          label: {
            show: false, // 显示
          },
        },
        labelLine: {
          show: true,
        },
        type,
        //  name: xData[0].name,
        radius: ['40%', '70%'],
        center,
        data: xData,
        itemStyle,
      },
    ],
  });
};
onMounted(() => {
  initM();
});
</script>

<style lang="scss" scoped>
.asset_echart {
  // width: 498px;
  height: calc(100% - 20px);
  // margin: 10px 14px 0 16px;

  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>