Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 8e0b1b01 编写于 作者: K kener
浏览文件
操作

力导布局legend升级

上级 4b93a1a8
显示空白变更内容
内联 并排
Showing with 142 addition and 69 deletion
doc/example/force.html
浏览文件 @ 8e0b1b01
...@@ -72,77 +72,82 @@ option = { ...@@ -72,77 +72,82 @@ option = {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data:['利润', '支出', '收入'] data:['收入','支出']
}, },
series : [ series : [
{ {
type:'force', type:'force',
categories : [{ categories : [
style : { {
name: '收入',
itemStyle: {
normal: {
color : '#f08c2e',
label: {
show: true,
position: 'outer'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : {
brushType : 'both', brushType : 'both',
color : '#f08c2e', color : '#f08c2e',
strokeColor : '#5182ab', strokeColor : '#5182ab',
lineWidth : 2 lineWidth : 2
},
lineStyle : {
strokeColor : '#5182ab'
} }
}, { },
emphasis: {
//同上
}
},
style : { //这个改为上面的格式吧，跟其他保持一致，legend就有效了
brushType : 'both',
color : '#f08c2e',
strokeColor : '#5182ab',
lineWidth : 2
}
},
{
name:'支出',
itemStyle: {
normal: {
color : '#c5dcf0'
}
},
style : { style : {
brushType : 'both', brushType : 'both',
color : '#c5dcf0', color : '#c5dcf0',
strokeColor : '#5182ab', strokeColor : '#5182ab',
lineWidth : 2 lineWidth : 2
} }
}], }
],
minRadius : 5, minRadius : 5,
maxRadius : 10, maxRadius : 10,
density : 1.2, density : 1.2,
nodes:[{ nodes:[
category : 0, {category : 0, value : 200},
value : 200, {category : 0, value : 200},
}, { {category : 1, value : 200},
category : 0, {category : 1, value : 200},
value : 200, {
}, { value : 300, //孤立点
category : 1,
value : 200,
}, {
category : 1,
value : 200
}, {
//孤立点
value : 300,
style : { style : {
color : '#b10101' color : '#b10101'
} }
}], }
links : [{ ],
source : 0, links : [
target : 1, {source : 0, target : 1, weight : 1},
weight : 1 {source : 1, target : 2, weight : 1},
}, { {source : 2, target : 3, weight : 1},
source : 1, {source : 3, target : 0, weight : 1},
target : 2, {source : 0, target : 2, weight : 1},
weight : 1 {source : 1, target : 3, weight : 1},
}, { {source : 1, target : 4, weight : 2}
source : 2, ]
target : 3,
weight : 1
}, {
source : 3,
target : 0,
weight : 1
}, {
source : 0,
target : 2,
weight : 1
}, {
source : 1,
target : 3,
weight : 1
}, {
source : 1,
target : 4,
weight : 2
}]
} }
] ]
}; };
......
src/chart/force.js
浏览文件 @ 8e0b1b01
...@@ -77,7 +77,7 @@ define(function(require) { ...@@ -77,7 +77,7 @@ define(function(require) {
var mouseX, mouseY; var mouseX, mouseY;
function _buildShape() { function _buildShape() {
var legend = component.legend;
temperature = 1.0; temperature = 1.0;
viewportWidth = zr.getWidth(); viewportWidth = zr.getWidth();
viewportHeight = zr.getHeight(); viewportHeight = zr.getHeight();
...@@ -96,6 +96,18 @@ define(function(require) { ...@@ -96,6 +96,18 @@ define(function(require) {
categories = self.deepQuery([serie], 'categories'); categories = self.deepQuery([serie], 'categories');
// 同步selected状态
for (var j = 0, len = categories.length; j < len; j++) {
if (categories[j].name) {
if (legend){
self.selectedMap[categories[j].name] =
legend.isSelected(categories[j].name);
} else {
self.selectedMap[categories[j].name] = true;
}
}
}
linkStyle = self.deepQuery([serie], 'linkStyle'); linkStyle = self.deepQuery([serie], 'linkStyle');
nodeStyle = self.deepQuery([serie], 'nodeStyle'); nodeStyle = self.deepQuery([serie], 'nodeStyle');
...@@ -106,6 +118,7 @@ define(function(require) { ...@@ -106,6 +118,7 @@ define(function(require) {
// Formula in 'Graph Drawing by Force-directed Placement' // Formula in 'Graph Drawing by Force-directed Placement'
k = 0.5 * Math.sqrt( area / nodesRawData.length ); k = 0.5 * Math.sqrt( area / nodesRawData.length );
// 这两方法里需要加上读取self.selectedMap判断当前系列是否显示的逻辑
_buildLinkShapes(nodesRawData, linksRawData); _buildLinkShapes(nodesRawData, linksRawData);
_buildNodeShapes(nodesRawData, minRadius, maxRadius); _buildNodeShapes(nodesRawData, minRadius, maxRadius);
} }
...@@ -407,7 +420,6 @@ define(function(require) { ...@@ -407,7 +420,6 @@ define(function(require) {
// 处理完拖拽事件后复位 // 处理完拖拽事件后复位
self.isDragstart = false; self.isDragstart = false;
// 我想你需要这个
zr.on(zrConfig.EVENT.MOUSEMOVE, _onmousemove); zr.on(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
} }
...@@ -426,7 +438,7 @@ define(function(require) { ...@@ -426,7 +438,7 @@ define(function(require) {
// 别status = {}赋值啊！！ // 别status = {}赋值啊！！
status.dragIn = true; status.dragIn = true;
//你自己refresh的话把他设为false，设true就会重新掉refresh接口 //你自己refresh的话把他设为false，设true就会重新调refresh接口
status.needRefresh = false; status.needRefresh = false;
// 处理完拖拽事件后复位 // 处理完拖拽事件后复位
......
src/component/legend.js
浏览文件 @ 8e0b1b01
...@@ -283,6 +283,8 @@ define(function (require) { ...@@ -283,6 +283,8 @@ define(function (require) {
*/ */
function _getSeriesByName(name) { function _getSeriesByName(name) {
var series = option.series; var series = option.series;
var hasFind;
var data;
for (var i = 0, l = series.length; i < l; i++) { for (var i = 0, l = series.length; i < l; i++) {
if (series[i].name == name) { if (series[i].name == name) {
// 系列名称优先 // 系列名称优先
...@@ -291,8 +293,8 @@ define(function (require) { ...@@ -291,8 +293,8 @@ define(function (require) {
if (series[i].type == ecConfig.CHART_TYPE_PIE) { if (series[i].type == ecConfig.CHART_TYPE_PIE) {
// 饼图得查找里面的数据名字 // 饼图得查找里面的数据名字
var hasFind = false; hasFind = false;
var data = series[i].data; data = series[i].data;
for (var j = 0, k = data.length; j < k; j++) { for (var j = 0, k = data.length; j < k; j++) {
if (data[j].name == name) { if (data[j].name == name) {
hasFind = true; hasFind = true;
...@@ -303,6 +305,22 @@ define(function (require) { ...@@ -303,6 +305,22 @@ define(function (require) {
return series[i]; return series[i];
} }
} }
else if (series[i].type == ecConfig.CHART_TYPE_FORCE) {
// 力导布局查找categories配置
hasFind = false;
data = series[i].categories;
for (var j = 0, k = data.length; j < k; j++) {
if (data[j].name == name) {
data = data[j];
data.type = ecConfig.CHART_TYPE_FORCE;
hasFind = true;
break;
}
}
if (hasFind) {
return data;
}
}
} }
return; return;
} }
...@@ -542,6 +560,9 @@ define(function (require) { ...@@ -542,6 +560,9 @@ define(function (require) {
}, },
bar : function (ctx, style) { bar : function (ctx, style) {
ctx.rect(style.x, style.y + 1, style.width, style.height - 2); ctx.rect(style.x, style.y + 1, style.width, style.height - 2);
},
force : function(ctx, style) {
require('zrender/shape').get('icon').get('circle')(ctx, style);
} }
} }
......
src/config.js
浏览文件 @ 8e0b1b01
...@@ -443,14 +443,49 @@ define(function() { ...@@ -443,14 +443,49 @@ define(function() {
density : 1.0, density : 1.0,
// 分类里如果有样式会覆盖节点默认样式 // 分类里如果有样式会覆盖节点默认样式
categories : [], categories : [],
itemStyle: {
normal: {
// color: 各异,
label: {
show: true,
position: 'outer'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : { nodeStyle : {
brushType : 'both', brushType : 'both',
color : '#f08c2e', color : '#f08c2e',
strokeColor : '#5182ab' strokeColor : '#5182ab'
}, },
linkStyle : { lineStyle : {
strokeColor : '#5182ab'
}
},
emphasis: {
// color: 各异,
label: {
show: false,
position: 'outer'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : {
brushType : 'both',
color : '#f08c2e',
strokeColor : '#5182ab' strokeColor : '#5182ab'
}, },
lineStyle : {
strokeColor : '#5182ab'
}
}
},
//建议下面两个改成上面的格式
nodeStyle : {
brushType : 'both',
color : '#f08c2e',
strokeColor : '#5182ab'
},
linkStyle : {
strokeColor : '#5182ab'
}
}, },
EVENT: { EVENT: {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或