当前位置：网站首页>Thinkphp5 + data large screen display effect

Thinkphp5 + data large screen display effect

2022-04-23 14:53:00 【Game programming】

1 Controller code display ：

thinkphp5+ Large data screen display effect - The first 1 Zhang

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 ：