实现的功能
- 避免了 laravel-admin 使用 pjax 出现的
uncaught syntaxerror: invalid or unexpected token
的情况 - echarts 折线图中自定义浮窗中显示的数值(添加百分号)
- 定义双纵轴显示,左侧为数值,右侧为百分比
能满足大多数生产环境的需求。
效果展示
https://www.bilibili.com/vide...
环境
laravel-admin 1.8
laravel/framework 6.20
echarts v5
控制台打印 echarts 版本
console.log(echarts.version);
功能实现
后台全局引入 echarts
编辑:/app/Admin/bootstrap.php
## 添加代码
\Encore\Admin\Admin::js('https://lib.baomitu.com/echarts/5.0.0/echarts.common.min.js');
添加路由
修改:/app/Admin/routes.php
config('admin.route.prefix'),
'namespace' => config('admin.route.namespace'),
'middleware' => config('admin.route.middleware'),
'as' => config('admin.route.prefix') . '.',
], function (Router $router) {
// .....
// 添加路由示例
$router->any('/example/echarts', 'Example\[email protected]');
});
添加控制器方法
添加控制器类:/app/Admin/Controllers/Example/EchartsExampleController.php
title('首页')
->description('数据统计');
################ 获取参数值-start ###############
$start_time = $request->input('start_time', Carbon::today()->subDays(3)->toDateString());
$end_time = $request->input('end_time', Carbon::yesterday()->toDateString());
$date_range_choose = $request->input('date_range_choose', 'last_3days');
################ 获取参数值-end ###############
############# 表单form-start ##############
$form = new Form([
'date_range_choose' => $date_range_choose,
]);
$dateRange = new DateRange('start_time', ['end_time', '时间筛选']);
$dateRange->value([
'start' => Carbon::parse($start_time)->toDateString(),
'end' => Carbon::parse($end_time)->toDateString(),
])
->help('默认展示最近7天数据!截止到今天之前')
->options([ // 设置最小、最大可选时间
'minDate' => Carbon::now()->subYear()->toDateString(),
'maxDate' => Carbon::yesterday()->toDateString(),
'useCurrent' => false,
])
->setWidth(8, 3);
$radioButton = new RadioButton('date_range_choose', [' ']);
$radioButton->options([
'last_3days' => '近3天',
'last_7days' => '过去7天',
])->default($date_range_choose)
->setWidth('70', 0)
->setScript($dateChooseJS);
$row2 = new Row();
$row2->column(5, $dateRange->render());
$row2->column(3, $radioButton->render());
$form->html($row2->render())->setWidth(0, 12);
$form->method('GET');
$form->disableReset();
############# 表单form-end ##############
############## 此处获取数据-start ################
$categorys = [];
Carbon::parse($start_time)->daysUntil(Carbon::parse($end_time))
->forEach(function ($item) use (&$categorys) {
$categorys[] = $item->toDateString();
});
// 日期数量
$categoryCount = count($categorys);
$categoryStr = '';
foreach ($categorys as $date) {
$categoryStr .= "\"$date\",";
}
$a = [1, 23, 14, 4, 5, 6, 12, 43];
// 生成假数据
$values = Arr::only($a, array_rand($a, $categoryCount));
$percentValues = Arr::only($a, array_rand($a, $categoryCount));
$values = implode(',', $values);
$percentValues = implode(',', $percentValues);
############## 此处获取数据-end ################
#################### echart 折线图-start ###################
$chart_html = <<
HTML;
$chartScript = <<