给echarts力导向布局图增加滚动条。

最新推荐文章于 2024-08-12 14:23:08 发布

Ezrealmore

最新推荐文章于 2024-08-12 14:23:08 发布

阅读量1.1w

点赞数 1

连线点击事件/样式/标注文字及源代码。今天介绍一下怎么给echarts力导向布局图增加滚动条。

全部的demo代码下载：http://pan.baidu.com/s/1jGzEb6u。

预览界面：http://www.suchso.com/code/KFdemo/force.html

echarts力导向布局图是没有滚动条功能的。力导向布局图的本意不是做人物关系图，所以当作人物关系图使用的时候，

就会出现问题。数据太多，就会罩住了。所以考虑增加个滚动条。

思路：

如果只是在html中增加滚动条是完全没问题。但是echarts是基于zrender，zrender是基于html5的。html5的canvas是没有滚动条选项的。

需要自己给他计算滚动条。

1、提供是否展示滚动条的选项：isShowScrollBar

2、根据参数构建滚动条： if(option.isShowScrollBar) _buildScrollBar();

3、_buildScrollBar函数实现计算左侧和底层的滚动条。

根据zrender的高度和宽度，在zrender中增加2个长方形。

1

2

3

4

5

 
      var  
      barPosition = []; 
     
      barPosition[0] = (zr.getWidth() / 2 - 50); 
     
      barPosition[1] = (zr.getHeight() / 2 - 50); 
     
      Ox = barPosition[0]; 
     
      Oy = barPosition[1];

长方形的宽度和高度由样式定义。

纵向滚动条实现：

 
      var  
      vscrollArea = { 
     
      shape: 
      'rectangle' 
      , 
     
      id: 
      'vscrollArea' 
      , 
     
      style: { 
     
      x: zr.getWidth()-20, 
     
      y: 10, 
     
      width: 20, 
     
      height: zr.getHeight() - 30, 
     
      color:  
      'gray' 
      , 
     
      opacity: 0.3 
     
      } 
     
      }; 
     
      var  
      vscroll = { 
     
      shape: 
      'rectangle' 
      , 
     
      id: 
      'vscroll' 
      , 
     
      style:{ 
     
      x: zr.getWidth() - 20, 
     
      y: barPosition[1], 
     
      width: 20, 
     
      height: 50, 
     
      color: 
      '#5BB1E4' 
     
      }, 
     
      draggable :  
      true 
      , 
     
      ondrift :  
      function 
      (shape, dx, dy) { 
     
      shape.style.y += dy; 
     
      if 
      (shape.style.y < 10)  
     
      shape.style.y = 10 
     
      else  
      if  
      (shape.style.y > zr.getHeight() - 70 )  
      // 80 = 50 + 40 - 10 
     
      shape.style.y = zr.getHeight() - 70; 
     
      zr.modShape(shape.id, shape); 
     
      zr.refresh(); 
     
      return  
      true 
      ; 
     
      }, 
     
      ondragstart:  
      function 
      (params) { 
     
      var  
      shape = params.target; 
     
      temperature = 0.001  
      //拖动滚动条时图不动  
     
      }, 
     
      ondragend  :  
      function 
      (params) { 
     
      var  
      shape = params.target; 
     
      self.clear(); 
     
      _buildShape(); 
     
      temperature = 1.0; 
     
      dy = (shape.style.y - Oy)*2;  
     
      for 
      ( 
      var  
      i  
      in  
      nodeShapes){ 
     
      nodeShapes[i].style.y -= dy; 
     
      nodeShapes[i].style.x -= dx; 
     
      } 
     
      _step(); 
     
      return  
      true 
      ; 
     
      }    
     
      };

以纵向滚动条为例。vscrollArea是滚动条滚动区域，如图中的红色1，vscroll是可见可拖动的滚动条，如图中的红色2.

IT分享ECharts教程,ECharts 人物关系图,ECharts 力导向布局图,ECharts 人物关系图拖拽,ECharts 人物关系图点击事件,ECharts 点击事件,ECharts功能扩展,echarts 滚动条

横向滚动条实现：

 
      var  
      hscrollArea = { 
     
      shape:  
      'rectangle' 
      , 
     
      id:  
      'hscrollArea' 
      , 
     
      style: { 
     
      x: 10, 
     
      y: zr.getHeight() - 20, 
     
      width: zr.getWidth() - 30, 
     
      height: 20, 
     
      color:  
      'gray' 
      , 
     
      opacity: 0.3 
     
      } 
     
      }; 
     
      var  
      hscroll = { 
     
      shape: 
      'rectangle' 
      , 
     
      id: 
      'hscroll' 
      , 
     
      style : { 
     
      x: barPosition[0], 
     
      y: zr.getHeight() - 20, 
     
      width: 50, 
     
      height: 20, 
     
      color:  
      '#5BB1E4' 
     
      }, 
     
      draggable :  
      true 
      , 
     
      ondrift :  
      function 
      (shape, dx, dy) { 
     
      shape.style.x += dx; 
     
      if 
      (shape.style.x < 10)  
     
      shape.style.x = 10 
     
      else  
      if  
      (shape.style.x > zr.getWidth() - 70 )  
     
      shape.style.x = zr.getWidth() - 70; 
     
      zr.modShape(shape.id, shape); 
     
      zr.refresh(); 
     
      return  
      true 
      ; 
     
      }, 
     
      ondragstart:  
      function 
      (params) { 
     
      var  
      shape = params.target; 
     
      temperature = 0.001  
      //拖动滚动条时图不动  
     
      }, 
     
      ondragend  :  
      function 
      (params) { 
     
      var  
      shape = params.target; 
     
      self.clear(); 
     
      _buildShape(); 
     
      temperature = 1.0; 
     
      dx = (shape.style.x - Ox)*2;  
     
      for 
      ( 
      var  
      i  
      in  
      nodeShapes){ 
     
      nodeShapes[i].style.x -= dx; 
     
      nodeShapes[i].style.y -= dy; 
     
      } 
     
      _step(); 
     
      return  
      true 
      ; 
     
      }    
     
      }; 
     
      zr.addShape(vscrollArea); 
     
      zr.addShape(vscroll); 
     
      zr.addShape(hscrollArea); 
     
      zr.addShape(hscroll);