<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-liquidfill'
const props = defineProps<{
  val: number
}>()
console.log('val :>> ', props, props.val)
const chartRef = ref()
onMounted(() => {
  echarts.init(chartRef.value).setOption({
    series: [{
      type: 'liquidFill',
      radius: '194px',
      data: [
        {
          value: props.val,
          itemStyle: {
            opacity: 0,
          },
        },
        {
          value: 0.68,
          direction: 'left',
          itemStyle: {
            color: '#2da8c3',
          },
        }, {
          value: 0.72,
          direction: 'left',
          itemStyle: {
            color: '#2da8c380',
          },
        },
      ],
      backgroundStyle: {
        color: '#12225130',
      },
      itemStyle: {
        shadowBlur: 0,
      },
      label: {
        show: true,
        color: '#fff',
        insideColor: '#fff',
        fontSize: 30,
        fontWeight: 'bold',

        align: 'center',
        baseline: 'middle',
        position: 'inside',
      },
      outline: {
        // show: false,
        borderDistance: 6,
        itemStyle: {
          borderWidth: 4,
          borderColor: '#2eabc4',
        },
      },
    }],
  })
})
</script>

<template>
  <div ref="chartRef" class="w-full h-full " />
</template>
