Fastadmin饼状图从数据库获取数据并实现异步刷新显示

迈不过友情╰ 2022-12-28 00:38 198阅读 0赞

## 开发管理示例里的统计图表 ##

就先说如何从数据库拿数据的吧，毕竟是第三方的东西，说难不难说简单也不简单！！！  
注意:我是拿饼状图举例子，大家就自己举一反三去吧，因为我也只是研究了一个。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5NTUwMQ_size_16_color_FFFFFF_t_70_pic_center]

## 第一步：JS文件里对应方法下发送ajax请求 ##

这里需要注意pieChart.setOption(option1);他是第三方自带的，千万别丢掉，四个row\[\]对应下边的四个value值

$.ajax({ 
                    url:"example/echarts/index",
                    type:"POST",
                    data:{ "jobdata":"internet","a":"sale","b":"law","c":"design"},
                    dataType:"json",
                    success:function (row){ 
                        console.log(row);
    
                        option1.series[0].data[0].value = row[0];
                        option1.series[0].data[1].value = row[1];
                        option1.series[0].data[2].value = row[2];
                        option1.series[0].data[3].value = row[3];
                        // 使用刚指定的配置项和数据显示图表。
                        pieChart.setOption(option1);
                    }
                });

## 第二步:在Echarts中接收请求 ##

if (request()->isAjax()){ 
            $edit = request()->post('jobdata');
            $edit1 = request()->post('a');
            $edit2 = request()->post('b');
            $edit3 = request()->post('c');
            $db = Db::name('gl_jy')->where('jobdata', '=', $edit)->count();
            $db1 = Db::name('gl_jy')->where('jobdata', '=', $edit1)->count();
            $db2 = Db::name('gl_jy')->where('jobdata', '=', $edit2)->count();
            $db3 = Db::name('gl_jy')->where('jobdata', '=', $edit3)->count();
            $cc = [$db,$db1,$db2,$db3];
            return $cc;
    
        }

## 第三步:就是告诉你我踩的坑 ##

由于是第三方的东西，我的ajax请求回来的数据，无论我用什么办法都是无法改变他的value值  
![在这里插入图片描述][20201212164358752.png_pic_center]  
这时候一定要注意这个，第三方的数据是不能随便修改的，你可以将它覆盖掉(我后来自己写的没有覆盖，只是再次执行，当然覆盖也是可以的)  
![在这里插入图片描述][20201212164429879.png_pic_center]

## 第四步:异步刷新实现 ##

我是在页面自己写了一个按钮来测试异步刷新  
![在这里插入图片描述][2020121216483845.png]  
这里我测试成功后将点击事件给取消掉了，用计时器实现。  
注意不要将之前的请求包裹，要重新写一个请求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5NTUwMQ_size_16_color_FFFFFF_t_70]  
这样就实现定时异步刷新啦  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5NTUwMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5NTUwMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/b66e0b88dbbd42f2b94a1af275cfdecf.png
[20201212164358752.png_pic_center]: /images/20221120/26892c7a396b43afbd3d4689154315f1.png
[20201212164429879.png_pic_center]: /images/20221120/13ce50100c80431e8b2a85b6b9b6e8a8.png
[2020121216483845.png]: /images/20221120/4a71ae40190f4c3ea69d63b956a7b52e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5NTUwMQ_size_16_color_FFFFFF_t_70]: /images/20221120/ccaf0fae169c485f99cd1182959249cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5NTUwMQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/d37b3f868d444f0ca6c8fe8475fa872c.png