<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,text ,all,ctext,ctextText} } = defineProps(['data'])
const initM = () => {
  const chart = init(assetEchart.value as HTMLElement);
  chart.setOption({
    title: {
        text:tittle,
        x:'center',
        y:'top',
        textStyle: {
            fontSize: 12,
            fontWeight: 'bold',
            color: '#333',
        },
    },
    tooltip: {
        // formatter: `{a} {c} <br/> {b}({d}%)`,
        formatter:(params)=>{ 
          return params.name+': '+params.value +text +'<br/>'+'占比:' +(params.value/ctextText*100).toFixed(2)+'%';
        },
          padding: [10, 10],
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(67,100,247,0.08)",
            },
          },
    },
    series: [
      {
        label: {
          show: true, // 设置为false，否则会重复
          position: "center",
          formatter: `${ctext}\n ${ctextText} ${ctext=='总进度' ? '(%)':'(万元)'}`,
          // formatter:(v)=>{ 
          //   return  `${all}\n总计${text}`
          // }, // 设置默认显示值
          rich: {
            n1: {
              fontSize: 16,
              fontWeight: "bold",
              color: "#1d3756",
              padding: [5, 0],
            },
            n2: {
              fontSize: 16,
              color: "#1d3756",
            },
          },
        },
        type,
        radius: ['50%', '70%'],
        data: xData,
        itemStyle,
        name: '统计',
      },
    ]
  })
}

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