当前位置：网站首页>thinkphp5+数据大屏展示效果

thinkphp5+数据大屏展示效果

2022-04-23 20: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>

显示效果展示：
在这里插入图片描述
数据库展示：
在这里插入图片描述
折线图效果：
在这里插入图片描述

版权声明
本文为[骨子里的偏爱]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_41823246/article/details/124348289

边栏推荐

猜你喜欢

随机推荐