<template>
    <div class="charts-box" :style="{ width: width, height: height }">
        <qiun-data-charts
            type="column"
            :canvas2d="canvas2d"
            :opts="opts"
            :tooltipShow="false"
            :chartData="chartData"
        />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
interface SeriesType {
    data: { color?: string; value: number }[];
}
interface ChartDataType {
    categories: string[];
    series: SeriesType[];
}
const props = withDefaults(
    defineProps<{
        width?: string;
        height?: string;
        chartData: ChartDataType;
    }>(),
    { height: '440rpx', categories: () => [] },
);
const canvas2d = ref(true);
const chartData = ref(props.chartData);
const opts = ref({
    padding: [20, 25, 0, 0],
    enableScroll: false,
    legend: {
        show: false,
    },
    xAxis: {
        disableGrid: true,
    },
    yAxis: {
        // format: 'integerFormat',
    },
    extra: {
        column: {
            type: 'group',
            width: 30,
            activeBgColor: '#000000',
            activeBgOpacity: 0.05,
            barBorderCircle: false,
            seriesGap: 5,
            linearOpacity: 0.5,
        },
    },
});
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
    width: 100%;
}
</style>
