图表
<h1>图表</h1>
<p><code>Dcat Admin</code>引入了<a href="https://apexcharts.com/">apexcharts图表</a>功能，通过<code>Dcat\Admin\Widgets\ApexCharts\Chart</code>这个类可以帮助开发者快速渲染图表。</p>
<h3>简单用法</h3>
<p>如果你需要构建一个图表，可以参考下面的方式</p>
<p>> {tip} 更多类型的图表，请参考<a href="https://apexcharts.com/">apexcharts官方文档</a>。</p>
<pre><code class="language-php">&lt;?php
namespace App\Admin\Widgets\Charts;
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-&gt;setUpOptions();
}
/**
* 初始化图表配置
*/
protected function setUpOptions()
{
$color = Admin::color();
$colors = [$color-&gt;primary(), $color-&gt;primaryDarker()];
$this-&gt;options([
'colors' =&gt; $colors,
'chart' =&gt; [
'type' =&gt; 'bar',
'height' =&gt; 430
],
'plotOptions' =&gt; [
'bar' =&gt; [
'horizontal' =&gt; true,
'dataLabels' =&gt; [
'position' =&gt; 'top',
],
]
],
'dataLabels' =&gt; [
'enabled' =&gt; true,
'offsetX' =&gt; -6,
'style' =&gt; [
'fontSize' =&gt; '12px',
'colors' =&gt; ['#fff']
]
],
'stroke' =&gt; [
'show' =&gt; true,
'width' =&gt; 1,
'colors' =&gt; ['#fff']
],
'xaxis' =&gt; [
'categories' =&gt; [],
],
]);
}
/**
* 处理图表数据
*/
protected function buildData()
{
// 执行你的数据查询逻辑
$data = [
[
'data' =&gt; [44, 55, 41, 64, 22, 43, 21]
],
[
'data' =&gt; [53, 32, 33, 52, 13, 44, 32]
]
];
$categories = [2001, 2002, 2003, 2004, 2005, 2006, 2007];
$this-&gt;withData($data);
$this-&gt;withCategories($categories);
}
/**
* 设置图表数据
*
* @param array $data
*
* @return $this
*/
public function withData(array $data)
{
return $this-&gt;option('series', $data);
}
/**
* 设置图表类别.
*
* @param array $data
*
* @return $this
*/
public function withCategories(array $data)
{
return $this-&gt;option('xaxis.categories', $data);
}
/**
* 渲染图表
*
* @return string
*/
public function render()
{
$this-&gt;buildData();
return parent::render();
}
}</code></pre>
<p>使用</p>
<pre><code class="language-php">&lt;?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-&gt;body(
Card::make('我的图表', MyBar::make())
);
}
}</code></pre>
<p>效果</p>
<p><a href="{{public}}/assets/img/screenshots/widget-bar.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/widget-bar.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="100%" >
</a></p>
<h3>图表与后端API交互</h3>
<p>如果你的图表需要与后端API交互，可以参考以下方式</p>
<p>> {tip} 为了方便阅读，这里的示例代码直接继承前面定义的<code>MyBar</code>类。</p>
<pre><code class="language-php">&lt;?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-&gt;id = $id;
$this-&gt;username = $username;
}
/**
* 处理请求
* 如果你的图表类中包含此方法，则可以通过此方法处理前端通过ajax提交的获取图表数据的请求
*
* @param Request $request
* @return mixed|void
*/
public function handle(Request $request)
{
// 获取 parameters 方法设置的自定义参数
$id = $request-&gt;get('id');
$username = $request-&gt;get('username');
switch ((int) $request-&gt;get('option')) {
case 30:
// 你的数据查询逻辑
$data = [
[
'data' =&gt; [44, 55, 41, 64, 22, 43, 21]
],
[
'data' =&gt; [53, 32, 33, 52, 13, 44, 32]
]
];
$categories = [2001, 2002, 2003, 2004, 2005, 2006, 2007];
break;
case 28:
// 你的数据查询逻辑
$data = [
[
'data' =&gt; [44, 55, 41, 64, 22, 43, 21]
],
[
'data' =&gt; [53, 32, 33, 52, 13, 44, 32]
]
];
$categories = [2001, 2002, 2003, 2004, 2005, 2006, 2007];
break;
case 7:
default:
// 你的数据查询逻辑
$data = [
[
'data' =&gt; [44, 55, 41, 64, 22, 43, 21]
],
[
'data' =&gt; [53, 32, 33, 52, 13, 44, 32]
]
];
$categories = [2001, 2002, 2003, 2004, 2005, 2006, 2007];
break;
}
$this-&gt;withData($data);
$this-&gt;withCategories($categories);
}
/**
* 这里返回需要异步传递到 handler 方法的参数
*
* @return array
*/
public function parameters(): array
{
return [
'id' =&gt; $this-&gt;id,
'username' =&gt; $this-&gt;username,
];
}
/**
* 这里覆写父类的方法，不再查询数据
*/
protected function buildData()
{
}
}</code></pre>
<p>用户点击构建下拉菜单加载不同的图表数据</p>
<pre><code class="language-php">&lt;?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-&gt;body(function (Row $row) {
// 构建下拉菜单，当点击菜单时发起请求获取数据重新渲染图表
$menu = [
'7' =&gt; '最近7天',
'28' =&gt; '最近28天',
'30' =&gt; '最近30天',
];
$dropdown = Dropdown::make($menu)
-&gt;button(current($menu))
-&gt;click()
-&gt;map(function ($v, $k) {
// 此处设置的 data-xxx 属性会作为post数据发送到后端api
return &quot;&lt;a class='switch-bar' data-option='{$k}'&gt;{$v}&lt;/a&gt;&quot;;
});
// 传递自定义参数
$id = ...;
$username = ...;
$bar = MyAjaxBar::make($id, $username)
-&gt;fetching('$(&quot;#my-box&quot;).loading()') // 设置loading效果
-&gt;fetched('$(&quot;#my-box&quot;).loading(false)') // 移除loading效果
-&gt;click('.switch-bar'); // 设置图表点击菜单则重新发起请求，且被点击的目标元素上的 data-xxx 属性会被作为post数据发送到后端API
$box = Box::make('我的图表2', $bar)
-&gt;id('my-box') // 设置盒子的ID
-&gt;tool($dropdown); // 设置下拉菜单按钮
$row-&gt;column(12, $box);
});
}
}</code></pre>
<p>效果</p>
<p><a href="{{public}}/assets/img/screenshots/widget-bar2.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/widget-bar2.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="100%" >
</a></p>
<p><a href="js"></a></p>
<h3>设置图表配置为可执行JS代码</h3>
<p>如果你需要在图表配置加入可执行的JS代码，可参考以下方式</p>
<pre><code class="language-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-&gt;setUpOptions();
}
/**
* 初始化图表配置
*/
protected function setUpOptions()
{
$number = 20;
$this-&gt;option(
'plotOptions.radialBar.dataLabels.total.formatter',
// 这个值最后段代码会作为JS代码执行
JavaScript::make(&quot;function () { return {$number}; }&quot;)
);
...
}
...
} </code></pre>