<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </div>
</template>
<script setup>
import { init } from 'echarts';
import 'echarts-liquidfill/src/liquidFill.js';
const assetEchart = ref(null);
let {
  data: { xData },
} = defineProps(['data']);
const all = xData?.reduce((n, v) => {
  return n + v.itemScore;
}, 0);
console.log('xDataxData', xData);
const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    title: [
      {
        text: xData[0]?.itemContent,
        x: '10%',
        y: '79%',
        textStyle: {
          fontSize: 14,
          fontWeight: '100',
          color: '#fff',
          lineHeight: 16,
          textAlign: 'center',
        },
      },
      {
        text: xData[1]?.itemContent,
        x: '61%',
        y: '79%',
        textStyle: {
          fontSize: 14,
          fontWeight: '100',
          color: '#fff',
          lineHeight: 16,
          textAlign: 'center',
        },
      },
    ],
    series: [
      {
        type: 'liquidFill',
        radius: '57%',
        center: ['25%', '45%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0e3f6a  ',
                opacity:'0.6'
              },
              {
                offset: 1,
                color: '#2ecefc ',
                opacity:'0.9'

              },
            ],
            globalCoord: true,
          },
        ],
        data: [xData[0]?.realScore], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: '#1e5187',
          opacity:'0.3'
          
        },
        label: {
          normal: {
            textStyle: {
              fontSize: 14,
              color: '#0f406a',
            },
            formatter: function (param) {
              return xData[0]?.standardFlag == 1 ? '已完成' : '未完成' + '\n' + '总数' + (xData[0]?.itemScore || 0);
            },
          },
        },
        outline: {
          borderDistance: 12,
          itemStyle: {
            borderWidth: 7,
            borderColor: '#3077a7',
            opacity:'0.9'
          },
        },
      },
      {
        //第二个球的填充
        type: 'liquidFill',
        radius: '57%',
        center: ['80%', '45%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0e3f6a',
                opacity:'0.6'
              },
              {
                offset: 1,
                color: '#2ecefc',
                opacity:'0.9'
              },
            ],
            globalCoord: false,
          },
        ],
        data: [xData[1]?.standardFlag == 1 ? 1 : 0], // data个数代表波浪数
        //   data: [xData[1]?.realValue/xData[1]?.itemScore], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: '#1e5187',
          opacity:'0.3'
        },
        label: {
          normal: {
            textStyle: {
              fontSize: 14,
              color: '#fff',
            },
            formatter: function (param) {
              return (param.value * 100 || 0) + '%' + '\n' + '总数' + (xData[1]?.itemScore || 0);
            },
          },
        },
        outline: {
          // show: false
          borderDistance: 12,
          itemStyle: {
            borderWidth: 7,
            borderColor: '#3077a7',
            opacity:'0.9'
          },
        },
      },
    ],
  });
};

onMounted(() => {
  setTimeout(() => {
    initM();
  }, 100);
});
</script>

<style lang="scss" scoped>
.asset_echart {
  width: 480px;
  height: 280px;
  // margin: 10px 14px 0 16px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>