laravel与layui和百度echarts饼图动态数据

陆飞鸿
2023-12-01

0, iframe跳转父页面

 <script>
      var msg = "{{ session('status') }}";
      layui.use(['form', 'layer'], function () {
          var layer = layui.layer;
          if (msg != '') {
              layer.alert(msg);
              // iframe跳转父页面
              parent.location.href = "/admin/logout";
          }
      });
  </script>

1, laravel的框架layout.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>crm后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
</head>
@yield('css')
<style>
    .label-width {
        width: 150px;
    }

    #layui-table-page1 {
        text-align: center;
    }
</style>
<body>

<div class="layui-fluid">
    @yield('content')
</div>
<script src="/js/jquery.min.js"></script>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script src="/js/echarts.js"></script>

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'layer'], function () {

        var layer = layui.layer;

        //表单提示信息
        @if(count($errors)>0)
            @foreach($errors->all() as $error)
            layer.alert("{{$error}}", {icon: 5});
            @break
            @endforeach
        @endif

        //正确提示
        @if(session('success'))
         layer.alert("{{session('success')}}", {icon: 6});
        @endif

    });
</script>
@yield('script')
</body>
</html>

2, layui + 百度echarts index.blade.php

@extends('admin.base')
@section('css')
@endsection

@section('content')
    <div class="container">
        <div class="elastic-div" style=" height: 500px;width: 100%;" id="elastic-div"></div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        layui.use(['layer', 'form'], function () {
            function detail_analysis_pie() {
                var myChart = echarts.init($("#elastic-div")[0]);
                var option_title_left = '某站点用户访问来源';
                option = {
                    title: {
                        text: option_title_left,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '123']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1548, name: '搜索引擎'},
                                {value: 154, name: '123'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                // 自适应窗口大小
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }
            detail_analysis_pie();
        });
    </script>
@endsection

3,ajax动态数据 参考一

 <script>
        layui.use(['index', 'console']);
        //loading
        var myChart = echarts.init($("#register-div")[0]);
        myChart.showLoading();

        $.ajax({
            url: "{{route('admin.index')}}",
            type: 'POST',
            success: function (data) {
                // console.log(data);return false;
                setChart($("#register-div"), data);
            }
        });

        function setChart(ele, data) {
            var myChart = echarts.init(ele[0]);
            var _data = data.data;
            var arr = [];
            for (var i in _data.data) {
                _data.data[i].type = "line";
                arr.push(_data.data[i]);
            }
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['1', '2', '3', '4', '5']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        dataView: {
                            show: true,
                            readOnly: false,
                            optionToContent: function (opt) {
                                var axisData = opt.xAxis[0].data;
                                var series = opt.series;
                                var table = '<table style="width:100%;text-align:center;" border="1px"><tbody><tr>'
                                    + '<td>时间</td>'
                                    + '<td>' + series[0].name + '</td>'
                                    + '<td>' + series[1].name + '</td>'
                                    + '<td>' + series[2].name + '</td>'
                                    + '<td>' + series[3].name + '</td>'
                                    + '<td>' + series[4].name + '</td>'
                                    + '</tr>';
                                for (var i = 0, l = axisData.length; i < l; i++) {
                                    table += '<tr>'
                                        + '<td>' + axisData[i] + '</td>'
                                        + '<td>' + series[0].data[i] + '</td>'
                                        + '<td>' + series[1].data[i] + '</td>'
                                        + '<td>' + series[2].data[i] + '</td>'
                                        + '<td>' + series[3].data[i] + '</td>'
                                        + '<td>' + series[4].data[i] + '</td>'
                                        + '</tr>';
                                }
                                table += '</tbody></table>';
                                return table;
                            }
                        }
                    },

                    restore: {show: true},
                    saveAsImage: {show: true}
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: _data.x
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: arr
            };


            myChart.hideLoading();
            myChart.setOption(option);
        }
    </script>

4,ajax动态数据 参考二

<script type="text/javascript">
    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        var form = layui.form;

