<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.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: "#ccc",
        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: ["25%", "50%"],
        radius: ["50%", "80%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 5,
          borderColor: "#ffffff00",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 10,
            fontWeight: "bold",
            color: "#ccc",
          },
        },
        labelLine: {
          show: false,
        },
        data: myData,
      },
    ],
  });
  chart.on("click", function (params) {
    console.log(params,1111222)
    emit("click-call-back", { ...params});
  });
};
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>