我有一个名为sales的数据库，我试图在图表中显示它，但无法显示。x1c 0d1x
| 身份证|产品|收益|创建时间|
| - ------|- ------|- ------|- ------|
| 1个|茉莉|五十|2023年1月14日18时55分34秒|
| 第二章|如何烹饪|一百五十|2023年1月14日18时55分34秒|
| 三个|茉莉|一百|2023年1月14日18时55分34秒|
| 四个|字典|二百|2023年1月14日18时55分34秒|
| 五个|如何烹饪|七十|2023年2月20日17时23分54秒|
这是我第一次尝试在图表中做它，并尝试了教程中的其他代码，最终得到了这个结果

我尝试像第一个图表一样显示它，但不是按月显示，而是使用多个数据集，其中月份将包含产品名称及其当月收入。
原谅我不雅的剪辑
这是我设法遵循和做的工作代码，但不知道如何修改它以获得所需的输出。我尝试了，但得到一个错误，所以我把它放回去。

$now = Carbon::now();
        $yr = $now->format('Y/m/d');

       //monthly
        {
            $m= $now->format('m');
            $date_start = Carbon::create(date('Y'), "1");//january start
            $data=[];
            $monthdata=[];
            $x=0;
                
            for ($month = $m;  $x <= 7; $month++)
            {
                $x=$x+1;
                $date = Carbon::create(date('Y'), $month);
                $date_end = $date->copy()->endOfMonth();
            
                $saledate = DB::table('sales')
                ->select(DB::raw('sum(earnings) as sale'))
                ->where('created_at', '>=', $date)
                ->where('created_at', '<=', $date_end)
                ->get();
    
                $sum=0;
                foreach ($saledate as $row)
                {
                    $sum=$row->sale;
                }
                array_push($data,$sum);
                array_push($monthdata,$date->format('M'));
            
            }

            $saleChart1= new UserChart;
            $saleChart1->labels($monthdata);
            $saleChart1->dataset('Sales', 'bar',$data )->options([
                'color' => '#2596be',
            ]);
        }

在我的刀锋档案里，

<div class="col-lg-6 mb-5">
            <div class="card card card-raised h-100  ">
                <div class="card-header text-dark bg-success px-4" style="background-color:#198754 !important">
                    <i class="fas fa-chart-area me-1 text-white"></i>
                    Monthly Sales 
                </div>
                <div class="card-body bg-white">
                        <div class="col-lg-12 " >
                            <div id="myAreaChart1" class="mt-4" style="height: 300px;">  
                            {!! $saleChart1->container() !!}                                
                            <script src=https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts-en.min.js charset=utf-8></script>
                            {!! $saleChart1->script() !!}
                            </div>
                        </div>
                </div>
              
            </div>
        </div>

我的UserChart类，

<?php

namespace App\Charts;

use ConsoleTVs\Charts\Classes\Chartjs\Chart;

class UserChart extends Chart
{
    /**
     * Initializes the chart.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }
}

请帮助，找不到其他教程，所有我发现现在是饼图和折线图，并没有显示类似于我正在寻找的。我应该怎么做才能实现所需的输出？