//-- 订单统计 ------------------------------------------------------------------
        function order_statistics(data) {
            var _data = data.data;
            var myChart1 = echarts.init(document.getElementById('js_order_statistics'));

            // 折线图数据来源
            var arr = [];
            for (var i in _data.data) {
                arr.push(_data.data[i].data);
            }
            // 指定图表的配置项和数据
            var option1 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['当日交易金额']
                },
                color: ['#99DD00'],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        nameLocation: 'end',//坐标轴名称显示位置。
                        axisLabel: {//坐标轴刻度标签的相关设置。
                            interval: 0,
                            rotate: "30"
                        },
                        // x轴显示
                        data: _data.x,
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '当日交易金额',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: arr
                    },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);
            // 自适应窗口大小
            window.addEventListener("resize", function () {
                myChart1.resize();
            });
        }

        function order_echarts(day, tag) {
            $.ajax({
                dataType: 'json',
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {day: day, tag: tag},
                url: '{{route('admin.echart')}}',
                success: function (result) {
                    if (result.code == 0) {
                        order_statistics(result);
                    } else {
                        layer.alert(result.msg, {icon: 5})
                    }
                },
                error: function (result) {
                    layer.alert('参数错误', {icon: 5})
                }
            });
        }

        // 一开始加载
        order_echarts(7, 'order_statistics');
        // 订单统计--筛选
        $("#js_order_time").change(function () {
            var day = $("#js_order_time option:selected").val();
            order_echarts(day, 'order_statistics');
        });

//-- 用户量折线图统计 ----------------------------------------------------------
        function user_statistics(data) {
            var _data = data.data;
            var myChart2 = echarts.init(document.getElementById('js_user_statistics'));

            // 折线图数据来源
            var arr = [];
            for (var i in _data.data) {
                arr.push(_data.data[i].data);
            }

            // 指定图表的配置项和数据
            var option2 = {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['新增用户']
                },
                color: ['#0066FF'],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    nameLocation: 'end',//坐标轴名称显示位置。
                    axisLabel: {//坐标轴刻度标签的相关设置。
                        interval: 0,
                        rotate: "30"
                    },
                    data: _data.x,
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '新增用户',
                        type: 'line',
                        stack: '总量',
                        data: arr
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);
            // 自适应窗口大小
            window.addEventListener("resize", function () {
                myChart2.resize();
            });
        }

        function user_echarts(day, tag) {
            $.ajax({
                dataType: 'json',
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {day: day, tag: tag},
                url: '{{route('admin.echart')}}',
                success: function (result) {
                    if (result.code == 0) {
                        user_statistics(result);
                    } else {
                        layer.alert(result.msg, {icon: 5})
                    }
                },
                error: function (result) {
                    layer.alert('参数错误', {icon: 5})
                }
            });
        }

        // 一开始加载
        user_echarts(7, 'user_statistics');
        // 订单统计--筛选
        $("#js_user_time").change(function () {
            var day = $("#js_user_time option:selected").val();
            user_echarts(day, 'user_statistics');
        });

// --作品存证 --------------------------------------------------------
        function works_statistics(data) {
            var _data = data.data;
            var myChart3 = echarts.init(document.getElementById('js_works_statistics'));
            // 折线图数据来源
            var arr = [];
            for (var i in _data.data) {
                _data.data[i].type="line";
                arr.push(_data.data[i]);
            }

            // 指定图表的配置项和数据
            var option3 = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['订单总数', '消费积分', '充值金额']
                },
                color: ['#99DD00', '#FF8800', '#227700', '#DDD'],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    nameLocation: 'end',//坐标轴名称显示位置。
                    axisLabel: {//坐标轴刻度标签的相关设置。
                        interval: 0,
                        rotate: "30"
                    },
                    data: _data.x,
                },
                yAxis: {
                    type: 'value'
                },
                series:arr
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart3.setOption(option3);
            // 自适应窗口大小
            window.addEventListener("resize", function () {
                myChart3.resize();
            });
        }

        function works_echarts(day, tag) {
            $.ajax({
                dataType: 'json',
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {day: day, tag: tag},
                url: '{{route('admin.echart')}}',
                success: function (result) {
                    if (result.code == 0) {
                        works_statistics(result);
                    } else {
                        layer.alert(result.msg, {icon: 5})
                    }
                },
                error: function (result) {
                    layer.alert('参数错误', {icon: 5})
                }
            });
        }

        works_echarts('yesterday','works_statistics');
        // 订单统计--筛选
        $("#js_works_time").change(function () {
            var day = $("#js_works_time option:selected").val();
            works_echarts(day, 'works_statistics');
        });
   });
</script>
 类似资料: