<template>
  <div style="width: 100%;height: 100%;">
    <Chart ref="chart"></Chart>
  </div>
</template>

<script setup>
import Chart from '@/components/chart';
import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg.js';

const props = defineProps({
  defaultData: Object,
  colors: Array
});

const { defaultData, colors } = toRefs(props);
const resizeTime = ref(true);
const maxHeight = ref(null);
const requestData = ref(null);

watch(() => defaultData, (newVal) => {
    getData();
  }, { deep: true }
);
onMounted(async () => {
  await getData();
});
const chart = ref();
const $clearNull = inject('$clearNull');
const getData = async () => {
  let chartData = $clearNull(defaultData.value) || {};
  chartData.color = colors.value?.length > 0 ? colors.value : ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
  chart.value?.setData(chartData);
};
</script>

<style>

</style>
