ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-节点样式和点击事件2

最新推荐文章于 2024-07-09 15:39:29 发布

Ezrealmore

最新推荐文章于 2024-07-09 15:39:29 发布

阅读量7.2k

点赞数 2

上一篇文章：分析了现在echarts提供的功能的缺点，

和我们团队将会使用和扩展的功能。

今天这篇，主要介绍定义节点的样式方法和实现节点的点击事件。

全部的demo代码下载：将会在下一篇中放出。

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

echarts 是基于 zr（zrender）开发的组件库。增加节点样式和线段样式的话，都需要使用zrender定义新的图形数据。

 
      var  
      shape = { 
     
      id : zr.newShapeId(self.type), 
     
      shape : spType, 
     
      style : spStyle, 
     
      highlightStyle : {}, 
     
      position : [x, y], 
     
      clickable :  
      true 
      ,                    
     
      __forceIndex : i 
     
      };

简单说明：

spStyle就是根据定义的形状类型，设置的zrender样式。目前支持椭圆和方形。

 
      //node 节点形状 
     
      if 
      ( 
      typeof 
      (node.shapeType) !==  
      'undefined' 
      ){ 
     
      var  
      sptype =  node.shapeType; 
     
      if 
      (sptype) { 
     
      spType = sptype; 
     
      if 
      (spType === 
      'rectangle' 
      ) 
     
      {    
     
      //默认矩形长宽 
     
      spStyle = {width:2*r,height:2*r,x:0,y:0}; 
     
      } 
     
      if 
      (spType === 
      'ellipse' 
      ) 
     
      { 
     
      spStyle = {a:2*r,b:r,x:0,y:0}; 
     
      } 
     
      } 
     
      }

自定义的点击事件代码：

1

2

3

4

5

6

7

 
      //自定义事件 
     
      if 
      ( 
      typeof 
      (node.onclick) !==  
      'undefined' 
      ){ 
     
      if 
      (node.onclick) { 
     
      shape.clickable =  
      true 
      ; 
     
      shape.onclick = node.onclick; 
     
      } 
     
      }

1、全部扩展方法：

 
      function  
      _buildShape() { 
     
      var  
      legend = component.legend; 
     
      temperature = 1.0; 
     
      viewportWidth = zr.getWidth(); 
     
      viewportHeight = zr.getHeight(); 
     
      centroid = [viewportWidth/2, viewportHeight/2]; 
     
      for  
      ( 
      var  
      i = 0, l = series.length; i < l; i++) { 
     
      var  
      serie = series[i]; 
     
      if  
      (serie.type === ecConfig.CHART_TYPE_KFORCE) { 
     
      series[i] = self.reformOption(series[i]); 
     
      forceSerie = serie; 
     
      var  
      minRadius = self.deepQuery([serie],  
      'minRadius' 
      ); 
     
      var  
      maxRadius = self.deepQuery([serie],  
      'maxRadius' 
      ); 
     
      // ----------获取外部参数 
     
      attractiveness = self.deepQuery( 
     
      [serie],  
      'attractiveness' 
     
      ); 
     
      density = self.deepQuery([serie],  
      'density' 
      ); 
     
      initSize = self.deepQuery([serie],  
      'initSize' 
      ); 
     
      centripetal = self.deepQuery([serie],  
      'centripetal' 
      ); 
     
      coolDown = self.deepQuery([serie],  
      'coolDown' 
      ); 
     
      // ---------- 
     
      categories = self.deepQuery([serie],  
      'categories' 
      ); 
     
      // 同步selected状态 
     
      for  
      ( 
      var  
      j = 0, len = categories.length; j < len; j++) { 
     
      if  
      (categories[j].name) { 
     
      if  
      (legend){ 
     
      self.selectedMap[j] =  
     
      legend.isSelected(categories[j].name); 
     
      }  
      else  
      { 
     
      self.selectedMap[j] =  
      true 
      ; 
     
      } 
     
      } 
     
      } 
     
      linkStyle = self.deepQuery( 
     
      [serie],  
      'itemStyle.normal.linkStyle' 
     
      ); 
     
      linkEmphasisStyle = self.deepQuery( 
     
      [serie],  
      'itemStyle.emphasis.linkStyle' 
     
      ); 
     
      nodeStyle = self.deepQuery( 
     
      [serie],  
      'itemStyle.normal.nodeStyle' 
     
      ); 
     
      nodeEmphasisStyle = self.deepQuery( 
     
      [serie],  
      'itemStyle.emphasis.nodeStyle' 
     
      ); 
     
      rawNodes = self.deepQuery([serie],  
      'nodes' 
      ); 
     
      rawLinks = zrUtil.clone(self.deepQuery([serie],  
      'links' 
      )); 
     
      _filterData( 
     
      zrUtil.clone(self.deepQuery([serie],  
      'nodes' 
      )), 
     
      zrUtil.clone(self.deepQuery([serie],  
      'links' 
      )) 
     
      ); 
     
      // Reset data 
     
      nodePositions = []; 
     
      nodePrePositions = []; 
     
      nodeMasses = []; 
     
      nodeWeights = []; 
     
      linkWeights = []; 
     
      nodeMasses = []; 
     
      nodeShapes = []; 
     
      linkShapes = []; 
     
      var  
      area = viewportWidth * viewportHeight; 
     
      // Formula in 'Graph Drawing by Force-directed Placement' 
     
      k = 0.5 / attractiveness  
     
      * Math.sqrt( area / nodesRawData.length ); 
     
      // 这两方法里需要加上读取self.selectedMap判断当前系列是否显示的逻辑 
     
      _buildLinkShapes(nodesRawData, linksRawData); 
     
      _buildNodeShapes(nodesRawData, minRadius, maxRadius); 
     
      } 
     
      } 
     
      }

2、调用方法：

 
      1. 节点的点击事件 
     
      {category:0, name:  
      '乔布斯' 
      , value : 10,shapeType: 
      'rectangle' 
      , 
     
      onclick: 
      function 
      (params){ alert(params.target.shape);} 
     
      } 
     
      2. 节点的图形样式 ： 增加椭圆节点和矩形节点 
     
      椭圆 
     
      {category:1, name:  
      '丽萨-乔布斯' 
      ,value : 2,shapeType: 
      'ellipse' 
      , 
     
      itemStyle:{ normal:{a:40,b:20} 
     
      }} 
     
      a 为椭圆长半轴 b 为短半轴  
     
      矩形 
     
      {category:0, name:  
      '乔布斯' 
      , value : 10,shapeType: 
      'rectangle' 
      , 
     
      itemStyle:{ normal:{ width:100, height:80 } 
     
      }}