看了Dcat Admin 官方手册对于 Apexcharts.js 图表的简单制作示例，看了以后没太明白怎么用。

以前做图表插件都是让前端小妹去找的echart 图表插件制作的。对于Apexcharts.js 图表插件，我还从来没有学习过。

Apexcharts.js官网里是全英文的文档，用百度软件翻译，花了些时间进行了学习。

我在简书里做了一个学习笔记：

（1）关于安装和线性图案例

www.jianshu.com/p/82f5c1e2c336

初步搞明白了，Apexcharts.js的使用方法。

根据Apexcharts 官方的JS代码示例，JS程序分为三部分：

（1）定义options对象，

(2)new ApexCharts()实例化操作。

(3) 调取render()方法进行图表渲染。

如下代码所示：最重要的工作就是将options对象配置清楚。JS里面用的是{}对象表示法，到了PHP中就要转换成[]数组来表示。

var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30,40,35,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

关于 options对象的定义，有多达25种类属性。它的官网：apexcharts.com/docs/options/annota... 里介绍了相关的类属性。

我用思维导图，把一些常用的类属性进行了记录。

www.jianshu.com/p/768e03273492

另一个就是其官网上提供了12种图表的demo代码示例：

apexcharts.com/javascript-chart-de...

我们想做哪种图表，在上面找代码，然后将其转化成php就可以了。

仿照官网给的例子，我做了一个饼图：

Dcat Admin 图表制作使用说明

这个大饼图原先的JS代码：apexcharts.com/javascript-chart-de...

我在Dcat官网给出的代码上，做了一些精简，下面是代码，一些没有必要的地方，我已经删除掉了，这样最简化容易理解。

Dcat Admin 制作图表

先看一下饼图里的JS代码，后面要将它转化成php代码。

var options = {
          series: [44, 55, 13, 43, 22],
          chart: {
             width: 380,
             type: 'pie',
        },
        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],

第1步引入文件

namespace App\Admin\Widgets\Chart;
use Dcat\Admin\Admin;
use Dcat\Admin\Widgets\ApexCharts\Chart;

这里面Widgets\ApexCharts\Chart 这个类，就是Dcat定义的图表类，它的父类是Widget（是一个抽象类）

Dcat Admin 图表制作使用说明

2.构建类

我定义了一个叫Pie的类，它内部有2个类成员方法

方法说明 __construct 构造函数 setUpOptions 初始化option方法

其实也可以在构造函数中，直接进行options初始化，但为了代码的美观，还是将其放入到setOptions方法里，这个方法的名字，大家可以自定义，随便起名。

class Pie extends Chart{

//构造函数这块，可以直接拿过来使用 
    public function __construct($containerSelector = null, $options = [])
    {
        parent::__construct($containerSelector, $options);

        $this->setUpOptions();
    }

  //初始化方法，主要是调用$this->options()方法，执行整个option的初始化操作。 
  protected function setUpOptions()
    {
        $this->options([
            "chart"=>[
                "width"=>380,
                "type"=>"pie"
            ],
        ]);

        // 执行你的数据查询逻辑 
        $data = [44, 55, 13, 43, 22];
        $label = ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'];
        //option()方法也定义在Dcat\Admin\Widgets 类中，它负责为options属性，进行设置工作 
        $this->option("series",$data);
        $this->option("labels",$label);

    }

这里的options()是 Dcat\Admin\Widgets 类中定义的方法。

在Widget类里有一个成员属性options,它负责存储图表里的配置项。

通过options()方法可以进行批量设置。

protected $options = [];

到此操作完毕，Widget类中定义了render()方法，它会自动调用进行渲染。我们自己定义的图表类里，只需要上面两个方法就可以了。便于理解，后需跟据需要，大家可以自己丰富自定义的图表类。

3.在控制器中使用

控制器中，需要先引入Card 类，和自定义的图表类

use Dcat\Admin\Widgets\Card;
use App\Admin\Widgets\Chart\Pie;

然后是在控制器方法里，调用Card::make()方法

public function pic(Content $content){
        return $content->body(
            Card::make('舔狗没有好下场',Pie::make())
        );
}

make()方法有两个参数：

参数1：接收字符串，将做为图表的标题显示

参数2：是我们自定义的图表类对象。

以上操作完成后，图表就可以渲染出来了。

这篇文档只做为一个学习使用记录，底层代码流程，我就不贴了。

Dcat Admin 图表制作使用说明

Dcat Admin 制作图表

第1步 引入文件

2.构建类

3.在控制器中使用

第1步引入文件