<template>
    <div>
      <div ref="assetEchart" class="asset_echart"></div>
    </div>
  </template>
  <script lang="ts" setup>
  import { init } from "echarts";
  import 'echarts-liquidfill/src/liquidFill.js'
  import {
    reactive,
    toRefs,
    Ref,
    ref,
    onMounted,
    watchEffect,
    defineProps,
  } from "vue";
  const assetEchart: Ref<HTMLElement | null | any> = 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 as HTMLElement);
    window.addEventListener("resize", () => {
      chart.resize();
    });
    chart.setOption( {
      title: [
          {
              text:xData[0]?.itemContent,
              x: '5%',
              y: '60%',
              textStyle: {
                  fontSize: 14,
                  fontWeight: '100',
                  color: '#646464',
                  lineHeight: 16,
                  textAlign: 'center',
              },
          },
          {
              text:xData[1]?.itemContent,
              x: '61%',
              y: '60%',
              textStyle: {
                  fontSize: 14,
                  fontWeight: '100',
                  color: '#646464',
                  lineHeight: 16,
                  textAlign: 'center',
              },
          },
      ],
      series: [
          {
              type: 'liquidFill',
              radius: '47%',
              center: ['15%', '35%'],
              color: [
                  {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                          {
                              offset: 0,
                              color: '#1FD774  ',
                          },
                          {
                              offset: 1,
                              color: '#1FD774 ',
                          },
                      ],
                      globalCoord: false,
                  },
              ],
              data:[xData[0]?.realScore], // data个数代表波浪数
              backgroundStyle: {
                  borderWidth: 1,
                  color: '#fff  ',
              },
              label: {
                  normal: {
                      textStyle: {
                          fontSize: 14,
                          color: '#43C6F5',
                      },
                      formatter: function(param) {
                                  return  xData[0]?.standardFlag==1? '已完成':'未完成'+ '\n'+'总数' +(xData[0]?.itemScore||0)
                              },
                  },
              },
                          outline: {
                              // show: false
                              borderDistance: 0,
                              itemStyle: {
                                  borderWidth: 2,
                                  borderColor: '#43C6F5',
                              },
                          },
          },
          { //第二个球的填充
              type: 'liquidFill',
              radius: '47%',
              center: ['70%', '35%'],
              color: [
                  {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                          {
                              offset: 0,
                              color: '#08bbc9',
                          },
                          {
                              offset: 1,
                              color: '#08bbc9',
                          },
                      ],
                      globalCoord: false,
                  },
              ],
              data: [xData[1]?.standardFlag==1? 1:0], // data个数代表波浪数
            //   data: [xData[1]?.realValue/xData[1]?.itemScore], // data个数代表波浪数
              backgroundStyle: {
                  borderWidth: 1,
                  color: '#fff',
              },
              label: {
                  normal: {
                      textStyle: {
                          fontSize: 14,
                          color: '#08bbc9',
                      },
                      formatter: function(param) {
                                  return (param.value*100||0)+ '%'+'\n'+'总数' +(xData[1]?.itemScore||0)
                              },
                  },
              },
                          outline: {
                              // show: false
                              borderDistance: 0,
                              itemStyle: {
                                  borderWidth: 2,
                                  borderColor: '#42D4F4',
                              },
                          },
          },
      ],
  });
  };
  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(() => {
   setTimeout(()=>{ 
    initM();
   },100)
  });
  </script>
  
  <style lang="scss" scoped>
  .asset_echart {
    width: 400px;
    height: 240px;
    // margin: 10px 14px 0 16px;
    &_echart {
      width: 100%;
      height: 100%;
    }
  }
  </style>