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

const props = defineProps<IProps>();

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: "line",
      areaStyle: {}
    }
  ]
}));
</script>

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