[laravel与*layui*和百度*echarts饼图*动态数据](https://blog.csdn.net/gaokcl/article/details/110111251)
#### 0, iframe跳转父页面
~~~js
<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
~~~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
~~~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动态数据 参考一
~~~php
<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动态数据 参考二
~~~php
<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>
~~~
- 空白目录
- thinkcmf的权限管理
- thinkcmf+unicmf添加页面
- Thinkphp5做后台 Uni-app做前台解决跨域问题
- 组件
- h5跨域-uniapp
- thinkphp5 auth 教程
- thinkphp5Auth类
- uniapp添加与编辑的差别
- 常见的请求方式
- uni 单选回显数据_uniapp 页面跳转传值和接收
- uni-app 单选/多选/滑动 demo
- 关于uniapp checkbox多选框如何传值传数据
- uniApp 多选框checkbox ，判断是否选中
- uniapp添加复选框和获取复选框的值
- uni-app中全选多选单选
- uniapp多选框CheckBox 数据接收
- uniapp下拉列表单选框复选框实战demo(编辑或详情页)
- uni-data-CheckBox-OK
- js 字符串数组转换成数字数组
- js把字符串转为数组对象
- js中数组对象字符串的相互转换
- JS怎么把字符串数组转换成整型数组
- 小程序开发
- tp5.1跨域请求
- uniapp-h5跨域
- 新增
- order
- uni-app中调取接口的三种方式与封装uni.request()
- uView-checkbox
- 给u-view的u-select赋值
- uView-下拉框、复选框、单选框 数据发送及接收
- CURD操作
- thinkphp5.1增删改查
- TP5.1添加数据成功之后返回自增主键id
- Thinkphp实战之Request默认值except only 以及过滤参
- uni-app跨域解决方案
- thinkphp5.1+uni-app接口开发中跨域问题解决方案
- tp6 + uniapp 前后端跨域解决方案
- uniapp-token相关
- uniapp request请求封装包含token兼容多端，简单易用
- CORS.php
- ThinkPHP6 API开发前后端分离用户信息保存在后端的方法
- thinkphp的jwt（JSON Web Token）身份验证
- thinkphp6增删改查
- PHP模拟GET,POST请求
- php模拟get、post发送请求的6种方法
- thinkphp6
- uniapp封装网络请求
- thinkphp6搭建后端api接口jwt-auth
- uniapp实现APP微信登录流程
- [uni-app] 中保持用户登录状态
- 详解vue中localStorage的使用方法
- vue 实现通过vuex 存储值 在不同界面使用
- dispatch：异步操作，数据提交至 actions ，可用于向后台提交数据
- ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作
- tp6错误集
- TP6 模型插入/添加数据，自动插入时间(自动时间戳)
- 手机不开机维修思路
- thinkphp6解决vue跨域问题
- 从0基础获取短视频去水印解析接口制作
- thinkphp5 删除缓存
- thinkPHP，怎么把json文件里面的数据导入数据库
- 数字转字符php
- php – 直接用curl下载远程文件
- thinkphp – 直接用curl下载远程文件
- apiAdmin安装
- echart
- thinkphp开发小程序推广分享带参数二维码生成
- php同比增加函数
- PHP获取同比上周、上一个月，上一个季度，去年时间区间
- “前3秒”金句100例，赶紧收藏起来！
- PHP配合微信公众号生成推广二维码
- thinkphp5+php微信公众号二维码扫码关注推广二维码事件实现
- 获取当前时间上一周的开始时间和结束时间
- TP6 查找指定工作日
- PHP 获取当天、近一周、本周、上月、本月、本季度、上季度时间方法大全
- php获取今日、昨日、本周、本月 日期方法
- Tp5+mysql按年季度月周日小时查询时无数据的时间段补0方法
- mysql按天统计的时候,该天没有数据也要统计为0
- 列出一星期的日期 无数据补0
- thinkphp6本周 上周 周一 周末日期
- 补全日期 无数据补0
- php+pv统计代码实现,Laravel 10 行代码实现简单的网站 pv uv 统计
- 通过API获取ip地址以及城市和运营商
- 获取访客信息
- 13行代码实现微信小程序设置概率触发激励视频阅读文章
- uniapp 微信小程序 获取场景值和场景值个性化参数
- 微信小程序分享小程序码的生成（带参数）以及参数的获取
- 小程序推广分享带参数二维码生成
- uniapp微信小程序生成对应页面二维码
- uniapp获取当前页面url
- uniapp微信小程序--微信登录
- 微信小程序，生成小程序码中scene参数的存放和获取问题
- uni-app 微信小程序生成二维码带参数
- uni-app 微信小程序如何把图片保存到本地相册？
- thinkPHP5使用assign（）传递富文本，前端解析成HTML标签
- tp6解析编辑器里面的html标签原样输出
- PHP判断url链接是否被百度收录
- 微擎安装模块时提示 Failed to connect to we7.rewlkj.com port 80: Timed out
- 小程序码生成
- thinkphp开发小程序推广分享带参数二维码生成0
- tp3.2伪静态
- apiadmin安装教程-2022.8更新
- autojs事件代码
- uuuu
- thinkphp6: API 多版本控制