<script setup lang="ts">
import { defineProps, computed, ref, onMounted } from "vue";
import Echart from "./Echarts.vue";
interface IProps {
  xLabels: string[];
  values: any[];
}

const props = defineProps<IProps>();

const echarts = ref<any>();

onMounted(() => {
  console.log(echarts.value.instance);
});

const pieOptions = computed<any>(() => ({
  xAxis: {
    type: "category",
    data: props.xLabels
  },
  yAxis: {
    type: "value"
  },
  grid: {
    x: 50,
    y: 50,
    x2: 50,
    y2: 50
  },
  series: [
    {
      data: props.values,
      type: "bar",
      showBackground: true,
      backgroundStyle: {
        color: "rgba(180, 180, 180, 0.2)"
      }
    }
  ]
}));
</script>

<template>
  <Echart ref="echarts" :option="pieOptions" height="350px" />
</template>
