<template>
  <div class="chart-item" :id="elementId"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import { initEcharts, disposeEchartsByKey, setOption } from './echartsOptions';

const props = defineProps(['chartsId', 'barType']);
const elementId = ref('chartId');
const colorList = ref([]);
const option = ref<any>({});

const initChart = () => {
  if (colorList.value.length) {
    option.value.color = colorList.value;
  }
  nextTick(() => {
    initEcharts(elementId.value, elementId.value, props.barType, option.value);
  });
};

defineExpose({
  elementId,
  colorList,
  option,
  initChart,
  setOption,
  disposeEchartsByKey,
});

onMounted(() => {
  elementId.value = props.chartsId;
});
</script>

<style scoped lang="scss">
.chart-item {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
