<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 ,itemStyle} from 'vue';
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let { data: { tittle, type, xData,center,padding,position,itemStyle } } = defineProps(['data'])
const initM = () => {
  const chart = init(assetEchart.value as HTMLElement);
  var colorList = ['#7ed4ac', '#fe9c3a', '#ebd571', '#eb7c6f', '#0bb4d7', '#8fcde5', '#00c973'];
  chart.setOption({
    title: [
        {
            textStyle: {},
        },
        {
            top: 'center',
            right: 'center',
        },
    ],
   
   
    series: [
      {
        label: {
          show: false, // 设置为false，否则会重复
          position: "center",
          formatter: "{n1|{d}%}" + "\n" + "{n2|{b}}", // 设置默认显示值
          rich: {
            n1: {
              fontSize: 20,
              fontWeight: "bold",
              color: "#1d3756",
              padding: [5, 0],
            },
            n2: {
              fontSize: 16,
              color: "#1d3756",
            },
          },
        },
        emphasis: {
          label: {
            show: true, // 显示
            fontSize: "15",
            fontWeight: "bold",
            padding: [0, 115],
          },
        },
       
        type,
        radius: ['50%', '80%'],
        data: xData,
        itemStyle,
       
      },
    ]
  })
}

watchEffect(() => {
})
onMounted(() => {
  initM()
})
</script>
<style lang="scss" scoped>
.asset_echart {
  width: 210px;
  height: 180px;
  margin: 10px 14px 0 16px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>