porygon/dcat-extension-echarts

Dcat Echarts扩展

0.1.3 2022-08-15 03:49 UTC

Requires

• php: >=7.1.0
• dcat/laravel-admin: ~2.0

MIT

• cyw

• extension
• dcat-admin

README

安装

• 下载安装 直接将仓库下载或者克隆到项目的 dcat 扩展文件夹中 然后去扩展页面中启用
• composer 安装 composer require porygon/dcat-extension-echarts 然后去扩展页面中启用
• Dcat 扩展市场安装(暂未开放)

用法

有两种用法,一是原生调用,二是封装卡片

// 原生调用
// Chart::make() 后链式调用option设置
// 也可以使用 ->setChartOption("grid",[...]);
// 具体方法可以直接查看源码
// 原生创建的是一个单纯的图表
use Porygon\Echarts\Chart;

Chart::make()->grid([
    "containLabel" => false,
    "left"         => "0%",
    "right"        => "0%",
    "top"          => "0%",
    "bottom"       => "0%",
])->xAxis([
    "type" => 'category',
    "boundaryGap" => false,
    "data" => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    "show" => false,
])->yAxis([
    "type" => "value", "show" => false
])->tooltip([
    "trigger" => 'axis',
])->serie([
    "data"       => [1, 5, 74, 15, 63, 75, 91],
    "type"       => "line",
    "smooth"     => true,
    "areaStyle"  => [],
    "showSymbol" => false
]);

// 封装调用
// 这个是与封装的demo
use Porygon\Echarts\Examples\NewUser;

// 封装创建的是一个卡片
NewUser::make();
// 也可以继续设置图表属性
NewUser::make()->->xAxis([
    "type" => 'category',
    "boundaryGap" => false,
    "data" => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    "show" => false,
])->yAxis([
    "type" => "value", "show" => false
])->tooltip([
    "trigger" => 'axis',
]);

• 原生调用效果

• 卡片效果