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()
+ // })
});