图表

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

简单用法

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

{tip} 更多类型的图表，请参考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. }

使用

  1. <?php
  3. use App\Admin\Widgets\Charts\MyBar;
  4. use Dcat\Admin\Widgets\Card;
  5. use Dcat\Admin\Layout\Content;
  7. class MyController
  8. {
  9.     public function index(Content $content)
  10.     {
  11.         return $content->body(
  12.             Card::make('我的图表', MyBar::make())
  13.         );
  14.     }
  15. }

效果

图表 - 图1

图表与后端API交互

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

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

  1. <?php
  3. namespace App\Admin\Widgets\Charts;
  5. use Illuminate\Http\Request;
  7. class MyAjaxBar extends MyBar
  8. {
  9.     protected $id;
  10.     protected $username;
  12.     // 这里的参数一定要设置默认值
  13.     public function __construct($id = null, $username = null) 
  14.     {
  15.         parent::__construct();
  17.         $this->id = $id;
  18.         $this->username = $username;
  19.     }
  21.     /**
  22.      * 处理请求
  23.      * 如果你的图表类中包含此方法，则可以通过此方法处理前端通过ajax提交的获取图表数据的请求
  24.      *
  25.      * @param Request $request
  26.      * @return mixed|void
  27.      */
  28.     public function handle(Request $request)
  29.     {
  30.         // 获取 parameters 方法设置的自定义参数
  31.         $id = $request->get('id');
  32.         $username = $request->get('username');
  34.         switch ((int) $request->get('option')) {
  35.             case 30:
  36.                 // 你的数据查询逻辑
  37.                 $data = [
  38.                     [
  39.                         'data' => [44, 55, 41, 64, 22, 43, 21]
  40.                     ],
  41.                     [
  42.                         'data' => [53, 32, 33, 52, 13, 44, 32]
  43.                     ]
  44.                 ];
  45.                 $categories = [2001, 2002, 2003, 2004, 2005, 2006, 2007];
  47.                 break;
  48.             case 28:
  49.                 // 你的数据查询逻辑
  50.                 $data = [
  51.                     [
  52.                         'data' => [44, 55, 41, 64, 22, 43, 21]
  53.                     ],
  54.                     [
  55.                         'data' => [53, 32, 33, 52, 13, 44, 32]
  56.                     ]
  57.                 ];
  58.                 $categories = [2001, 2002, 2003, 2004, 2005, 2006, 2007];
  60.                 break;
  61.             case 7:
  62.             default:
  63.                 // 你的数据查询逻辑
  64.                 $data = [
  65.                     [
  66.                         'data' => [44, 55, 41, 64, 22, 43, 21]
  67.                     ],
  68.                     [
  69.                         'data' => [53, 32, 33, 52, 13, 44, 32]
  70.                     ]
  71.                 ];
  72.                 $categories = [2001, 2002, 2003, 2004, 2005, 2006, 2007];
  73.                 break;
  74.         }
  76.         $this->withData($data);
  77.         $this->withCategories($categories);
  78.     }
  80.     /**
  81.       * 这里返回需要异步传递到 handler 方法的参数 
  82.       * 
  83.      * @return array
  84.      */
  85.     public function parameters(): array
  86.     {
  87.         return [
  88.             'id'        => $this->id,
  89.             'username' => $this->username,
  90.         ];
  91.     }
  93.     /**
  94.      * 这里覆写父类的方法，不再查询数据
  95.      */
  96.     protected function buildData()
  97.     {
  98.     }
  99. }

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

  1. <?php
  3. use App\Admin\Widgets\Charts\MyAjaxBar;
  4. use Dcat\Admin\Widgets\Dropdown;
  5. use Dcat\Admin\Widgets\Box;
  6. use Dcat\Admin\Layout\Row;
  7. use Dcat\Admin\Layout\Content;
  9. class MyController
  10. {
  11.     public function index(Content $content)
  12.     {
  13.         return $content->body(function (Row $row) {
  14.             // 构建下拉菜单，当点击菜单时发起请求获取数据重新渲染图表
  15.             $menu = [
  16.                 '7'  => '最近7天',
  17.                 '28' => '最近28天',
  18.                 '30' => '最近30天',
  19.             ];
  20.             $dropdown = Dropdown::make($menu)
  21.                 ->button(current($menu))
  22.                 ->click()
  23.                 ->map(function ($v, $k) {
  24.                     // 此处设置的 data-xxx 属性会作为post数据发送到后端api
  25.                     return "<a class='switch-bar' data-option='{$k}'>{$v}</a>";
  26.                 });
  28.             // 传递自定义参数
  29.             $id = ...;
  30.             $username = ...;
  32.             $bar = MyAjaxBar::make($id, $username)
  33.                 ->fetching('$("#my-box").loading()') // 设置loading效果
  34.                 ->fetched('$("#my-box").loading(false)') // 移除loading效果
  35.                 ->click('.switch-bar'); // 设置图表点击菜单则重新发起请求，且被点击的目标元素上的 data-xxx 属性会被作为post数据发送到后端API
  37.             $box = Box::make('我的图表2', $bar)
  38.                 ->id('my-box') // 设置盒子的ID
  39.                 ->tool($dropdown); // 设置下拉菜单按钮
  41.             $row->column(12, $box);
  42.         });
  43.     }
  44. }

效果

图表 - 图2

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

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

  1. use use Dcat\Admin\Support\JavaScript;
  2. use Dcat\Admin\Admin;
  3. use Dcat\Admin\Widgets\ApexCharts\Chart;
  5. class MyBar extends Chart
  6. {
  7.     public function __construct($containerSelector = null, $options = [])
  8.     {
  9.         parent::__construct($containerSelector, $options);
  11.         $this->setUpOptions();
  12.     }
  14.     /**
  15.      * 初始化图表配置
  16.      */
  17.     protected function setUpOptions()
  18.     {
  19.         $number = 20;
  21.         $this->option(
  22.             'plotOptions.radialBar.dataLabels.total.formatter',
  23.             // 这个值最后段代码会作为JS代码执行
  24.             JavaScript::make("function () { return {$number}; }")
  25.         );
  27.         ...
  28.     }
  30.     ...   
  31. }