update style

css/demo.css

@@ -96,7 +96,7 @@ body{
   right: 10px;
   top: 60px;
   color: #fff;
-  z-index: 10;
+  z-index: 100;
   cursor: pointer;
   color: #fff;
 }

css/flexleft.css

@@ -2,16 +2,11 @@
   position: fixed;
   top: 0px;
   bottom: 0;
-  left: 0;
-  width: 0;
+  left: -400px;
+  width: 400px;
   padding-top: 50px;
-  /* width: 400px; */
-  /* background: green; */
-  z-index: 10;
-  /* opacity: .3; */
   z-index: 40;
   transition: width .3s;
-  overflow: hidden;
 }
 
 .fixed-left.collpased{
@@ -32,17 +27,15 @@
   width: 100%;
 }
 
-.left_echart{
-  position: absolute;
-  width: 100%;
-  height: 60%;
-}
-
-.fixed-left.active .left_echart{
+/* .fixed-left.active .left_echart{
   width: 100%;
   height: 100%;
-  /* background: pink; */
 }
+.left_echart div{
+  width: 100%;
+  height: 100%;
+} */
+
 .fixed-left.active::before{
   position: absolute;
   left: 0;
@@ -161,3 +154,11 @@
 }
 
 
+.left_echart{
+  position: fixed !important;
+  height: 60%;
+  left: 0;
+  top: 0;
+  width: 400px;
+  z-index: 50;
+}

demo.html

@@ -123,9 +123,6 @@
         </ul>
     </div>
     <div class="fixed-left">
-        <div class="screen-btn screen-open" id="btn">
-            <span class="screen_icon iconfont icon-kuoda"></span>
-        </div>
         <div class="video_img">
             <div class="div-video">
                 <video width="100%" height="100%" controls>
@@ -166,12 +163,14 @@
                 <div class="prev_button"></div>
                 <div class="nav_indicators"></div>
             </div>
-        </div>
-
-        <div class="left_echart" id="mainGraph"></div>
-        
+        </div>        
+    </div>
+
+    <div class="left_echart" id="mainGraph"></div>
+
+    <div class="screen-btn screen-open" id="btn">
+        <span class="screen_icon iconfont icon-kuoda"></span>
     </div>
-    
     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 
     <div id="main" style="width: 100%;height:100vh;"></div>
@@ -1231,6 +1230,7 @@
         // 页面加载时，第一次初始化图，以及点击省份后更换数据
         
         function sync_request(url){
+
             //实例化XmlHttpRequest对象
             var xhr=new XMLHttpRequest();
             //使用GET方式请求指定网址的页面
@@ -1280,6 +1280,7 @@
                     }
                 };
             }
+
             redrawGraph();
         }
 
@@ -1355,6 +1356,7 @@
         }
         // 根据更新后的option重新画图
         function redrawGraph() {
+            $('.fixed-left').css({left: 0});
             optionGraph.series[0].data = Object.values(currentGraph.nodes);
             optionGraph.series[0].links = Object.values(currentGraph.links);
             myChartGraph.setOption(optionGraph);
@@ -1440,6 +1442,8 @@
                 }
             }]
         };
+
+        
         myChartGraph.on('click', function(params) {
             if (params.dataType === "node") {
                 const node = nodeMap[params.data.name];
@@ -1452,6 +1456,28 @@
             }
         });
 
+        $('#btn').on('click', function () {
+    
+            if ($('.fixed-left').hasClass('active')) {
+            // 改变样式
+            $('.fixed-left').removeClass('active');
+            $('.video_img, .search-area').show();
+            $('.screen_icon').addClass('icon-kuoda').removeClass('icon-suoxiao');
+            $('.left_echart').css({
+                    width: '400px'
+                })
+            // 重新加载知识图谱
+            
+            } else {
+                $('.fixed-left').addClass('active');
+                $('.video_img, .search-area').hide();
+                $('.screen_icon').addClass('icon-suoxiao').removeClass('icon-kuoda');
+                $('.left_echart').css({
+                    width: '100%'
+                })
+            }
+            redrawGraph();
+        });
 </script>
 
 <script type="text/javascript">
@@ -1538,9 +1564,10 @@
         })
 
         // 左侧滑屏结束后调用该事件，重新渲染知识图谱
-        $('.fixed-left').on('transitionend', function () {
-            console.log('滑屏结束时，调用渲染知识图谱');
-        })
+        // $('.fixed-left').on('transitionend', function () {
+        //     console.log('滑屏结束时，调用渲染知识图谱');
+        //     // redrawGraph()
+        // })
     });
   </script>
 </body>

js/demo.js

@@ -4,25 +4,9 @@
  * @Github: 
  * @Date: 2019-12-11 09:17:17
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-11 11:55:53
+ * @LastEditTime: 2019-12-11 14:20:31
  */
 $(document).ready(function () {
-  $('#btn').on('click', function () {
-    
-    if ($('.fixed-left').hasClass('active')) {
-      // 改变样式
-      $('.fixed-left').removeClass('active');
-      $('.video_img, .search-area').show();
-      $('.screen_icon').addClass('icon-kuoda').removeClass('icon-suoxiao');
-
-      // 重新加载知识图谱
-      
-    } else {
-      $('.fixed-left').addClass('active');
-      $('.video_img, .search-area').hide();
-      $('.screen_icon').addClass('icon-suoxiao').removeClass('icon-kuoda');
-    }
-  });
 
   // 用户登录信息
   $('.drop-down').on('mouseover', function () {
@@ -43,12 +27,12 @@ $(document).ready(function () {
   function showOrHideSlider () {
     if ($('.fixed-left').hasClass('collpased')) {
       $('.fixed-left').removeClass('collpased');
-      $('.map_header').css({left: 0});
+      // $('.map_header').css({left: 0});
       // $('.collpase-icon').remove('icon-zhankai').add('icon-shouqi');
       // $('.collpase-icon').addClass('icon-zhankai').remove('icon-shouqi');
     } else {
       $('.fixed-left').addClass('collpased');
-      $('.map_header').css({left: '400px'});
+      // $('.map_header').css({left: '400px'});
       // $('.collpase-icon').remove('icon-shouqi').add('icon-zhankai');
     }
 
@@ -58,6 +42,7 @@ $(document).ready(function () {
       $('.collpase-icon').removeClass('icon-shouqi').addClass('icon-zhankai')
     }
   }
+  
   // 收缩左侧侧边栏
   $('.collpase-icon').on('click', function() {
     showOrHideSlider();