<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script lang="ts" setup>
import { init } from "echarts";
import {
  reactive,
  toRefs,
  Ref,
  ref,
  onMounted,
  watchEffect,
  defineProps,
} from "vue";
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let {
  data: { type, xData, center, padding, itemStyle,x ,y},
} = defineProps(["data"]);
console.log("xData", xData)
const all=xData.reduce((n,v)=>{ 
  return n + v.value
},0)
const initM = () => {
  const chart = init(assetEchart.value as HTMLElement);
  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: "#fff",
            },
          },
    },
    legend: {
      icon: "circle",
      align: "left",
      orient: "vertical",
      x: "right",
      y: "center",
      padding,
      textStyle: {
            fontSize: 16,
            fontWeight: 'normal',
            color: '#fff',
        },
      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: false, // 设置为false，否则会重复
        },
        emphasis: {
          label: {
            show: false, // 显示
          },
        },
        labelLine: {
          show: false,
        },
        type,
      //  name: xData[0].name,
        radius: ["40%", "70%"],
        center,
        data: xData,
        itemStyle
      },
    ],
  });
};
function chartSize(container, charts) {
  function getStyle(el, name) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(el, null);
    } else {
      return el.currentStyle;
    }
  }
  const hi = getStyle(container, "height").height;
  charts.style.height = hi;
}
watchEffect(() => {});
onMounted(() => {
  initM();
});
</script>

<style lang="scss" scoped>
.asset_echart {
  width: 498px;
  height: 250px;
  margin: 10px 14px 0 16px;

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