当前位置：网站首页>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 ：
Insert picture description here
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 ：
Insert picture description here
Database display ：
Insert picture description here
Line chart effect ：
Insert picture description here

版权声明
本文为[A bone preference]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204232047427945.html

边栏推荐

猜你喜欢

随机推荐