当前位置:网站首页>thinkphp5+数据大屏展示效果
thinkphp5+数据大屏展示效果
2022-04-23 14:48:00 【游戏编程】
1控制器代码展示:

控制器代码:
// 加载页面后输出的数据 public function index() { $data = Db::name('index')->limit(5)->select(); $this->assign('data',$data); $this->display(); return view('index'); } // 异步获取数据 public function data(){ $list = Db::name('index')->limit(5)->select(); // 重组数组 foreach ($list as $key => $value) { $arr['id'][] = $value['id']; $arr['name'][] = $value['name']; $arr['number'][] = $value['number']; $arr['details'][] = $value['details']; $arr['create_time'][] = $value['create_time']; } die(json_encode($arr)); //转换为json数据输出 }
html代码:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script></head><body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:400px;"></div></body><script src="http://code.jquery.com/jquery-2.2.1.min.js"></script><script type="text/javascript"> var myChart; myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { // 加载页面后显示在图表中的X轴信息 data: [<?php foreach($data as $v){; ?>"<?php echo $v['name'] ?>",<?php }; ?>] }, yAxis: {}, series: [{ name: '销量', // type: 'line',// 折线图 type: 'bar',//柱状图 // 加载页面后显示在图表中的Y轴信息 data: [<?php foreach($data as $v){; ?>"<?php echo $v['number'] ?>",<?php }; ?>], itemStyle:{ // 颜色定义 normal:{color:'#00bc12'} } }] }); // 异步加载后台数据,通过定时器在实现 var i = 0; function run() { i++; $.ajax({ url: "{:url('index/index/data')}", type: 'POST', dataType: 'JSON', data:{page:i}, success:function(json){ if(json.datetime.length != 5){ clearInterval(time); return; } myChart.setOption({ xAxis: { data: json.create_time }, series: [{ name: '销量', data: json.details }] }); } }) }; <!--var time = setInterval(run,3000);--></script></html>
显示效果展示:

数据库展示:

折线图效果:

作者:骨子里的偏爱
游戏编程 ️,一个游戏开发收藏夹~
如果图片长时间未显示,请使用Chrome内核浏览器。
版权声明
本文为[游戏编程]所创,转载请带上原文链接,感谢
https://www.233tw.com/php/118838
边栏推荐
- Introduction to Arduino for esp8266 serial port function
- 剑指 Offer II 019. 最多删除一个字符得到回文(简单)
- 1 - first knowledge of go language
- Master in minutes --- ternary operator (ternary operator)
- MDS55-16-ASEMI整流模块MDS55-16
- UML项目实例——抖音的UML图描述
- Parameter stack pressing problem of C language in structure parameter transmission
- Epoll's et, lt working mode -- example program
- Brute force of DVWA low -- > High
- 8.3 语言模型与数据集
猜你喜欢
编程哲学——自动加载、依赖注入与控制反转
AT89C51 MCU digital voltmeter development, measuring range 0 ~ 5V, proteus simulation, schematic diagram, PCB and C program, etc
阿里研发三面,面试官一套组合拳让我当场懵逼
详解TCP的三次握手
Want to be an architect? Tamping the foundation is the most important
利用 MATLAB 编程实现最速下降法求解无约束最优化问题
DVWA之暴力破解(Brute Force)Low-->high
ASEMI整流模块MDQ100-16在智能开关电源中的作用
OC to swift conditional compilation, marking, macro, log, version detection, expiration prompt
SHT11传感器的温度湿度监控报警系统单片机Proteus设计(附仿真+论文+程序等)
随机推荐
Go basic reflection
外包幹了四年,廢了...
Detailed explanation of C language P2 selection branch statement
Unity_代码方式添加绑定按钮点击事件
Proteus simulation design of four storey and eight storey elevator control system, 51 single chip microcomputer, with simulation and keil c code
8.3 语言模型与数据集
PWM speed regulation control system of DC motor based on 51 single chip microcomputer (with complete set of data such as Proteus simulation + C program)
面试官:说一下类加载的过程以及类加载的机制(双亲委派机制)
【STC8G2K64S4】比较器介绍以及比较器掉电检测示例程序
LM317的直流可调稳压电源Multisim仿真设计(附仿真+论文+参考资料)
Outsourcing for four years, abandoned
Detailed explanation of C language knowledge points -- first knowledge of C language [1]
epoll 的EPOLLONESHOT 事件———实例程序
Matrix exchange row and column
SHT11传感器的温度湿度监控报警系统单片机Proteus设计(附仿真+论文+程序等)
电容
Alexnet model
UML项目实例——抖音的UML图描述
Raised exception class eaccexviolation with 'access violation at address 45efd5 in module error
Pnpm installation and use