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

ECharts--完善的人物关系图-连线点击事件/样式/标注文字及源代码

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

在上一篇文章:ECharts教程--基于力导向布局图功能更完善的人物关系图插件扩展开发(2) 中说明在echarts力导向布局图中增加

节点样式和点击事件的代码。

今天这篇,主要介绍定义连线点击事件/样式/标注文字及源代码。

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

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

使用_buildLinkShapes(nodes, links)函数,针对定义的全部线段数据,设置线段的权重(粗细)、样式和高亮样式。

1、zrender定义线段数据:

 var shape = {
                    id : zr.newShapeId(self.type),
                    shape : 'line',
                    hoverable : false,
                    style : {
                        xStart : 0,
                        yStart : 0,
                        xEnd : 0,
                        yEnd : 0
                    },
                    clickable : true,
                    highlightStyle : {}
                };

clickable : true则是支持点击。

2、将link对象的点击事件,赋值给shape:

 if (typeof (link.onclick) !== 'undefined') {
                    if (link.onclick) {
                        shape.onclick = link.onclick;
                    }
                }

我们在定义echarts事件的时候,是通过这么一个流程来的:

应用层echarts的js--->echarts事件--->echarts传递事件给zrender处理。

3、调用方法:下面是一个links数据的一个数据demo

{source : 1, target : 0, weight : 1,
                onclick:function(params){
                     alert(params.target.style.text);
                },
                itemStyle:{
                    normal:{
                        lineWidth:10,
                        text:'丽萨-乔布斯',
                        textColor:'#030303',
                        textFont:'bold 15px verdana',
                        textPosition:'inside'
                    }
                }}

onclick是点击事件。onclick:function(params){alert(params.target.shape);

lineWidth是线段宽度。

text是标注的文字。

   textPosition 采用的zrender中的文字位置。


定义线段事件和样式全部代码:

function _buildLinkShapes(nodes, links) {
var l = links.length;
for (var i = 0; i < l; i++) {
var link = links[i];
//var source = nodes[link.source];
// var target = nodes[link.target];
var weight = link.weight || 1;
linkWeights.push(weight);
var shape = {
id : zr.newShapeId(self.type),
shape : 'line',
hoverable : false,
style : {
xStart : 0,
yStart : 0,
xEnd : 0,
yEnd : 0
},
clickable : true,
highlightStyle : {}
};
zrUtil.merge(shape.style, linkStyle);
zrUtil.merge(shape.highlightStyle, linkEmphasisStyle);
//优先级 ItemStyle > linkStyle 
if (typeof(link.itemStyle) !== 'undefined') {
if(link.itemStyle.normal){
zrUtil.merge(shape.style, link.itemStyle.normal, {
overwrite : true
});
}
if(link.itemStyle.emphasis){
zrUtil.merge(
shape.highlightStyle, 
link.itemStyle.emphasis, 
{ overwrite : true }
);
}
}
//zhao
if (typeof (link.onclick) !== 'undefined') {
if (link.onclick) {
shape.onclick = link.onclick;
}
}
linkShapes.push(shape);
self.shapeList.push(shape);
zr.addShape(shape);
}
var narr = new NDArray(linkWeights);
var max = narr.max();
if (max !== 0) {
linkWeights = narr.mul(1/max, narr).toArray();
}
}


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

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

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

给您更多信息和帮助

在这里您可以找到更多:

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

投稿:[email protected]

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

echarts教程系列
本月最热文章

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

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

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