图表

Dcat Admin引入了apexcharts图表功能，通过Dcat\Admin\Widgets\ApexCharts\Chart这个类可以帮助开发者快速渲染图表。

简单用法

如果你需要构建一个图表，可以参考下面的方式

更多类型的图表，请参考apexcharts官方文档。

  1. <?php
  3. namespace App\Admin\Widgets\Charts;
  5. use Dcat\Admin\Admin;
  6. use Dcat\Admin\Widgets\ApexCharts\Chart;
  8. class MyBar extends Chart
  9. {
  10.     public function __construct($containerSelector = null, $options = [])
  11.     {
  12.         parent::__construct($containerSelector, $options);
  14.         $this->setUpOptions();
  15.     }
  17.     /**
  18.      * 初始化图表配置
  19.      */
  20.     protected function setUpOptions()
  21.     {
  22.         $color = Admin::color();
  24.         $colors = [$color->primary(), $color->primaryDarker()];
  26.         $this->options([
  27.             'colors' => $colors,
  28.             'chart' => [
  29.                 'type' => 'bar',
  30.                 'height' => 430
  31.             ],
  32.             'plotOptions' => [
  33.                 'bar' => [
  34.                     'horizontal' => true,
  35.                     'dataLabels' => [
  36.                         'position' => 'top',
  37.                     ],
  38.                 ]
  39.             ],
  40.             'dataLabels' => [
  41.                 'enabled' => true,
  42.                 'offsetX' => -6,
  43.                 'style' => [
  44.                     'fontSize' => '12px',
  45.                     'colors' => ['#fff']
  46.                 ]
  47.             ],
  48.             'stroke' => [
  49.                 'show' => true,
  50.                 'width' => 1,
  51.                 'colors' => ['#fff']
  52.             ],
  53.             'xaxis' => [
  54.                 'categories' => [],
  55.             ],
  56.         ]);
  57.     }
  59.     /**
  60.      * 处理图表数据
  61.      */
  62.     protected function buildData()
  63.     {
  64.         // 执行你的数据查询逻辑
  65.         $data = [
  66.             [
  67.                 'data' => [44, 55, 41, 64, 22, 43, 21]
  68.             ],
  69.             [
  70.                 'data' => [53, 32, 33, 52, 13, 44, 32]
  71.             ]
  72.         ];
  73.         $categories = [2001, 2002, 2003, 2004, 2005, 2006, 2007];
  75.         $this->withData($data);
  76.         $this->withCategories($categories);
  77.     }
  79.     /**
  80.      * 设置图表数据
  81.      *
  82.      * @param array $data
  83.      *
  84.      * @return $this
  85.      */
  86.     public function withData(array $data)
  87.     {
  88.         return $this->option('series', $data);
  89.     }
  91.     /**
  92.      * 设置图表类别.
  93.      *
  94.      * @param array $data
  95.      *
  96.      * @return $this
  97.      */
  98.     public function withCategories(array $data)
  99.     {
  100.         return $this->option('xaxis.categories', $data);
  101.     }
  103.     /**
  104.      * 渲染图表
  105.      *
  106.      * @return string
  107.      */
  108.     public function render()
  109.     {
  110.         $this->buildData();
  112.         return parent::render();
  113.     }
  114. }

使用

<?php

use App\Admin\Widgets\Charts\MyBar;
use Dcat\Admin\Widgets\Card;
use Dcat\Admin\Layout\Content;

class MyController
{
    public function index(Content $content)
    {
        return $content->body(
            Card::make('我的图表', MyBar::make())
        );
    }
}

效果
图表 - 图1

图表与后端API交互

如果你的图表需要与后端API交互，可以参考以下方式

为了方便阅读，这里的示例代码直接继承前面定义的MyBar类。

<?php

namespace App\Admin\Widgets\Charts;

use Illuminate\Http\Request;

class MyAjaxBar extends MyBar
{
    protected $id;
    protected $username;

    // 这里的参数一定要设置默认值
    public function __construct($id = null, $username = null) 
    {
        parent::__construct();

        $this->id = $id;
        $this->username = $username;
    }

