图准备

resources/views/admin/group/groupinformation.blade.php

@@ -57,7 +57,7 @@
                 <ul class="nav nav-tabs">
                     <li class="active"><a href="#activity" data-toggle="tab">团队成员</a></li>
                     <li><a href="#timeline" data-toggle="tab">团队文件</a></li>
-                    <li><a href="#settings" data-toggle="tab">Settings</a></li>
+                    <li><a href="#settings" data-toggle="tab">云存储空间</a></li>
                     <li><a href="{{route('group.invitePage',['group_id' => $groups->id])}}" > 邀请新成员</a></li>
                 </ul>
                 <div class="tab-content" style="height: 740px">
@@ -132,7 +132,7 @@
 
                     <div class="tab-pane" id="settings">
 
-                        <h3> wowowo  我这里什么都没有  </h3>
+                        <div id="main" style="width: 600px;height:400px;"></div>
 
                     </div>
                     <!-- /.tab-pane -->
@@ -146,6 +146,97 @@
     <!-- /.row -->
 
 </section>
+    <script src="{{url('js/echarts.js')}}"></script>
+
+<script src="{{url('js/jquery-3.2.1.min.js')}}"> </script>
+
+<!-- 引入 echarts.js -->
+
+<script>
+
+    // 基于准备好的dom，初始化echarts实例
+    var myChart = echarts.init(document.getElementById('main'));
+
+
+    // ------------------  ajax ---------------//
+    groupSpance();
+    function groupSpance(){
+        $.ajax({
+            type:'get',
+            url:'{{route('file.groupSpace')}}',
+            success:function(data){
+                //console.log(data);
+                if (data == ''){
+                   alert(111);
+
+                }else {
+
+                    console.log(option['series']);
+                }
+            },
+            error:function(data){
+                console.log('错误');
+            }
+        });
+    }
+
+
+
+    option = {
+        title : {
+            text: '当前团队空间使用情况',
+            subtext: '这是真的',
+            x:'center'
+        },
+        tooltip : {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left',
+            data: ['全部空间','已经使用']
+        },
+        series : [
+            {
+                name: '访问来源',
+                type: 'pie',
+                radius : '55%',
+                center: ['50%', '60%'],
+                data:[
+                    {value:335, name:'全部空间'},
+                    {value:310, name:'已经使用'}
+                ],
+                itemStyle: {
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+
+
+
+</script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+