当前位置:网站首页>Thinkphp5 + data large screen display effect
Thinkphp5 + data large screen display effect
2022-04-23 20:49:00 【A bone preference】
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 :
版权声明
本文为[A bone preference]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204232047427945.html
边栏推荐
猜你喜欢
Addition, deletion, modification and query of advanced MySQL data (DML)
Cmake project under vs2019: calculating binocular parallax using elas method
On IRP from the perspective of source code
Go language development Daily Fresh Project Day 3 Case - Press Release System II
Come in and teach you how to solve the problem of port occupation
41. 缺失的第一个正数
电脑越用越慢怎么办?文件误删除恢复方法
go interface
Summary and effect analysis of methods for calculating binocular parallax
Deep analysis of C language function
随机推荐
Elastic box model
Pikachuxss how to get cookie shooting range, always fail to return to the home page
CONDA environment management command
Go limit depth traversal of files in directory
LeetCode-279-完全平方数
Awk print special characters
matplotlib. Pyplot partition drawing
Sharpness difference (SD) calculation method of image reconstruction and generation domain index
亚马逊和Epic将入驻,微软应用商城向第三方开放
Selenium displays webdriverwait
MySQL进阶之数据的增删改查(DML)
如何发挥测试策略的指导性作用
go reflect
An error occurs when the addressable assets system project is packaged. Runtimedata is null
Deno 1.13.2 发布
浅谈数据库设计之三大范式
go array
pytorch 1.7. The model saved by X training cannot be loaded in version 1.4 or earlier
电脑越用越慢怎么办?文件误删除恢复方法
Easy to use nprogress progress bar