echarts-complex.blade.php 3.6 KB
<script type="text/javascript">
    $(function(){
        // 初始化控件
        $("#{{$data['id']}}").initECharts({
            'url' : "/{{config ('admin.route.prefix')}}/statistic/{{$data['id']}}" ,// 请求地址
           // 'theme':'walden',//  主题
        });
    });

</script>
<style>
.btn-link{
    padding-left: 0;
    color: #999999;
}
.btn-link.active{
    color: #0da3f1!important;
    font-weight: bold;
}
.btn-link:after{
    content: '';
    height: 10px;
    border-right: 1px solid #e1e1e1;
    padding-left: 1rem;
    /*padding-right: 1rem;*/
}
.btn-link:last-child:after{
    display: none;
}
</style>
<div class="x_panel">
    <!-- /.box-header begin -->
    @include('admin::statistic.echarts-title',['data' => $data])
    <!-- /.box-header end-->

    <!-- /.box-body begin-->
    <div class="x_content">

        <div class="container">

            <div class="row">
                <div class="col-sm-5">
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control" id="daterange-{{$data['id']}}" name="daterange" value="" placeholder="开始-结束日期"/>
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="fa fa-calendar-o"></i></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-7 right">
                    <div class="input-group input-group-sm" style="text-align: right;float: right">
                        <div class="form-group right time-limit-{{$data['id']}}">
                            <button type="button" class="btn btn-link active init-chart"  disabled="disabled"  data-type="last-week">近一周</button>
                            <button type="button" class="btn btn-link init-chart"  data-type="week">本周</button>
                            <button type="button" class="btn btn-link init-chart"  data-type="month">本月</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

         <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="{{$data['id']}}" style="height:295px;"></div>

    </div>
    <!-- /.box-body end-->

{{--    <div class="card-footer" style="background-color: rgba(0,0,0,.03) !important;">--}}

{{--        <div class="row">--}}
{{--          <div class="col-sm-6 col-6">--}}
{{--            <div class="description-block border-right">--}}
{{--              <span class="description-percentage text-{{ $data['month']['color']}}"><i class="fa fa-caret-{{ $data['month']['icon']}}"></i> {{$data['month']['ratio']}}%</span>--}}
{{--              <h5 class="description-header">{{$data['month']['count']}}</h5>--}}
{{--              <span class="description-text">本月{{$data['title']}}</span>--}}
{{--            </div>--}}
{{--            <!-- /.description-block -->--}}
{{--          </div>--}}
{{--          <!-- /.col -->--}}
{{--          <div class="col-sm-6 col-6">--}}
{{--            <div class="description-block border-right">--}}
{{--              <span class="description-percentage text-{{ $data['week']['color']}}"><i class="fa fa-caret-{{ $data['week']['icon']}}"></i> {{$data['week']['ratio']}}%</span>--}}
{{--              <h5 class="description-header">{{$data['week']['count']}}</h5>--}}
{{--              <span class="description-text">本周{{$data['title']}}</span>--}}
{{--            </div>--}}
{{--            <!-- /.description-block -->--}}
{{--          </div>--}}
{{--          <!-- /.col -->--}}

{{--        </div>--}}
        <!-- /.row -->
</div>