现在位置首页 / 项目实战 /正文

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

作者: IT小兵 | 2014年4月22日| 热度:℃ | 评论: |参与:

在上一篇文章:ECharts教程--基于力导向布局图功能更完善的人物关系图插件扩展开发(1) 分析了现在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};
                        }
                    }
                }

自定义的点击事件代码:

 //自定义事件
                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 }
    }}


下一篇介绍一下,echarts教程第3部--扩展线的样式和点击事件。


转发注明:IT分享  http://www.suchso.com 


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询