html 选项卡 加 chart

html 页面

<div class="box">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">财务概况</li>
            <li>销售走势</li>
            <li>财务明细</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <div class="search">
                    <input type="date" id="ob_time" name="ob_time">
                    <span>-</span>
                    <input type="date" id="end_time" name="end_time">
                    <button id="search">查询</button>
                </div>
                <div class="con">
                    <div class="chart">
                        <div id="main" style="width: 600px;height:400px;"></div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <p>总销售额 <span>{$data['total_price']}</span></p>
                            <p>退款金额 <span>{$data['tui_price']}</span></p>
                            <p>未消费 <span>{$data['no_price']}</span></p>
                            <p>未提现 <span>{$data['no_ti']}</span> <span id="ti">[申请提现]</span></p>
                            <p>已提现 <span>{$data['ti']}</span></p>
                        </div>
                        <div class="bot">
                            <p>2019 - 01 报表</p>
                            <p>2019 - 01 销售额 <span>{$data['total_price']}</span></p>
                            <p>2019 - 01 退款金额 <span>{$data['tui_price']}</span></p>
                            <p>2019 - 01 消费 <span>{$data['no_price']}</span></p>
                            <p>2019 - 01 提现 <span>{$data['ti']}</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>

        </div>
    </div>
</div>

CSS样式

 <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <style>
        .box {
            width: 90%;
            margin: 0px auto;
        }
        .con {
            display: flex;
        }
        .chart , .right{
            width: 50%;
        }
        .top, .bot {
            margin: 10px;
            padding: 20px 50px;
            background-color: #fefcef;
        }
        p {
            line-height: 30px;
        }
        span {
            color: #ff8800;
        }
    </style>

js

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            title: {
                text: '天气情况统计',
                subtext: '虚构数据',
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                bottom: 10,
                left: 'center',
                data: ['总销售额', '退款金额', '未消费', '未提现', '已提现']
            },
            series: [
                {
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    data: [
                        {value: {$data['total_price']}, name: '总销售额'},
                        {value: {$data['tui_price']}, name: '退款金额'},
                        {value: {$data['no_price']}, name: '未消费'},
                        {value: {$data['no_ti']}, name: '未提现'},
                        {value: {$data['ti']}, name: '已提现'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        $('#ti').click(function () {
            location.href = "http://www.tp6.com/week/txian/create"
        })

        $('#search').click(function () {
            var ob_time = $('#ob_time').val();
            var end_time = $('#end_time').val();
            if (ob_time > end_time) {
                alert('开始时间不能 大于结束时间');
            }
            $.ajax({
                url: 'chart',
                data: {ob_time, end_time}
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    var data = res.data;

                }
            })
        })

    })
</script>

后台 根据时间查询

   public function chart()
    {

        if (\request()->isAjax()){
            $params = input();
            $price_list = new PriceList();
            $arr['total_price']= User::where('id',1)->value('total_price');
            $arr['ti'] = $price_list->where('user_id',1)->whereBetweenTime('date',$params['ob_time'],$params['end_time'])
            ->where('type',1)->sum('price');
            $arr['no_ti'] = $price_list->where('user_id',1)->whereBetweenTime('date',$params['ob_time'],$params['end_time'])
            ->where('type',2)->sum('price');
            $arr['tui_price'] = $price_list->where('user_id',1)->whereBetweenTime('date',$params['ob_time'],$params['end_time'])
            ->where('type',3)->sum('price');
            $arr['no_price'] = $price_list->where('user_id',1)->whereBetweenTime('date',$params['ob_time'],$params['end_time'])
            ->where('type',3)->sum('price');


            return json(['code'=>200,'msg'=>'ok','data'=>$arr]);
        }

        $arr['total_price']= User::where('id',1)->value('total_price');
        $price_list = new PriceList();
        $arr['ti'] = $price_list->where('user_id',1)->whereMonth( 'date','this month')
            ->where('type',1)->sum('price');
        $arr['no_ti'] = $price_list->where('user_id',1)->whereMonth( 'date','this month')
            ->where('type',2)->sum('price');
        $arr['tui_price'] = $price_list->where('user_id',1)->whereMonth( 'date','this month')
            ->where('type',3)->sum('price');
        $arr['no_price'] = $price_list->where('user_id',1)->whereMonth( 'date','this month')
            ->where('type',4)->sum('price');

//        halt($arr);
        return view('',['data'=>$arr]);
    }