From 8e0b1b010dbc782c9b353e4e7d63b25ae5b9a5f7 Mon Sep 17 00:00:00 2001 From: kener Date: Tue, 25 Jun 2013 12:56:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=9B=E5=AF=BC=E5=B8=83=E5=B1=80legend?= =?UTF-8?q?=E5=8D=87=E7=BA=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/example/force.html | 129 +++++++++++++++++++++------------------- src/chart/force.js | 20 +++++-- src/component/legend.js | 25 +++++++- src/config.js | 37 +++++++++++- 4 files changed, 142 insertions(+), 69 deletions(-) diff --git a/doc/example/force.html b/doc/example/force.html index 914a8560a..51f6b8f68 100644 --- a/doc/example/force.html +++ b/doc/example/force.html @@ -72,77 +72,82 @@ option = { trigger: 'axis' }, legend: { - data:['利润', '支出', '收入'] + data:['收入','支出'] }, series : [ { type:'force', - categories : [{ - style : { - brushType : 'both', - color : '#f08c2e', - strokeColor : '#5182ab', - lineWidth : 2 + categories : [ + { + name: '收入', + itemStyle: { + normal: { + color : '#f08c2e', + label: { + show: true, + position: 'outer' + // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE + }, + nodeStyle : { + brushType : 'both', + color : '#f08c2e', + strokeColor : '#5182ab', + lineWidth : 2 + }, + lineStyle : { + strokeColor : '#5182ab' + } + }, + emphasis: { + //同上 + } + }, + style : { //这个改为上面的格式吧，跟其他保持一致，legend就有效了 + brushType : 'both', + color : '#f08c2e', + strokeColor : '#5182ab', + lineWidth : 2 + } + }, + { + name:'支出', + itemStyle: { + normal: { + color : '#c5dcf0' + } + }, + style : { + brushType : 'both', + color : '#c5dcf0', + strokeColor : '#5182ab', + lineWidth : 2 + } } - }, { - style : { - brushType : 'both', - color : '#c5dcf0', - strokeColor : '#5182ab', - lineWidth : 2 - } - }], + ], minRadius : 5, maxRadius : 10, density : 1.2, - nodes:[{ - category : 0, - value : 200, - }, { - category : 0, - value : 200, - }, { - category : 1, - value : 200, - }, { - category : 1, - value : 200 - }, { - //孤立点 - value : 300, - style : { - color : '#b10101' + nodes:[ + {category : 0, value : 200}, + {category : 0, value : 200}, + {category : 1, value : 200}, + {category : 1, value : 200}, + { + value : 300, //孤立点 + style : { + color : '#b10101' + } } - }], - links : [{ - source : 0, - target : 1, - weight : 1 - }, { - source : 1, - target : 2, - weight : 1 - }, { - 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 - }] + ], + links : [ + {source : 0, target : 1, weight : 1}, + {source : 1, target : 2, weight : 1}, + {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} + ] } ] }; diff --git a/src/chart/force.js b/src/chart/force.js index 047dcc0d1..76f032159 100644 --- a/src/chart/force.js +++ b/src/chart/force.js @@ -77,7 +77,7 @@ define(function(require) { var mouseX, mouseY; function _buildShape() { - + var legend = component.legend; temperature = 1.0; viewportWidth = zr.getWidth(); viewportHeight = zr.getHeight(); @@ -95,6 +95,18 @@ define(function(require) { density = self.deepQuery([serie], 'density'); 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'); nodeStyle = self.deepQuery([serie], 'nodeStyle'); @@ -105,7 +117,8 @@ define(function(require) { var area = viewportWidth * viewportHeight; // Formula in 'Graph Drawing by Force-directed Placement' k = 0.5 * Math.sqrt( area / nodesRawData.length ); - + + // 这两方法里需要加上读取self.selectedMap判断当前系列是否显示的逻辑 _buildLinkShapes(nodesRawData, linksRawData); _buildNodeShapes(nodesRawData, minRadius, maxRadius); } @@ -407,7 +420,6 @@ define(function(require) { // 处理完拖拽事件后复位 self.isDragstart = false; - // 我想你需要这个 zr.on(zrConfig.EVENT.MOUSEMOVE, _onmousemove); } @@ -426,7 +438,7 @@ define(function(require) { // 别status = {}赋值啊！！ status.dragIn = true; - //你自己refresh的话把他设为false，设true就会重新掉refresh接口 + //你自己refresh的话把他设为false，设true就会重新调refresh接口 status.needRefresh = false; // 处理完拖拽事件后复位 diff --git a/src/component/legend.js b/src/component/legend.js index 5a96b111f..db0bce286 100644 --- a/src/component/legend.js +++ b/src/component/legend.js @@ -283,6 +283,8 @@ define(function (require) { */ function _getSeriesByName(name) { var series = option.series; + var hasFind; + var data; for (var i = 0, l = series.length; i < l; i++) { if (series[i].name == name) { // 系列名称优先 @@ -291,8 +293,8 @@ define(function (require) { if (series[i].type == ecConfig.CHART_TYPE_PIE) { // 饼图得查找里面的数据名字 - var hasFind = false; - var data = series[i].data; + hasFind = false; + data = series[i].data; for (var j = 0, k = data.length; j < k; j++) { if (data[j].name == name) { hasFind = true; @@ -303,6 +305,22 @@ define(function (require) { 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; } @@ -542,6 +560,9 @@ define(function (require) { }, bar : function (ctx, style) { 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); } } diff --git a/src/config.js b/src/config.js index b866bc6d9..6d806325c 100644 --- a/src/config.js +++ b/src/config.js @@ -443,6 +443,41 @@ define(function() { density : 1.0, // 分类里如果有样式会覆盖节点默认样式 categories : [], + itemStyle: { + normal: { + // color: 各异, + label: { + show: true, + position: 'outer' + // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE + }, + nodeStyle : { + brushType : 'both', + color : '#f08c2e', + strokeColor : '#5182ab' + }, + lineStyle : { + strokeColor : '#5182ab' + } + }, + emphasis: { + // color: 各异, + label: { + show: false, + position: 'outer' + // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE + }, + nodeStyle : { + brushType : 'both', + color : '#f08c2e', + strokeColor : '#5182ab' + }, + lineStyle : { + strokeColor : '#5182ab' + } + } + }, + //建议下面两个改成上面的格式 nodeStyle : { brushType : 'both', color : '#f08c2e', @@ -450,7 +485,7 @@ define(function() { }, linkStyle : { strokeColor : '#5182ab' - }, + } }, EVENT: { -- GitLab