<!--
 * @Author: PoJun
 * @Date: 2023-12-19 14:57:48
 * @LastEditors: PoJun
 * @LastEditTime: 2024-01-18 14:44:19
 * @Message: 柱形图
-->
<template>
    <view class="data-charts">
        <view class="uv-font-md uv-weight-700 uv-m-25">产品-供应商数量</view>
        <qiun-data-charts type="column" :ontouch="true" :opts="opts" :chartData="chartData" />
    </view>
</template>

<script>
import { getHomeChartData } from "@/config/http.js";
export default {
    props: {
        times: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            chartData: {},
            opts: {
                padding: [15, 15, 5, 15],
                fontSize: 12,
                touchMoveLimit: 24,
                enableScroll: true,
                legend: {
                    show: false,
                },
                xAxis: {
                    disableGrid: true,
                    scrollShow: false,
                    itemCount: 5,
                },
                yAxis: {
                    data: [
                        {
                            min: 0,
                        },
                    ],
                    splitNumber: 5,
                    disableGrid: true,
                },
                extra: {
                    column: {
                        type: "group",
                        activeBgColor: "#000000",
                        activeBgOpacity: 0.08,
                        width: 20,
                    },
                },
            },
        };
    },
    methods: {
        async init() {
            try {
                const data = await getHomeChartData();
                const categories = data.map(item => item.name);
                const series = [
                    {
                        name: "供应商数量",
                        data: data.map(item => item.c),
                    },
                ];

                this.$nextTick(() => {
                    this.chartData = JSON.parse(JSON.stringify({ categories, series }));
                });
            } catch (error) {
                console.log(error);
            }
        },
    },
    watch: {
        times: {
            immediate: true,
            handler: function () {
                this.init();
            },
        },
    },
};
</script>

<style lang="scss" scoped>
.data-charts {
    width: 100%;
    height: 300px;
}
</style>
