当前位置:网站首页>Thinkphp5 + data large screen display effect
Thinkphp5 + data large screen display effect
2022-04-23 14:53:00 【Game programming】
1 Controller code display :
Controller code :
// The data output after loading the page public function index() { $data = Db::name('index')->limit(5)->select(); $this->assign('data',$data); $this->display(); return view('index'); } // Get data asynchronously public function data(){ $list = Db::name('index')->limit(5)->select(); // Reorganize array 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)); // Convert to json Data output }
html Code :
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- introduce echarts.js --> <script src="echarts.min.js"></script></head><body><!-- by ECharts Prepare one with size ( Wide and high ) Of 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: ' Asynchronous data loading example ' }, tooltip: {}, legend: { data:[' sales '] }, xAxis: { // Display in the chart after loading the page X Axis information data: [<?php foreach($data as $v){; ?>"<?php echo $v['name'] ?>",<?php }; ?>] }, yAxis: {}, series: [{ name: ' sales ', // type: 'line',// Broken line diagram type: 'bar',// Histogram // Display in the chart after loading the page Y Axis information data: [<?php foreach($data as $v){; ?>"<?php echo $v['number'] ?>",<?php }; ?>], itemStyle:{ // Color definition normal:{color:'#00bc12'} } }] }); // Load background data asynchronously , Through the timer to achieve 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: ' sales ', data: json.details }] }); } }) }; <!--var time = setInterval(run,3000);--></script></html>
Display effect display :
Database display :
Line chart effect :
author : A deep preference
Game programming ️, A game development favorite ~
If the picture is not displayed for a long time , Please use Chrome Kernel browser .
版权声明
本文为[Game programming]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204231447589940.html
边栏推荐
- OC to swift conditional compilation, marking, macro, log, version detection, expiration prompt
- Ali developed three sides, and the interviewer's set of combined punches made me confused on the spot
- 2-Go变量操作
- 成都控制板设计提供_算是详细了_单片机程序头文件的定义、编写及引用介绍
- Swift Protocol 关联对象 资源名称管理 多线程GCD 延迟 once
- SQLSERVER事物与锁的问题
- 1-初识Go语言
- Explanation and example application of the principle of logistic regression in machine learning
- 【NLP】HMM隐马尔可夫+维特比分词
- 分享3个使用工具,在家剪辑5个作品挣了400多
猜你喜欢
随机推荐
Swift protocol Association object resource name management multithreading GCD delay once
What is the main purpose of PCIe X1 slot?
成都控制板设计提供_算是详细了_单片机程序头文件的定义、编写及引用介绍
OPPO数据湖统一存储技术实践
go基础 反射
raised exception class EAccexxViolation with ‘Access violation at address 45EFD5 in module 出错
LeetCode149-直线上最多的点数-数学-哈希表
I/O复用的高级应用之一:非阻塞 connect———使用 select 实现(也可以用 poll 实现)
1990年1月1日是星期一,定义函数date_to_week(year,month,day),实现功能输入年月日后返回星期几,例如date_to_week(2020,11,1),返回:星期日。 提示:
The art of automation
Pnpm installation and use
What is the effect of Zhongfu Jinshi wealth class 29800? Walk with professional investors to make investment easier
Async void caused the program to crash
Flink datastream type system typeinformation
【Proteus仿真】自动量程(范围<10V)切换数字电压表
Sqlserver transaction and lock problem
SQLSERVER事物与锁的问题
Async keyword
Leetcode exercise - 396 Rotation function
Raised exception class eaccexviolation with 'access violation at address 45efd5 in module error