图谱legend展开收起

src/css/knowledgeMap.less

@@ -279,15 +279,50 @@
                 top: 0px;
                 position: relative;
             }
+           
         }
     }
+    .legendIcon{
+        position: absolute;
+        display: none;
+        width: 35px;
+        height: 22px;
+        bottom: 40px;
+        right: 5px;
+        background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
+    }
+    .legendIconImg{
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        position: absolute;
+        right: 10px;
+        top: 2px;
+        cursor: pointer;
+    }
+    .legendIconImg{
+        background: url('./../resources/images/iconSlideDown1.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendIconImg:hover{
+        background: url('./../resources/images/iconSlideDown1Hover.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendSlideUp{
+        background: url('./../resources/images/iconSlideUp1.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendSlideUp:hover{
+        background: url('./../resources/images/iconSlideUp1Hover.png') no-repeat;
+        background-size: 22px 22px;
+    }
    .footer{
        position: absolute;
        width: 100%;
        bottom: 10px;
        text-align: center;
        font-size: 12px;
-       color: #ccc;
+       color: #bbb;
    }
     .ztree{
         overflow: auto;

src/css/knowledgeTree.less

@@ -287,7 +287,7 @@
         bottom: 0px;
         text-align: center;
         font-size: 12px;
-        color: #ccc;
+        color: #bbb;
     }
     .ztree{
         overflow: auto;

src/css/medicalTermMap.less

@@ -181,13 +181,53 @@
             top: 155px;
         }
     }
+    .legendBox{
+        position: relative;
+        width: 796px;
+        left: 50%;
+        margin-left: -398px;
+    }
+    .legendIcon{
+        position: absolute;
+        display: none;
+        width: 35px;
+        height: 22px;
+        bottom: 0px;
+        right: 5px;
+        background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
+    }
+    .legendIconImg{
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        position: absolute;
+        right: 10px;
+        top: 2px;
+        cursor: pointer;
+    }
+    .legendIconImg{
+        background: url('./../resources/images/iconSlideDown1.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendIconImg:hover{
+        background: url('./../resources/images/iconSlideDown1Hover.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendSlideUp{
+        background: url('./../resources/images/iconSlideUp1.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendSlideUp:hover{
+        background: url('./../resources/images/iconSlideUp1Hover.png') no-repeat;
+        background-size: 22px 22px;
+    }
     .footer {
         position: absolute;
         width: 100%;
         bottom: 10px;
         text-align: center;
         font-size: 12px;
-        color: #ccc;
+        color: #bbb;
     }
 
     .disabled {

src/css/participle.less

@@ -357,7 +357,7 @@
     bottom: 0px;
     text-align: center;
     font-size: 12px;
-    color: #ccc;
+    color: #bbb;
     background: #fff;
 }
 

src/css/qaPage.less

@@ -144,5 +144,5 @@ input::-webkit-input-placeholder{
   bottom: 10px;
   text-align: center;
   font-size: 12px;
-  color: #ccc;
+  color: #bbb;
 }

src/html/knowledgeGraph.html

@@ -22,6 +22,10 @@
 		<div class="content clearfix">
 			<div class="left">
 				<div id="main" class="mapWrapper" style="width: 796px;height:600px;cursor: pointer;"></div>
+				<div class="legendIcon">
+					<div class="legendIconImg"></div>
+				</div>
+				
 				 <div class="footer">
 					杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
 				</div>

src/html/medicalTermMap.html

@@ -56,7 +56,12 @@
 						<p>正在加载中~</p>
 					</div>
 					<div id="main" class="mapWrapper" style="width: 796px;height:600px;cursor: pointer;"></div>
-
+					<div class="legendBox">
+						<div class="legendIcon">
+							<div class="legendIconImg"></div>
+						</div>
+					</div>
+					
 				</div>
 				 <div class="footer">
 					杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发

src/js/graphMap.js

@@ -42,6 +42,16 @@ function drawGraph(data,resultShowId) {
     var myChart = echarts.init(document.getElementById('main'));
     var categories = data['categories'];
     var legends = categories.slice(2, categories.length);
+    var showLegendNum = 0;
+    let sum = 0
+    for(let i = 0; i < legends.length; i++){
+
+        sum += 2+legends[i].name.length+1
+        console.log(sum)
+        if(sum <= 60){
+            showLegendNum ++
+        }
+    }
     var option = {
         title: { 
             text: '医学知识图谱',
@@ -58,11 +68,13 @@ function drawGraph(data,resultShowId) {
             type: 'scroll',
             bottom: 0,
             icon: 'circle',
+            padding:[20, 40, 0, 20],
+            backgroundColor: "#FFFFFF",
             // orient: 'vertical',
-            // cursor:'pointer',
-            data: legends.map(function (a) {
+            data: legends.slice(0,showLegendNum).map(function (a) {
                 return a.name;
-            })
+            }),
+            
         }],
         series: [
             {
@@ -145,8 +157,26 @@ function drawGraph(data,resultShowId) {
      })
     myChart.on('click',dataClick);
     myChart.setOption(option);
-   
-}
+    if(legends.length > showLegendNum){
+        $('.legendSlideUp').toggleClass('legendSlideUp')
+        $('.legendIcon').css('display',"block")
+    }else{
+        $('.legendSlideUp').toggleClass('legendSlideUp')
+        $('.legendIcon').css('display',"none")
+    }
+    $('.legendIconImg').on('click',function(){
+        $('.legendIconImg').toggleClass('legendSlideUp')
+        if(option.legend[0].type=='scroll'){
+            option.legend[0].type='plain'
+            option.legend[0].data = legends
+        }else{
+            option.legend[0].type='scroll'
+            option.legend[0].data = legends.slice(0,showLegendNum)
+        }
+       
+        myChart.setOption(option);
+    })
+}   
 
 function dataClick(param){
     var data = param.data;

src/js/medicalTermMap.js

@@ -121,6 +121,17 @@ function drawGraph(data,resultShowId) {
     var myChart = echarts.init(document.getElementById('main'));
     var categories = data['categories'];
     var legends = categories.slice(2, categories.length);
+    var showLegendNum = 0;
+    let sum = 0
+    for(let i = 0; i < legends.length; i++){
+
+        sum += 2+legends[i].name.length+1
+        console.log(sum)
+        if(sum <= 65){
+            console.log(111111)
+            showLegendNum ++
+        }
+    }
     var option = {
         // title: { 
         //     text: '医学知识图谱',
@@ -137,8 +148,10 @@ function drawGraph(data,resultShowId) {
             type: 'scroll',
             bottom: 0,
             icon: 'circle',
+            padding:[20, 40, 0, 20],
             // cursor:'pointer',
-            data: legends.map(function (a) {
+            backgroundColor: "#FFFFFF",
+            data: legends.slice(0,showLegendNum).map(function (a) {
                 return a.name;
             })
         }],
@@ -223,6 +236,25 @@ function drawGraph(data,resultShowId) {
      })
     // myChart.on('click',dataClick);
     myChart.setOption(option);
+    if(legends.length > showLegendNum){
+        $('.legendSlideUp').toggleClass('legendSlideUp')
+        $('.legendIcon').css('display',"block")
+    }else{
+        $('.legendSlideUp').toggleClass('legendSlideUp')
+        $('.legendIcon').css('display',"none")
+    }
+    $('.legendIconImg').on('click',function(){
+        $('.legendIconImg').toggleClass('legendSlideUp')
+        if(option.legend[0].type=='scroll'){
+            option.legend[0].type='plain'
+            option.legend[0].data = legends
+        }else{
+            option.legend[0].type='scroll'
+            option.legend[0].data = legends.slice(0,showLegendNum)
+        }
+       
+        myChart.setOption(option);
+    })
    
 }