laravel-admin+echarts 使用示例

实现的功能

• 避免了 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\EchartsExampleController@index');
});

添加控制器方法

添加控制器类：/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 = <<