thinkphp5+数据大屏展示效果

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>

显示效果展示：

数据库展示：

折线图效果：

thinkphp5+数据大屏展示效果相关推荐

基于VUE + Echarts 实现可视化数据大屏展示效果
中国(寿光)国际蔬菜科技博览会智慧农业系统 - LED拼接屏展示前端开发文档上线后呈现效果: 一.开发需求及方案制定 1.确定现场led拼接屏的宽高比,按照1920px*1080px的分辨率,F11 ...
Echarts + Web实现大屏展示效果
Echarts + Web实现大屏展示效果,实现数据可视化,大屏显示效果,用echarts插件实现文件:590m.com/f/25127180-486877235-f5ca5a (访问密码:5516 ...
基于 Echarts 实现可视化数据大屏展示(150套)
基于 Echarts 实现可视化数据大屏展示(150套) 基于 Echarts 实现可视化数据大屏响应式展示效果的源码, 代码质量高,可以在此基础上重新开发. 作品介绍 1.网页作品简介方面 :本项目 ...
安徽合肥芜湖数字孪生智慧工厂,工厂车间数字化三维仿真交互,3d可视化数据大屏展示系统
安徽合肥芜湖数字孪生智慧工厂,工厂车间数字化三维仿真交互,3d可视化数据大屏展示系统.在数字化时代,传统的工业企业数字化转型迫在眉睫.在宝钢智能化升级项目中,引入了数字孪生这个概念,对工业生产全过程进 ...
JavaScript、Vue实现大数据大屏展示3D旋转动画效果
效果最近在写一些数据大屏的时候客户需要做个3D旋转动效的效果,简单整理之后写了一个小demo做下记录,先看一下效果: 当点击next的时候,整个模块旋转切换到下个菜单,点击prev的时候也可以切换到 ...
使用vue3实现数据大屏展示
1.前提有后端数据接口和数据库,并且能够使用axios访问接口获取数据 2.安装依赖包 npm i vue-router echarts axios less vue-router,我们有多个页面进 ...
基于Java开发的数据大屏展示程序
数据大屏开发文档一.开发目标本程序为一块不停刷新数据的大屏幕的Java后台程序.前端5分钟刷新一次,需要向后台接口请求数据展示到前段. 二.程序架构程序框架:Spring Boot.Myba ...
解决 “数据大屏“ 展示的屏幕适配问题
现在非常流行的大数据可视化方案,不过要做数据大屏有一个很重要的问题就是屏幕适配. 一.引入flexible文件 flexible是移动端屏幕适配非常著名的的插件,能够帮助我们修改rem的值,也就是修改 ...
vue+echarts+自适应实现可视化大屏展示效果
展示效果: 一.分辨率按照1920px*1080px,16:9展示效果最佳,不同分辨率可自适应,但图像可能有拉伸. 二.全屏页面的自适应适配方案采用rem 方案实现自适应,可参考 https://ww ...

thinkphp5+数据大屏展示效果

thinkphp5+数据大屏展示效果相关推荐

最新文章

热门文章