当前位置：网站首页>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>

显示效果展示：