<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script lang="ts" setup>
import { init } from "echarts";
import * as echarts from "echarts";
import { reactive, toRefs, Ref, ref, onMounted, watchEffect } from "vue";
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let {
  myData,
} = defineProps(['myData']);
const emit = defineEmits(['click-call-back'])
const initM = () => {
  const chart = init(assetEchart.value as HTMLElement);
  window.addEventListener("resize", () => {
    chart.resize();
  });
  chart.setOption({
    tooltip: {
      trigger: "item",
      formatter: function (parms) {
        var str =
          parms.seriesName +
          "</br>" +
          parms.marker +
          "" +
          parms.data.legendname +
          "</br>" +
          "数量：" +
          parms.data.value +
          "</br>" +
          "占比：" +
          parms.percent +
          "%";
        return str;
      },
    },
    legend: {
        type:"scroll",
        orient: 'vertical',
        left:'50%',
        align:'left',
        top:'middle',
        textStyle: {
            color:'#8C8C8C',
            fontSize:12
        },
        height:250,
        formatter:function(params) {
            let tip1 = "";
            let tip = "";
            let le = params.length
			if(le > 13){
                let l = Math.ceil(le/13)
                for(let i = 1;i <= l;i++){
                    if(i < l){
                        tip1 += params.slice(i*13-13,i*13)+'\n';
                    }else if(i === l){
                        tip = tip1 + params.slice((l-1)*13,le)
                    }
                }
                return tip;
			}else{
                tip = params
                return tip;
            }
        }
    },
    series: [
        {
            name:'',
            type:'pie',
            center: ['24%', '50%'],
            radius: ['40%', '65%'],
             clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: (item) => {
                let a=item.name
                let b=item.name.length>7 ? (item.name.slice(0,7)+'...'):item.name

                return `${item.percent}%\n${b}`
              },
              textStyle: {
            color:'#FFFFFF',
            fontSize:13,
            fontWeight:'bold'
        },
            },
            labelLine: {
                normal: {
                  length:5,
                  length2:3,
                  smooth:true,
                }
            },
            data:myData
        }
    ]
  });
  chart.on("click", function (params) {
    // console.log(params)
    emit("click-call-back", { ...params, name: params.data.legendname });
  });
};
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: 450px;
  height: 240px;
  // margin-left:-30px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>