[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 多版本控制