修改样式（3337，3335，3342）

src/css/common.css

@@ -1,5 +1,4 @@
 html, body{
-    overflow-x: hidden;
     background: #F7F8FA;
 }
 *{

src/html/knowledgeGraph.html

@@ -31,7 +31,7 @@
               </ul> -->
             </div>
             <div class="search">
-                <input type="text" id="searchInp" name="" autocomplete="off" ><span class="searchBtn" id="searchBtn">搜索</span>
+                <input type="text" id="searchInp" placeholder="搜索疾病名称" name="" autocomplete="off" ><span class="searchBtn" id="searchBtn">搜索</span>
                 <ul class="tabNameList"></ul>
             </div>
           </div>

src/html/knowledgeTree.html

@@ -17,7 +17,7 @@
         <p class="tips">提示说明：输入疾病、药物、症状、诊疗技术及设备（治疗）等相关医学实体名称，展示其 schema 描述体系。</p>
         <p  class="tips">输入示例：1. 支气管肺炎 2. 胆囊炎</p>
       </div>
-      <textarea class="searchTxt" id="searchTxt" autocomplete="off" rows="5"></textarea>
+      <textarea class="searchTxt" id="searchTxt" placeholder="搜索疾病名称" autocomplete="off" rows="5"></textarea>
       <div class="btnBox"><span class="sumbit">提交</span></div>
       <div class="mainBox">
         <div id="main" class="mainWrapper" style="width: 1160px;height:600px;">

src/js/graphMap.js

@@ -20,9 +20,12 @@ function drawGraph(data,resultShowId) {
     var myChart = echarts.init(document.getElementById('main'));
     var categories = data['categories'];
     var legends = categories.slice(2, categories.length);
-    
     var option = {
-        title: { text: '医学知识图谱' },
+        title: { 
+            text: '医学知识图谱',
+            top: '10',
+            left: '10'
+        },
         // color:colors,
         tooltip: {
             formatter: function (x) {
@@ -45,7 +48,7 @@ function drawGraph(data,resultShowId) {
                 cursor:'pointer',
                 categories: categories,
                 symbolSize: 80,
-                roam: true,
+                roam: 'move',
                 edgeSymbol: ['circle', 'arrow'],
                 edgeSymbolSize: [1, 5],
                 edgeLabel: {
@@ -62,7 +65,7 @@ function drawGraph(data,resultShowId) {
                     edgeLength: [4, 7],
                     layoutAnimation : true
                 },
-                draggable: true,
+                draggable: false,
                 animation: true,
                 hoverAnimation:false,
                 animationDuration:5000,
@@ -97,10 +100,11 @@ function drawGraph(data,resultShowId) {
                         textStyle: {
                             cursor:'pointer',
                         },
+                        // color:'#333', //label字体颜色
                         formatter: function (x) {
                              var tmp = x.data.label;
-                            if(tmp.length >= 8){
-                                tmp = tmp.substring(0,3);
+                            if(tmp.length >= 12){
+                                tmp = tmp.substring(0,12);
                                 tmp = tmp + "...";
                             }
                             return tmp;
@@ -190,10 +194,10 @@ function drawTree(data, showNodeName){
         //树的显示设置
         view:{
             showLine:true, //设置是否显示连线 默认为true
-            showTitle: false,//设置是否显示鼠标悬浮时显示title的效果
+            showTitle: true,//设置是否显示鼠标悬浮时显示title的效果
             dblClickExpand: true,//设置是否支持双击展开树节点
             fontCss : {color:"#333"},//设置节点样式  
-            expandSpeed: "slow",//设置展开的速度  fast normal  slow 
+            expandSpeed: "normal",//设置展开的速度  fast normal  slow 
             nameIsHTML: true,//名字是否是HTML
             selectedMulti: true,
             

src/js/index.js

@@ -30,6 +30,7 @@ window.select_type_noSearch="diagnose";
  $(".left").css("height",contentHei+'px')
  $(".right").css("height",contentHei+'px')
  $(".ztree").css("height",contentHei-80-43-60-20+'px')
+ $("#main").css("height",contentHei-20+'px')
 //关系图
 getGraph("胆囊炎",select_type);
 getTree(1,1,"胆囊炎");

src/js/schemaMap.js

@@ -19,7 +19,11 @@ function getSchema(val, type){
  function drawSchema(data){
     var myChart = echarts.init(document.getElementById('main'));
     myChart.setOption(option = {
-        title: { text: 'schema 结构' },
+        title: { 
+            text: 'schema 结构',
+            top: '10',
+            left: '10'
+        },
         tooltip: {
             show:'true',//默认：true；是否显示提示框组件，包括提示框浮层和 axisPointer。
             trigger: 'item',//默认：item；触发类型。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
@@ -59,8 +63,17 @@ function getSchema(val, type){
                         // borderColor: '#abcdef',
                         // backgroundColor:'#abcdef',
                         color: '#333',
-                        padding: [5,5,5,5]
+                        padding: [5,5,5,5],
+                        formatter: function (x) {
+                            var tmp = x.data.name;
+                           if(tmp.length >= 12){
+                               tmp = tmp.substring(0,3);
+                               tmp = tmp + "...";
+                           }
+                           return tmp;
+                       }
                     },
+                    
                 },
     
                 leaves: {
@@ -68,11 +81,21 @@ function getSchema(val, type){
                         normal: {
                             position: ['-100%',5],
                             rotate:0,
+                            cursor:'default',
                             verticalAlign: 'middle',
                             align: 'right',
                             fontSize: 12,//文字的字体大小
+                            formatter: function (x) {
+                                var tmp = x.data.name;
+                               if(tmp.length >= 12){
+                                   tmp = tmp.substring(0,3);
+                                   tmp = tmp + "...";
+                               }
+                               return tmp;
+                           }
                            
-                        }
+                        },
+                        
                     }
                 },  
     

src/resources/zTree/css/zTreeStyle/zTreeStyle.css

@@ -16,7 +16,7 @@ website:	http://code.google.com/p/jquerytree/
 .ztree li ul{ margin:0; padding:0 0 0 18px}
 .ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y; position: relative; left:-3px;}
 
-.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
+.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:20px; color:#333; background-color: transparent;
 	text-decoration:none; vertical-align:top; display: inline-block}
 .ztree li a:hover {text-decoration:underline}
 .ztree li a.curSelectedNode {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
@@ -100,3 +100,10 @@ ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height
 .ztree li span.button.switch{
 	display:none;
 }
+.node_name{
+	display: inline-block;
+	max-width: 264px;
+	overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}