    /**
     * 处理请求
     * 如果你的图表类中包含此方法，则可以通过此方法处理前端通过ajax提交的获取图表数据的请求
     *
     * @param Request $request
     * @return mixed|void
     */
    public function handle(Request $request)
    {
        // 获取 parameters 方法设置的自定义参数
        $id = $request->get('id');
        $username = $request->get('username');

        switch ((int) $request->get('option')) {
            case 30:
                // 你的数据查询逻辑
                $data = [
                    [
                        'data' => [44, 55, 41, 64, 22, 43, 21]
                    ],
                    [
                        'data' => [53, 32, 33, 52, 13, 44, 32]
                    ]
                ];
                $categories = [2001, 2002, 2003, 2004, 2005, 2006, 2007];

                break;
            case 28:
                // 你的数据查询逻辑
                $data = [
                    [
                        'data' => [44, 55, 41, 64, 22, 43, 21]
                    ],
                    [
                        'data' => [53, 32, 33, 52, 13, 44, 32]
                    ]
                ];
                $categories = [2001, 2002, 2003, 2004, 2005, 2006, 2007];

                break;
            case 7:
            default:
                // 你的数据查询逻辑
                $data = [
                    [
                        'data' => [44, 55, 41, 64, 22, 43, 21]
                    ],
                    [
                        'data' => [53, 32, 33, 52, 13, 44, 32]
                    ]
                ];
                $categories = [2001, 2002, 2003, 2004, 2005, 2006, 2007];
                break;
        }

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

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

    /**
     * 这里覆写父类的方法，不再查询数据
     */
    protected function buildData()
    {
    }
}

用户点击构建下拉菜单加载不同的图表数据

<?php

use App\Admin\Widgets\Charts\MyAjaxBar;
use Dcat\Admin\Widgets\Dropdown;
use Dcat\Admin\Widgets\Box;
use Dcat\Admin\Layout\Row;
use Dcat\Admin\Layout\Content;

class MyController
{
    public function index(Content $content)
    {
        return $content->body(function (Row $row) {
            // 构建下拉菜单，当点击菜单时发起请求获取数据重新渲染图表
            $menu = [
                '7'  => '最近7天',
                '28' => '最近28天',
                '30' => '最近30天',
            ];
            $dropdown = Dropdown::make($menu)
                ->button(current($menu))
                ->click()
                ->map(function ($v, $k) {
                    // 此处设置的 data-xxx 属性会作为post数据发送到后端api
                    return "<a class='switch-bar' data-option='{$k}'>{$v}</a>";
                });

                        // 传递自定义参数
            $id = ...;
            $username = ...;

            $bar = MyAjaxBar::make($id, $username)
                ->fetching('$("#my-box").loading()') // 设置loading效果
                ->fetched('$("#my-box").loading(false)') // 移除loading效果
                ->click('.switch-bar'); // 设置图表点击菜单则重新发起请求，且被点击的目标元素上的 data-xxx 属性会被作为post数据发送到后端API

            $box = Box::make('我的图表2', $bar)
                ->id('my-box') // 设置盒子的ID
                ->tool($dropdown); // 设置下拉菜单按钮

            $row->column(12, $box);
        });
    }
}

效果
图表 - 图2

设置图表配置为可执行JS代码

如果你需要在图表配置加入可执行的JS代码，可参考以下方式

<?php

use use Dcat\Admin\Support\JavaScript;
use Dcat\Admin\Admin;
use Dcat\Admin\Widgets\ApexCharts\Chart;

class MyBar extends Chart
{
    public function __construct($containerSelector = null, $options = [])
    {
        parent::__construct($containerSelector, $options);

        $this->setUpOptions();
    }

    /**
     * 初始化图表配置
     */
    protected function setUpOptions()
    {
        $number = 20;

        $this->option(
            'plotOptions.radialBar.dataLabels.total.formatter',
            // 这个值最后段代码会作为JS代码执行
            JavaScript::make("function () { return {$number}; }")
        );

        ...
    }

    ...   
}