tp5饼状图展示、搜索

最新推荐文章于 2021-06-07 01:05:17 发布

原创最新推荐文章于 2021-06-07 01:05:17 发布 · 239 阅读

CC 4.0 BY-SA版权

后台数据

/**
     * 显示资源列表
     *
     * @return \think\Response
     */
    public function index (Request $request)
    {
        //接收开始时间和结束时间
        $ktime=$request->param('ktime');
        //print_r($ktime);
        $jtime=$request->param('jtime');
        //查询数据
        $data=\app\day64\model\Money::where('time','between',["$ktime","$jtime"])->select();
        $data1=json_encode($data,true);
        $data2=json_decode($data1,true);
        //print_r($data2);
        $sumCount=0;
        $sumTkuan=0;
        $sumWxiaofei=0;
        $sumWtixian=0;
        $sumYtixian=0;
        foreach ($data as $v){
            $sumCount+=$v['count'];
            $sumTkuan+=$v['tuikuan'];
            $sumWxiaofei+=$v['wxiaofei'];
            $sumWtixian+=$v['wtixian'];
            $sumYtixian+=$v['ytixian'];
        }
//        echo $sumCount;
//        echo "<br>";
//        echo $sumTkuan;
//        echo "<br>";
//        echo $sumWxiaofei;
//        echo "<br>";
//        echo $sumWtixian;
//        echo "<br>";
//        echo $sumYtixian;
        $data3=[$sumCount,$sumTkuan,$sumWxiaofei,$sumWtixian,$sumYtixian];
        print_r($data3);
        return view('index',compact('data3'));
    }

前台进行展示数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div class="layui-tab">
    <ul class="layui-tab-title">
        <li>财务概况</li>
        <li>销售走势</li>
        <li>财务明细</li>
    </ul>
    <div class="layui-tab-content">

<!--        进行搜索-->
        <div>
            <form action="{:url('index')}" method="get">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">开始时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="limit1" placeholder="yyyy-MM-dd" name="ktime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">开始时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="limit2" placeholder="yyyy-MM-dd"
                                       name="jtime">
                            </div>
                        </div>
                    </div>
                    <button type="submit">搜索</button>
            </form>

            <div class="layui-tab-item layui-show">
<!--                菜鸟饼状图-->
                <html>
                <head>
                    <meta charset="UTF-8"/>
                    <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
                    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
                    <script src="http://code.highcharts.com/highcharts.js"></script>
                </head>
                <body>
                <!--            饼状图-->
                <div id="container" style="width: 550px; height: 400px; margin: 0 100px;float: left"></div>
                <!--            右侧数据-->
                <div style="width: 300px; height: 400px; background-color: #00F7DE;float: right">
                    <div>总销售额：{$data3[0]}</div>
                    <div>退款金额：{$data3[1]}</div>
                    <div>未消费：{$data3[2]}</div>
                    <div>未提现：{$data3[3]}</div>
                    <div>已提现：{$data3[4]}</div>

                </div>
                <div style="width: 300px; height: 400px; background-color: #00F7DE;float: right">
                    <div>总销售额：{$data3[0]}</div>
                    <div>退款金额：{$data3[1]}</div>
                    <div>未消费：{$data3[2]}</div>
                    <div>未提现：{$data3[3]}</div>
                    <div>已提现：{$data3[4]}</div>
                </div>
                <script language="JavaScript">

                    $(document).ready(function () {
                        var chart = {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false
                        };
                        var title = {
                            text: '消费财务概览'
                        };
                        var tooltip = {
                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        };
                        var plotOptions = {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: false
                                },
                                showInLegend: true
                            }
                        };
                        var series = [{
                            type: 'pie',
                            name: 'Browser share',
                            data: [
                                ['销售总量', {$data3[0]}],
                                ['退款金额', {$data3[1]}],
                                ['未消费', {$data3[2]}],
                                ['未体现', {$data3[3]}],
                                ['已提现', {$data3[4]}]
                            ]
                        }];

                        var json = {};
                        json.chart = chart;
                        json.title = title;
                        json.tooltip = tooltip;
                        json.series = series;
                        json.plotOptions = plotOptions;
                        $('#container').highcharts(json);
                    });
                </script>
                </body>
                </html>
            </div>

            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
        </div>
    </div>

    <script src="/layui/layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
    <script>
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element', 'laydate', 'jquery'], function () {
            var element = layui.element;
            var laydate = layui.laydate
            var $ = layui.$;

            //限定可选日期
            var ins22 = laydate.render({
                elem: '#test-limit1'
                , min: '2016-10-14'
                , max: '2080-10-14'
                , ready: function () {
                    ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
                }
            });
            var ins22 = laydate.render({
                elem: '#test-limit2'
                , min: '2016-10-14'
                , max: '2080-10-14'
                , ready: function () {
                    ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
                }
            });


        });
    </script>
</body>
</html>