lianjie_admin/app/Admin/Widgets/Charts/OrderGoodsActivityColumnChart.php

<?php

namespace App\Admin\Widgets\Charts;

use Dcat\Admin\Admin;
use Dcat\Admin\Support\JavaScript;
use Dcat\Admin\Widgets\ApexCharts\Chart;
use Illuminate\Http\Request;

class OrderGoodsActivityColumnChart extends Chart
{ 
    protected $categories = [
        '商品1', '商品2', '商品3', '商品4', '商品5', '商品6', '商品7', '商品8', '商品9', '商品10'
        // ,'商品11', '商品12', '商品13', '商品14', '商品15', '商品16', '商品17', '商品18', '商品19', '商品20'
    ];
    protected $data = [];
    protected $id;
    protected $option;

    public function __construct($data = [], $containerSelector = null, $options = [])
    {
        $this->option = $this->id = 7;
        $this->data = $data;
        parent::__construct($containerSelector, $options);

        $this->setUpOptions();
    }

    /**
     * 初始化图表配置
     */
    protected function setUpOptions()
    {
        $color = Admin::color();

        $this->options([
            'chart' => [
                'type' => 'bar',
                'height'=> 350,
            ],
            'colors' => [
                '#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e', '#f48024', '#69d2e7'
                ,'#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e', '#f48024', '#69d2e7'
            ],
            'plotOptions'=> [
                'bar'=> [
                    'distributed' =>false, // 柱状图颜色
                    'horizontal' => false, // 竖直
                    'columnWidth' => '50%', // 柱状宽
                    'dataLabels' => [
                        'position' => 'bottom'
                    ]
                ]
            ],
            'dataLabels' => [
                'enabled'=> true,
            ],
            'xaxis' => [
                'categories' => $this->categories,
            ],
            'yaxis' => [
                'axisBorder' => [
                    'show' => true,
                    'color' => $color->primary()
                ],
                'labels' => [
                    'show' => true,
                    'style' => [
                    'colors' => $color->primary()
                  ]
                ],
                'title' => [
                    'text' => "销量",
                    'align' => 'center',
                    'style' => [
                      'color' => $color->primary()
                    ] 
                ]
            ],
            // 'tooltip' => [
            //     'x' => [
            //         'show' => true
            //     ]
            // ]
        ]);
        $number = 10;
        // $this->chartOption(
        //     'tooltip.y.formatter',
        //     // 这个值最后段代码会作为JS代码执行
        //     JavaScript::make("function (params, index) { 
        //         return params +'-'+ index;
        //      }")
        // );
    }

    /**
     * 处理请求
     * 如果你的图表类中包含此方法，则可以通过此方法处理前端通过ajax提交的获取图表数据的请求
     *
     * @param Request $request
     * @return mixed|void
     */
    public function handle(Request $request)
    {

        switch ((int) $request->get('option')) {
            case 30:
                // 你的数据查询逻辑
                $data = [
                    [
                        'name' => '活动商品',
                        'data' => [54, 45, 41, 64, 22, 46, 52, 10, 9, 11, 54, 45, 41, 64, 22, 46, 52, 10, 9, 11]
                    ]
                ];
                break;
            case 28:
                // 你的数据查询逻辑
                $data = [
                    [
                        'name' => '活动商品',
                        'data' => [44, 55, 41, 64, 22, 56, 52, 12, 52, 12, 44, 55, 41, 64, 22, 56, 52, 12, 52, 12]
                    ]
                ];
                break;
            case 7:
            default:
                // 你的数据查询逻辑
                $data = [
                    [
                        'name' => '活动商品',
                        'data' => [54, 45, 41, 64, 22, 46, 52, 10, 9, 11]
                    ]
                ];
                break;
        }
        
        $this->withData($data);
    }
    /**
     * 处理图表数据
     */
    protected function buildData()
    {
        // 执行你的数据查询逻辑
        $data = [
            [
                'name' => '活动商品',
                'data' => [44, 55, 41, 64, 22, 56, 52, 12, 52, 12]
            ]
        ];
        $categories = $this->categories;

        $this->withData($data);
        $this->withCategories($categories);
    }

    /**
     * 这里返回需要异步传递到 handler 方法的参数 
     * 
     * @return array
     */
    public function parameters(): array
    {
        return [
            'id'     => $this->id,
            'option' => $this->option,
        ];
    }

    /**
     * 设置图表数据
     *
     * @param array $data
     *
     * @return $this
     */
    public function withData(array $data)
    {
        return $this->option('series', $data);
    }

    /**
     * 渲染图表
     *
     * @return string
     */
    public function render()
    {
        $this->buildData();

        return parent::render();
    }

}