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

<?php

use Illuminate\Routing\Router;

Admin::routes();

Route::group([
    'prefix'        => 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

<?php

namespace App\Admin\Controllers\Example;

use App\Http\Controllers\Controller;
use Carbon\Carbon;
use Encore\Admin\Admin;
use Encore\Admin\Form\Field\DateRange;
use Encore\Admin\Form\Field\RadioButton;
use Encore\Admin\Layout\Content;
use Encore\Admin\Layout\Row;
use Encore\Admin\Widgets\Box;
use Encore\Admin\Widgets\Form;
use Illuminate\Http\Request;
use Illuminate\Support\Arr;

class EchartsExampleController extends Controller
{

    public function index(Content $content, Request $request)
    {
        $dateChooseJS = <<<DATECHOOSEJS
$('.date_range_choose').on('click', function(){
    console.log($(this).val());
    var choosed_date_range = $(this).val();

    var today = new Date();
    var oneday = 1000 * 60 * 60 * 24;
    var format3 = 'YYYY-MM-DD';
    var start_time;
    var end_time;
    switch(choosed_date_range){
        case 'last_3days':
            start_time = moment().subtract(3, 'days').format(format3);
            end_time = moment().subtract(1, 'days').format(format3);
            break;
        case 'last_7days':
            start_time = moment().subtract(7, 'days').format(format3);
            end_time = moment().subtract(1, 'days').format(format3);
            break;
    }
    $('input[name="start_time"]').val(start_time);
    $('input[name="end_time"]').val(end_time);
});

DATECHOOSEJS;

        $content = $content
            ->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
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="height:400px;"></div>
HTML;
        $chartScript = <<<SCRIPT
        // 基于准备好的dom，初始化echarts实例
        var mainChart = echarts.init(document.getElementById('main'));
        window.onresize = mainChart.resize;
        // 指定图表的配置项和数据
        let option = {
            // 格式化浮窗的文字
            tooltip: {
                trigger: 'axis',
                formatter(a) {
                    let _list = []
                    let listItem = '';
                    let show_box = $('<div>')
                        .addClass('showBox')
                        .append(a[0].axisValue);
                    for (var i = 0; i < a.length; i++) {
                        let data_color = a[i].color;
                        let data_row = '';
                        let data_row_div = $('<div>');
                        let data_row_i = $('<i>').css({
                            'display': 'inline-block',
                            'width': '10px',
                            'height': '10px',
                            'margin-right': '5px',
                            'border-radius': '50%',
                            background: data_color
                        })
                            .appendTo(data_row_div);
                        let data_row_seriesName = $('<span>').css({
                            'display': 'inline-block'
                        })
                            .html(a[i].seriesName)
                            .appendTo(data_row_div);

                        let data_row_value = $('<span>').css({
                            'float': 'right',
                            'margin-left': '20px'
                        });

                        // 判断当前的值是否需要加百分号
                        if (a[i].seriesName == 'percentValues(%)') {
                            data_row_value.html(a[i].value + '%').appendTo(data_row_div);
                        } else {
                            data_row_value.html(a[i].value).appendTo(data_row_div);
                        }
                        data_row_div.appendTo(show_box);
                    }
                    return show_box.prop("outerHTML");
                }
            },
            legend: {
                data: ['all', 'percentValues(%)']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [$categoryStr]
            },
            yAxis: [
                {
                    type: 'value',
                    name: "数值",
                    nameTextStyle: {
                        color: "#89A54E"
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#89A54E"
                        }
                    },
                    axisLine: {
                        show: true
                    },
                    axisTick: { show: false },
                    scale:true,
                },
                {
                    type: 'value',
                    name: "百分比(%)",
                    nameTextStyle: {
                        color: "#4572A7"
                    },
                    position: "right",
                    axisLine: {
                        show: false
                    },
                    axisTick: { show: false },
                    min: 0,
                    max: '100',
                    axisLabel: {
                        textStyle: {
                            color: "#4572A7"
                        },
                        show: true,
                        interval: "auto",
                        formatter: "{value}%"
                    },
                    show: true,
                    scale:true,
                }
            ],
            series: [
                {
                    name: 'all',
                    type: 'line',
                     stack: '总量',
                    data: [{$values}]
                },
                {
                    name: 'percentValues(%)',
                    yAxisIndex:1,
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: "#b78ffc",
                            lineStyle: {
                                color: "#b78ffc"
                            },
                        }
                    },
                    data: [{$percentValues}]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        mainChart.setOption(option);
    $('input[name="start_time"]').val('{$start_time}');
SCRIPT;

        Admin::script($chartScript);


        $form->divider();
        $form->html($chart_html)->setWidth(0, 12);


        $box2 = new Box('统计表单', $form);
        $content = $content->row($box2);
        return $content;
    }
}