diff --git a/css/demo.css b/css/demo.css index 2390a01..e309315 100644 --- a/css/demo.css +++ b/css/demo.css @@ -96,7 +96,7 @@ body{ right: 10px; top: 60px; color: #fff; - z-index: 10; + z-index: 100; cursor: pointer; color: #fff; } diff --git a/css/flexleft.css b/css/flexleft.css index 80a4525..cb42bbd 100644 --- a/css/flexleft.css +++ b/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; +} \ No newline at end of file diff --git a/demo.html b/demo.html index ceb7f97..6c91047 100644 --- a/demo.html +++ b/demo.html @@ -111,9 +111,6 @@
-
- -
-
- -
- +
+ + +
+ +
+
-
@@ -1410,6 +1409,7 @@ // 页面加载时,第一次初始化图,以及点击省份后更换数据 function sync_request(url){ + //实例化XmlHttpRequest对象 var xhr=new XMLHttpRequest(); //使用GET方式请求指定网址的页面 @@ -1459,6 +1459,7 @@ } }; } + redrawGraph(); } @@ -1534,6 +1535,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); @@ -1619,6 +1621,7 @@ } }] }; + // init("西藏") myChartGraph.on('click', function(params) { if (params.dataType === "node") { @@ -1632,6 +1635,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(); + }); // 点击省份加载图片 function loadPic(name) { if (name == "西藏" || name == "新疆" || name == "青海") { @@ -1755,9 +1780,10 @@ }) // 左侧滑屏结束后调用该事件,重新渲染知识图谱 - $('.fixed-left').on('transitionend', function () { - console.log('滑屏结束时,调用渲染知识图谱'); - }) + // $('.fixed-left').on('transitionend', function () { + // console.log('滑屏结束时,调用渲染知识图谱'); + // // redrawGraph() + // }) }); diff --git a/js/demo.js b/js/demo.js index f73609f..9971349 100644 --- a/js/demo.js +++ b/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();