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

最新推荐文章于 2021-08-17 12:25:22 发布
最新推荐文章于 2021-08-17 12:25:22 发布
阅读量482 收藏 1
点赞数
分类专栏： laravel ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaokcl/article/details/110111251
版权

文章目录

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>
gcl_guyunlige
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui做折线图_layui+echarts+动态数据
weixin_36301830的博客
01-12 3761
折线图柱形图饼图layui.use(['table','element'], function(){var table = layui.table;var element = layui.element;var $ = layui.jquery;// 统计图 开始// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getEle...
layui集成echarts动态获取数据生成饼状图
xfy18317776108的博客
12-21 5541
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>履职统计</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compati...
laravel-layui-admin:基于Laravel，Layui构建的RBAC后台管理系统
03-11
Laravel-layui-admin 基于Laravel，Layui构建的RBAC基础后台管理系统。 如果你想要vue版本的后台系统，移步 截图 要求 最低支持laravel5.8，支持6.0 安装 首先安装laravel，并确保您配置了正确的数据库连接。 composer require moell/laravel-layui-admin 然后运行下面的命令来发布资源和配置： php artisan laravel-layui-admin:install 在config/auth.php中添加相应的警卫和提供者，如下： 'guards' => [ ... 'admin' => [ 'driver' => 'session', 'provider' => 'admin' ]
laravel-admin添加图表Chartjs
陌潇
01-26 1811
安装 composer require laravel-admin-ext/chartjs php artisan vendor:publish --tag=laravel-admin-chartjs 说明 打开config/admin.php，在extensions部分添加属于此扩展的配置。 'extensions' => [ 'chartjs' => [ // Set to `false` if you ...
layui实现班级学生管理页面-(1)班级管理以及使用echarts图形统计
qq_38759137的博客
07-19 1969
1.下载并引用插件 2.html代码 2.1main.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getS...
layui选项卡与echarts结合导致的问题解决
星望
01-31 5343
问题描述 如下图，包含有A和B两个 选项卡，其中A选项卡是一个表格，B选项卡是一个echarts图，选项卡A如下图： 选项卡B如下图： 当点击选项卡B时，改变浏览器窗口大小，再点回选项卡A，会发现A中的数据表格下面的分页栏不见了，如下图： 当再次改变窗口大小时分页栏又再次出现 解决办法 出现问题原因大概是因为当窗口大小改变后选项卡中的数据表格获取不到正确的宽高。解决办法有点取巧： //加上下面...
最新Springboot整合Layui+Echart报表饼状图
热门推荐
weixin_43440301的博客
11-15 1万+
最新Springboot整合Layui+Echart报表饼状图 先看下饼状图的效果图 后台传输过来的数据展示 实现代码（前端） &amp;lt;div class=&quot;weadmin-body&quot;&amp;gt; &amp;lt;!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --&amp;gt; &amp;lt;div id=&a
django echarts饼图数据动态加载的实例
09-18
今天小编就为大家分享一篇django echarts饼图数据动态加载的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
flask+layui+echarts实现前端动态图展示数据效果
10-16
在构建Web应用时，将数据以动态图形展示出来可以极大地提升用户体验和数据分析的直观性。在本案例中，我们探讨了如何使用`Flask`、`LayUI`和`ECharts`这三款强大的技术栈来实现在前端展示动态数据图表。下面将详细...
echarts饼图各个板块之间的空隙如何实现
01-22
本文主要介绍echarts饼图各个板块之间间的空隙怎么实现 关键代码 itemStyle: { normal: { borderWidth: 1, // 间距的宽度 borderColor: '#fff', //背景色 } }, 代码层级 效果图 到此这篇关于echarts饼图各个...
layui中引入echarts示例.rar
09-26
而ECharts是百度开发的一款基于JavaScript的数据可视化库，它支持丰富的图表类型，如折线图、柱状图、饼图等，能够帮助开发者轻松地创建出美观且交互性强的数据展示。 首先，我们需要理解layui的基本结构。layui的...
Echarts饼图之数据展示
01-08
Echarts饼图之数据展示 1、组件简介 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形...
使用echarts+ajax从数据库动态获取数据展示到前台页面
shi_AXing_a的博客
05-05 4529
echarts+ajax动态获取数据库数据1、点击操作按钮实现次数+1前端代码实现后台代码实现2、echarts从数据库动态获取数据后台代码实现前端代码实现 这是我以前用最基础的方法做出来的，前端框架我是使用的Layui。 这是实现效果图展示： 通过员工考勤管理，对每个员工进行考勤记录，比如迟到一次，通过点击迟到按钮实现该员工迟到次数+1，且考核数据图表信息也会随着数据库数据改变而更新。 1、点击操作按钮实现次数+1 通过每日考核页面可以得知，通过点击右侧对应的操作按钮，实现各自的记录次数+1， 这是怎
layui echarts PHP,1.layui echarts
weixin_36131590的博客
04-13 135
文件名大小更新时间1.layui echarts02018-12-191.layui echarts\1. 饼图与表格交互02018-12-271.layui echarts\1. 饼图与表格交互\css02018-12-181.layui echarts\1. 饼图与表格交互\css\demo.css1072018-12-181.layui echarts\1. 饼图与表格交互\js02018-...
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
weixin_39821189的博客
12-20 1021
效果图：该效果主要实现一个table展示数据，并在下方生成一个折线图。实现方式：1、首先需要对表格进行一个数据加载，这里用到了layui的table.render，具体用法可以参考html部分：js部分：layui.use(['form', 'table', 'echarts'], function () {var $ = layui.jquery,form = layui.form,table ...
layui+echarts代码示例
weixin_39388918的博客
08-18 6621
效果图 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>系统报表</title> </head> <link href="/pages/plugins/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet"> <link href
layui整合Echart
尽力漂亮的博客
11-17 2088
效果 完整代码 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <title>实时数据查看</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
layui + echarts股票K线图（含案例、代码、截图）（转载篇）
草巾冒小子的博客
08-17 803
文章目录layui + echarts股票K线图（含案例、代码、截图）（转载篇）一、案例、代码、截图经验 · 补充说明： layui + echarts股票K线图（含案例、代码、截图）（转载篇） 转载地址：layuiAdmin + echarts股票K线图（案例篇） 他使用layui框架，去layui官方购买admin授权版很方便 一、案例、代码、截图 转载地址：layuiAdmin + echarts股票K线图（案例篇） 经验 · 补充说明： 我直接对echart提供的示例编辑代码
Echarts实战案例代码(32)：layui模态框弹出框展现echarts不显示的问题
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
08-20 1154
封装layui弹出层函数 function getDiv(title, url, w, h) { if (title == null || title == '') { title = false; } if (url == null || url == '') { url = "404.html"; } if (w == null || w == '') { w = ($(window).width() * 0..
vue3 echarts 饼图 动态数据更新
最新发布
03-26
Vue3是一种流行的JavaScript框架，用于构建用户界面。它是Vue.js的最新版本，具有更好的性能和更多的功能。Echarts是一款强大的数据可视化库，可以用于创建各种图表，包括饼图。下面是关于Vue3和Echarts饼图动态数据更新的介绍： 1. Vue3：Vue3相对于Vue2来说有一些重要的改进。它引入了Composition API，这是一种新的API风格，使得组件逻辑更加清晰和可复用。Vue3还提供了更好的性能和更小的包大小。如果你之前使用过Vue2，你可能需要学习一些新的概念和语法。 2. Echarts饼图：Echarts是一个功能强大的数据可视化库，可以用于创建各种类型的图表，包括饼图。饼图是一种圆形的图表，用于展示数据的占比关系。在Echarts中，你可以通过配置数据和样式来创建饼图，并将其渲染到页面上。 3. 动态数据更新：在Vue3中，你可以使用响应式数据来实现动态数据更新。当你的数据发生变化时，Vue会自动更新相关的DOM元素。对于Echarts饼图，你可以将数据绑定到饼图组件的props或者data属性上。当数据发生变化时，饼图会自动更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值