Vue.js+Laravel中ApexCharts柱状图X轴星期缩写显示修复

核心思路 #

将后端返回的日期数据转换为星期缩写（Sat、Sun等），然后配置ApexCharts的X轴使用转换后的分类数据。可选择前端JS处理或后端Laravel处理两种方式。

方式一：前端JavaScript处理日期转换 #

1. 编写日期转换函数
   新建工具函数，将日期字符串转为星期缩写：

   const getWeekdayAbbr = (dateStr) => {
     // 按周日到周六排序的星期缩写数组
     const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     const date = new Date(dateStr);
     // 若后端日期为UTC格式，改用date.getUTCDay()
     return weekdays[date.getDay()];
   };
   

2. 处理后端返回的数据
   假设后端返回原始数据格式：

   [{"date":"2024-05-20","sales":120},{"date":"2024-05-21","sales":150},{"date":"2024-05-22","sales":90}]
   

   转换为ApexCharts所需结构：

   // 假设后端数据存于salesData变量中
   const processedData = salesData.map(item => ({
     weekday: getWeekdayAbbr(item.date),
     sales: item.sales
   }));
   
   // 提取X轴分类和销售额数据
   const xCategories = processedData.map(item => item.weekday);
   const seriesData = [{
     name: '每日销售额',
     data: processedData.map(item => item.sales)
   }];
   

3. 配置ApexCharts的X轴
   在Vue组件的图表配置中指定X轴分类：

   chartOptions: {
     chart: {
       type: 'bar'
     },
     xaxis: {
       categories: xCategories,
       labels: {
         style: {
           fontSize: '12px'
         }
       }
     },
     yaxis: {
       title: {
         text: '每日销售额'
       },
       // 可选：为Y轴添加货币符号
       labels: {
         formatter: val => `¥${val}`
       }
     }
   }
   

4. Vue模板绑定

   <apexchart
     type="bar"
     :options="chartOptions"
     :series="seriesData"
     height="350"
   />
   

方式二：后端Laravel处理日期转换 #

直接在Laravel控制器中用Carbon生成星期缩写，减少前端逻辑：

use Carbon\Carbon;
use App\Models\Sale;

public function getSalesData()
{
    $salesData = Sale::selectRaw('DATE(created_at) as date, SUM(amount) as sales')
        ->groupBy('date')
        ->get()
        ->map(function ($item) {
            $date = Carbon::parse($item->date);
            return [
                'weekday' => $date->format('D'), // Carbon的D格式对应星期缩写
                'sales' => $item->sales
            ];
        });

    return response()->json($salesData);
}

前端直接提取weekday字段作为X轴分类即可，无需额外转换。

注意事项 #

• 若存在时区偏差，前端转换时改用date.getUTCDay()，后端则确保Carbon使用正确时区（可在config/app.php中配置）。
• 若X轴仍显示异常，检查xCategories数组是否与seriesData的长度一致，确保数据一一对应。

内容的提问来源于stack exchange，提问作者nikamata hukamuko