修复 vuejs 条形图的 x 轴

Question

在我的 vuejs laravel 应用程序中，我正在尝试使用 apexcharts 模块实现条形图。

<apexchart ref="apexChart" :options="chartOptions" :series="chartData" type="bar"></apexchart>

以下是我的<sctipt></script>

<script>
import ApexCharts from 'apexcharts'
import axios from 'axios'

export default {
    data() {
        return {
            daywise_sales: [],
            chartData: [],
            mostSellingDay: '',
            leastSellingDay: '',
            chartOptions: {
                xaxis: {
                    categories: []
                },
                yaxis: {
                    title: {
                        text: "Sales"
                    }
                },
                chart: {
                    id: 'daywise_sales'
                },
                title: {
                    text: 'Day wise sales'
                }
            }
        }
    },
    mounted() {
        axios.get('/shopify-day-wise-sales')
        .then(response => {
            this.daywise_sales = response.data.day_totals;
            this.chartOptions.xaxis.categories = Object.keys(this.daywise_sales)
            .map(date => {
              return new Date(date).toLocaleString('default', {weekday: 'long'});
            });
            // Ensure that the chartData property is correctly set with the data
            this.chartData = [{data: Object.values(this.daywise_sales)}];
            
            // Find the most and least selling days
            let mostSellingDay = '';
            let mostSellingDaySales = 0;
            let leastSellingDay = '';
            let leastSellingDaySales = Number.MAX_SAFE_INTEGER;
            for (let date in this.daywise_sales) {
                if (this.daywise_sales[date] > mostSellingDaySales) {
                    mostSellingDay = date;
                    mostSellingDaySales = this.daywise_sales[date];
                }
                if (this.daywise_sales[date] < leastSellingDaySales) {
                    leastSellingDay = date;
                    leastSellingDaySales = this.daywise_sales[date];
                }
            }
            this.mostSellingDay = new Date(mostSellingDay).toLocaleString('default', {weekday: 'long'});
            this.leastSellingDay = new Date(leastSellingDay).toLocaleString('default', {weekday: 'long'});
        })
        .catch(error => {
            console.log(error);
        });
    }
}
</script>

从我的后端response.data.day_totals我得到以下数组

array:8 [
  "2023-01-11" => 1
  "2023-01-09" => 1
  "2023-01-05" => 0
  "2023-01-06" => 0
  "2023-01-07" => 0
  "2023-01-08" => 0
  "2023-01-10" => 0
  "2023-01-12" => 0
]

问题是我需要用短名称（星期六、星期日、星期一、星期二...等）而不是 1,2... 为 x 轴和 ya 轴设置每天的销售数量...

这是我目前的图表。

如何修复我的 x 轴？

Answer 1

我认为您需要文档的这一部分https://apexcharts.com/docs/formatting-axes-labels/