提交 3f62bdc3 编写于 作者: L lang

force category 兼容 chords

上级 bed6a386
...@@ -110,10 +110,18 @@ define(function (require) { ...@@ -110,10 +110,18 @@ define(function (require) {
}, },
_getNodeQueryTarget: function (serie, group) { _getNodeQueryTarget: function (serie, group) {
var category = this._getNodeCategory(serie, group) || {}; var category = this._getNodeCategory(serie, group);
return [group, category, serie];; return [group, category, serie];;
}, },
_getEdgeQueryTarget: function (serie, edge, type) {
type = type || 'normal';
return [
(edge.itemStyle && edge.itemStyle[type]),
serie.itemStyle[type].chordStyle
];
},
_buildChords: function (series) { _buildChords: function (series) {
var graphs = []; var graphs = [];
var mainSerie = series[0]; var mainSerie = series[0];
...@@ -136,6 +144,8 @@ define(function (require) { ...@@ -136,6 +144,8 @@ define(function (require) {
return n.layout.size > 0; return n.layout.size > 0;
}, this); }, this);
graphs.push(graph); graphs.push(graph);
graph.__serie = serie;
} }
} }
if (!graphs.length) { if (!graphs.length) {
...@@ -359,9 +369,11 @@ define(function (require) { ...@@ -359,9 +369,11 @@ define(function (require) {
}); });
for (var i = 0; i < graphs.length; i++) { for (var i = 0; i < graphs.length; i++) {
graphs[i].eachEdge(function (e) { graphs[i].eachEdge(function (e) {
var queryTarget = [e.data, mainSerie]; var queryTarget = self._getEdgeQueryTarget(
graphs[i].__serie, e.data
);
e.shape.style.opacity = self.deepQuery( e.shape.style.opacity = self.deepQuery(
queryTarget, 'itemStyle.normal.chordStyle.opacity' queryTarget, 'opacity'
) * 0.1; ) * 0.1;
e.shape.modSelf(); e.shape.modSelf();
}); });
...@@ -375,9 +387,11 @@ define(function (require) { ...@@ -375,9 +387,11 @@ define(function (require) {
if (n) { // 节点有可能没数据被过滤掉了 if (n) { // 节点有可能没数据被过滤掉了
for (var j = 0; j < n.outEdges.length; j++) { for (var j = 0; j < n.outEdges.length; j++) {
var e = n.outEdges[j]; var e = n.outEdges[j];
var queryTarget = [e.data, mainSerie]; var queryTarget = self._getEdgeQueryTarget(
graphs[i].__serie, e.data
);
e.shape.style.opacity = self.deepQuery( e.shape.style.opacity = self.deepQuery(
queryTarget, 'itemStyle.normal.chordStyle.opacity' queryTarget, 'opacity'
); );
var other = graphs[0].getNodeById(e.node2.id); var other = graphs[0].getNodeById(e.node2.id);
if (other) { if (other) {
...@@ -656,7 +670,10 @@ define(function (require) { ...@@ -656,7 +670,10 @@ define(function (require) {
// 使用系列颜色 // 使用系列颜色
color = this.getColor(serie.name); color = this.getColor(serie.name);
} }
var queryTarget = [edge.data, mainSerie]; var queryTarget = this._getEdgeQueryTarget(serie, edge.data);
var queryTargetEmphasis = this._getEdgeQueryTarget(
serie, edge.data, 'emphasis'
);
var ribbon = new RibbonShape({ var ribbon = new RibbonShape({
zlevel: this.getZlevelBase(), zlevel: this.getZlevelBase(),
style: { style: {
...@@ -669,7 +686,7 @@ define(function (require) { ...@@ -669,7 +686,7 @@ define(function (require) {
target1: t1, target1: t1,
brushType: 'both', brushType: 'both',
opacity: this.deepQuery( opacity: this.deepQuery(
queryTarget, 'itemStyle.normal.chordStyle.opacity' queryTarget, 'opacity'
), ),
color: color, color: color,
lineWidth: ribbonStyle.borderWidth, lineWidth: ribbonStyle.borderWidth,
...@@ -710,7 +727,11 @@ define(function (require) { ...@@ -710,7 +727,11 @@ define(function (require) {
graph.eachEdge(function (e) { graph.eachEdge(function (e) {
var shape1 = e.node1.shape; var shape1 = e.node1.shape;
var shape2 = e.node2.shape; var shape2 = e.node2.shape;
var queryTarget = [e.data, mainSerie]; var queryTarget = this._getEdgeQueryTarget(serie, e.data);
var queryTargetEmphasis = this._getEdgeQueryTarget(
serie, e.data, 'emphasis'
);
var curveShape = new BezierCurveShape({ var curveShape = new BezierCurveShape({
zlevel: this.getZlevelBase(), zlevel: this.getZlevelBase(),
z: 0, z: 0,
...@@ -722,13 +743,24 @@ define(function (require) { ...@@ -722,13 +743,24 @@ define(function (require) {
cpX1: center[0], cpX1: center[0],
cpY1: center[1], cpY1: center[1],
lineWidth: this.deepQuery( lineWidth: this.deepQuery(
queryTarget, 'itemStyle.normal.chordStyle.width' queryTarget, 'width'
),
strokeColor: this.deepQuery(
queryTarget, 'color'
),
opacity: this.deepQuery(
queryTarget, 'opacity'
)
},
highlightStyle: {
lineWidth: this.deepQuery(
queryTargetEmphasis, 'width'
), ),
strokeColor: this.deepQuery( strokeColor: this.deepQuery(
queryTarget, 'itemStyle.normal.chordStyle.color' queryTargetEmphasis, 'color'
), ),
opacity: this.deepQuery( opacity: this.deepQuery(
queryTarget, 'itemStyle.normal.chordStyle.opacity' queryTargetEmphasis, 'opacity'
) )
} }
}); });
...@@ -878,7 +910,6 @@ define(function (require) { ...@@ -878,7 +910,6 @@ define(function (require) {
}; };
} }
else { else {
var colorIndices = {};
var colorMap = {}; var colorMap = {};
var count = 0; var count = 0;
this.getColor = function (key) { this.getColor = function (key) {
......
...@@ -65,7 +65,8 @@ define(function (require) { ...@@ -65,7 +65,8 @@ define(function (require) {
this.onmousemove = function() { this.onmousemove = function() {
onmousemove.apply(self, arguments); onmousemove.apply(self, arguments);
}; };
this._init();
this.refresh(option);
} }
/** /**
...@@ -114,14 +115,33 @@ define(function (require) { ...@@ -114,14 +115,33 @@ define(function (require) {
} }
// TODO 多个 force // TODO 多个 force
this._forceSerie = serie;
this._initSerie(serie); this._initSerie(serie);
break; break;
} }
} }
}, },
_getNodeCategory: function (serie, node) {
return serie.categories && serie.categories[node.category || 0];
},
_getNodeQueryTarget: function (serie, node) {
var category = this._getNodeCategory(serie, node) || {};
return [
node.itemStyle && node.itemStyle.normal,
category && category.itemStyle && category.itemStyle.normal,
serie.itemStyle.normal.nodeStyle
];
},
_getEdgeQueryTarget: function (serie, edge, type) {
type = type || 'normal';
return [
(edge.itemStyle && edge.itemStyle[type]),
serie.itemStyle[type].linkStyle
];
},
_initSerie: function(serie) { _initSerie: function(serie) {
this._temperature = 1; this._temperature = 1;
...@@ -271,48 +291,41 @@ define(function (require) { ...@@ -271,48 +291,41 @@ define(function (require) {
var graph = this._graph; var graph = this._graph;
var categories = this.query(serie, 'categories'); var categories = this.query(serie, 'categories');
var len = graph.nodes.length;
var legend = this.component.legend; var legend = this.component.legend;
for (var i = 0; i < len; i++) { graph.eachNode(function (node) {
var gNode = graph.nodes[i]; var category = this._getNodeCategory(serie, node.data);
var node = gNode.data; var queryTarget = [node.data, category, serie];
var styleQueryTarget = this._getNodeQueryTarget(serie, node.data);
var emphasisStyleQueryTarget = this._getNodeQueryTarget(
serie, node.data, 'emphasis'
);
var shape = new IconShape({ var shape = new IconShape({
style : { style: {
x : 0, x: 0,
y : 0 y: 0,
color: this.deepQuery(styleQueryTarget, 'color'),
// 兼容原有写法
strokeColor: this.deepQuery(styleQueryTarget, 'strokeColor')
|| this.deepQuery(styleQueryTarget, 'borderColor'),
lineWidth: this.deepQuery(styleQueryTarget, 'lineWidth')
|| this.deepQuery(styleQueryTarget, 'borderWidth')
}, },
clickable: this.query(serie, 'clickable'), highlightStyle: {
highlightStyle : {} color: this.deepQuery(styleQueryTarget, 'color', 'emphasis'),
// 兼容原有写法
strokeColor: this.deepQuery(styleQueryTarget, 'strokeColor', 'emphasis')
|| this.deepQuery(styleQueryTarget, 'borderColor', 'emphasis'),
lineWidth: this.deepQuery(styleQueryTarget, 'lineWidth', 'emphasis')
|| this.deepQuery(styleQueryTarget, 'borderWidth', 'emphasis')
},
clickable: serie.clickable
}); });
if (!shape.style.color) {
var queryTarget = []; shape.style.color = category
var shapeNormalStyle = []; ? this.getColor(category.name) : this.getColor(node.id);
var shapeEmphasisStyle = [];
queryTarget.push(node);
if (node.itemStyle) {
shapeNormalStyle.push(node.itemStyle.normal);
shapeEmphasisStyle.push(node.itemStyle.emphasis);
} }
if (typeof(node.category) !== 'undefined') {
var category = categories[node.category];
if (category) {
// 使用 Legend.getColor 配置默认 category 的默认颜色
category.itemStyle = category.itemStyle || {};
category.itemStyle.normal = category.itemStyle.normal || {};
category.itemStyle.normal.color = category.itemStyle.normal.color
|| legend.getColor(category.name);
queryTarget.push(category);
shapeNormalStyle.unshift(category.itemStyle.normal);
shapeEmphasisStyle.unshift(category.itemStyle.emphasis);
}
}
queryTarget.push(serie);
shapeNormalStyle.unshift(serie.itemStyle.normal.nodeStyle);
shapeEmphasisStyle.unshift(serie.itemStyle.emphasis.nodeStyle);
shape.style.iconType = this.deepQuery(queryTarget, 'symbol'); shape.style.iconType = this.deepQuery(queryTarget, 'symbol');
// 强制设定节点大小,否则默认映射到 minRadius 到 maxRadius 后的值 // 强制设定节点大小,否则默认映射到 minRadius 到 maxRadius 后的值
...@@ -330,18 +343,6 @@ define(function (require) { ...@@ -330,18 +343,6 @@ define(function (require) {
}); });
} }
// 节点样式
for (var k = 0; k < shapeNormalStyle.length; k++) {
if (shapeNormalStyle[k]) {
zrUtil.merge(shape.style, shapeNormalStyle[k], true);
}
}
// 节点高亮样式
for (var k = 0; k < shapeEmphasisStyle.length; k++) {
if (shapeEmphasisStyle[k]) {
zrUtil.merge(shape.highlightStyle, shapeEmphasisStyle[k], true);
}
}
// 兼容原有写法 // 兼容原有写法
shape.style.strokeColor = shape.style.strokeColor || shape.style.borderColor; shape.style.strokeColor = shape.style.strokeColor || shape.style.borderColor;
shape.style.lineWidth = shape.style.lineWidth || shape.style.borderWidth; shape.style.lineWidth = shape.style.lineWidth || shape.style.borderWidth;
...@@ -352,7 +353,7 @@ define(function (require) { ...@@ -352,7 +353,7 @@ define(function (require) {
// 节点标签样式 // 节点标签样式
if (this.deepQuery(queryTarget, 'itemStyle.normal.label.show')) { if (this.deepQuery(queryTarget, 'itemStyle.normal.label.show')) {
shape.style.text = node.name; shape.style.text = node.data.name;
shape.style.textPosition = 'inside'; shape.style.textPosition = 'inside';
var labelStyle = this.deepQuery( var labelStyle = this.deepQuery(
queryTarget, 'itemStyle.normal.label.textStyle' queryTarget, 'itemStyle.normal.label.textStyle'
...@@ -364,7 +365,7 @@ define(function (require) { ...@@ -364,7 +365,7 @@ define(function (require) {
} }
if (this.deepQuery(queryTarget, 'itemStyle.emphasis.label.show')) { if (this.deepQuery(queryTarget, 'itemStyle.emphasis.label.show')) {
shape.highlightStyle.text = node.name; shape.highlightStyle.text = node.data.name;
shape.highlightStyle.textPosition = 'inside'; shape.highlightStyle.textPosition = 'inside';
var labelStyle = this.deepQuery( var labelStyle = this.deepQuery(
queryTarget, 'itemStyle.emphasis.label.textStyle' queryTarget, 'itemStyle.emphasis.label.textStyle'
...@@ -399,20 +400,20 @@ define(function (require) { ...@@ -399,20 +400,20 @@ define(function (require) {
// series index // series index
0, 0,
// data // data
node, node.data,
// data index // data index
gNode.rawIndex, node.rawIndex,
// name // name
node.name || '', node.data.name || '',
// value // value
node.value node.data.value
); );
this.shapeList.push(shape); this.shapeList.push(shape);
this.zr.addShape(shape); this.zr.addShape(shape);
gNode.shape = shape; node.shape = shape;
} }, this);
}, },
_buildLinkShapes: function(serie) { _buildLinkShapes: function(serie) {
...@@ -470,7 +471,6 @@ define(function (require) { ...@@ -470,7 +471,6 @@ define(function (require) {
linkShape.highlightStyle.strokeColor linkShape.highlightStyle.strokeColor
= linkShape.highlightStyle.strokeColor || linkShape.highlightStyle.color; = linkShape.highlightStyle.strokeColor || linkShape.highlightStyle.color;
ecData.pack( ecData.pack(
linkShape, linkShape,
// serie // serie
...@@ -622,6 +622,34 @@ define(function (require) { ...@@ -622,6 +622,34 @@ define(function (require) {
this.option = newOption; this.option = newOption;
this.series = this.option.series; this.series = this.option.series;
} }
this.legend = this.component.legend;
if (this.legend) {
this.getColor = function(param) {
return this.legend.getColor(param);
};
this.isSelected = function(param) {
return this.legend.isSelected(param);
};
}
else {
var colorMap = {};
var count = 0;
this.getColor = function (key) {
if (colorMap[key]) {
return colorMap[key];
}
if (!colorMap[key]) {
colorMap[key] = this.zr.getColor(count++);
}
return colorMap[key];
};
this.isSelected = function () {
return true;
};
}
this._init(); this._init();
}, },
......
...@@ -867,12 +867,12 @@ define(function() { ...@@ -867,12 +867,12 @@ define(function() {
clickable: true, clickable: true,
// 分类里如果有样式会覆盖节点默认样式 // 分类里如果有样式会覆盖节点默认样式
categories: [{ // categories: [{
// itemStyle // itemStyle
// symbol // symbol
// symbolSize // symbolSize
// name // name
}], // }],
itemStyle: { itemStyle: {
normal: { normal: {
// color: 各异, // color: 各异,
...@@ -881,8 +881,6 @@ define(function() { ...@@ -881,8 +881,6 @@ define(function() {
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}, },
nodeStyle: { nodeStyle: {
brushType: 'both',
color: '#f08c2e',
borderColor: '#5182ab', borderColor: '#5182ab',
borderWidth: 1 borderWidth: 1
}, },
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册