Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

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

提交 c980c6c0 编写于 作者: O Ovilia
浏览文件
操作

feat(sunburst): support levels config

上级 c80bb99c
隐藏空白更改
内联 并排
Showing with 126 addition and 69 deletion
src/chart/sunburst/SunburstPiece.js
浏览文件 @ c980c6c0
import * as zrUtil from 'zrender/src/core/util';
import * as graphic from '../../util/graphic';
import Model from '../../model/Model';
var NodeHighlightPolicy = {
NONE: 'none', // not downplay others
......@@ -90,7 +91,7 @@ SunburstPieceProto.updateData = function (
// Update common style
var itemStyleModel = itemModel.getModel('itemStyle');
var visualColor = getNodeColor(node, ecModel);
var visualColor = getNodeColor(node, seriesModel, ecModel);
sector.useStyle(
zrUtil.defaults(
......@@ -109,7 +110,7 @@ SunburstPieceProto.updateData = function (
var highlightPolicy = seriesModel.getShallow('highlightPolicy');
this._initEvents(sector, node, seriesModel, highlightPolicy);
this._updateLabel(seriesModel, ecModel);
this._updateLabel(seriesModel, ecModel, visualColor);
graphic.setHoverStyle(this);
};
......@@ -131,26 +132,20 @@ SunburstPieceProto.onEmphasis = function (highlightPolicy) {
SunburstPieceProto.onNormal = function () {
this.node.hostTree.root.eachNode(function (n) {
if (n.piece) {
var itemStyleModel = n.getModel('itemStyle.normal');
var style = itemStyleModel.getItemStyle();
updatePiece(n.piece, false, style.opacity, style.z);
updatePiece(n, 'normal');
}
});
};
SunburstPieceProto.onHighlight = function () {
var itemStyleModel = this.node.getModel('itemStyle.highlight');
var style = itemStyleModel.getItemStyle();
updatePiece(this, true, style.opacity, style.z);
updatePiece(this.node, 'highlight');
};
SunburstPieceProto.onDownplay = function () {
var itemStyleModel = this.node.getModel('itemStyle.downplay');
var style = itemStyleModel.getItemStyle();
updatePiece(this, false, style.opacity, style.z);
updatePiece(this.node, 'downplay');
};
SunburstPieceProto._updateLabel = function (seriesModel, ecModel) {
SunburstPieceProto._updateLabel = function (seriesModel, ecModel, visualColor) {
var itemModel = this.node.getModel();
var labelModel = itemModel.getModel('label.normal');
var labelHoverModel = itemModel.getModel('label.emphasis');
......@@ -168,14 +163,15 @@ SunburstPieceProto._updateLabel = function (seriesModel, ecModel) {
label.style, label.hoverStyle = {}, labelModel, labelHoverModel,
{
defaultText: labelModel.getShallow('show') ? text : null,
autoColor: getNodeColor(this.node, ecModel),
autoColor: visualColor,
useInsideStyle: true
}
);
label.attr('style', {
text: text,
textAlign: 'center',
textVerticalAlign: 'middle'
textVerticalAlign: 'middle',
opacity: labelModel.get('opacity')
});
var layout = this.node.getLayout();
......@@ -244,23 +240,19 @@ export default SunburstPiece;
* Get node color
*
* @param {TreeNode} node the node to get color
* @param {module:echarts/model/Series} seriesModel series
* @param {module:echarts/model/Global} ecModel echarts defaults
*/
function getNodeColor(node, ecModel) {
function getNodeColor(node, seriesModel, ecModel) {
if (node.depth === 0) {
// Virtual root node
return 'transparent';
}
else {
// Use color of the first generation
var ancestor = node;
var color = ancestor.getModel('itemStyle.normal').get('color');
while (ancestor.parentNode && !color) {
ancestor = ancestor.parentNode;
color = ancestor.getModel('itemStyle.normal').get('color');
}
// Self color or level color
var color = node.getModel('itemStyle.normal').get('color');
if (!color) {
// First-generation color
color = ecModel.option.color[getRootId(node)];
}
......@@ -299,27 +291,38 @@ function isNodeHighlighted(node, activeNode, policy) {
}
}
function updatePiece(piece, isHighlight, opacity, z) {
var sector = piece.childAt(0);
var sectorZ = z != null
? z
function updatePiece(node, state) {
var isHighlight = state === 'highlight';
// Update sector
var itemModel = node.getModel('itemStyle.' + state);
var itemZ = itemModel.get('z');
var sector = node.piece.childAt(0);
var sectorZ = itemZ != null
? itemZ
: (isHighlight ? DEFAULT_SECTOR_HIGHLIGHT_Z : DEFAULT_SECTOR_Z);
sector.attr('z', sectorZ);
sector.animateTo({
style: {
opacity: opacity || 1
opacity: itemModel.get('opacity') || 1
}
});
var text = piece.childAt(1);
var textZ = z != null
? z
// Update text
var labelModel = node.getModel('label.' + state);
var labelZ = labelModel.get('z');
var text = node.piece.childAt(1);
var textZ = labelZ != null
? labelZ
: (isHighlight ? DEFAULT_TEXT_HIGHLIGHT_Z : DEFAULT_TEXT_Z);
text.attr('z', textZ);
text.animateTo({
style: {
opacity: opacity || 1
},
z: textZ
opacity: labelModel.get('opacity') || 1
}
});
}
src/chart/sunburst/SunburstSeries.js
浏览文件 @ c980c6c0
......@@ -101,7 +101,9 @@ export default SeriesModel.extend({
animationEasing: 'quadraticInOut',
data: []
data: [],
levels: []
},
getViewRoot: function () {
......
test/sunburst.html
浏览文件 @ c980c6c0
......@@ -39,7 +39,11 @@
normal: {
opacity: 0.2
}
}
},
children: [{
name: 'Jackson',
value: 2
}]
}, {
name: 'Cousin Ben',
value: 4
......@@ -82,7 +86,7 @@
}
}
}, {
name: 'Grandpa\'s friend Mike',
name: 'Mike',
children: [{
name: 'Uncle Dan',
children: [{
......@@ -90,18 +94,22 @@
value: 3
}, {
name: 'Cousin Luck',
value: 4
value: 4,
children: [{
name: 'Nephew',
value: 2
}]
}]
}]
}, {
name: 'Grandpa\'s friend Nancy',
name: 'Nancy',
children: [{
name: 'Uncle Dan',
name: 'Uncle Nike',
children: [{
name: 'Cousin Lucy',
name: 'Cousin Betty',
value: 1
}, {
name: 'Cousin Luck',
name: 'Cousin Jenny',
value: 2
}]
}]
......@@ -111,37 +119,81 @@
series: {
type: 'sunburst',
// highlightPolicy: 'ancestor',
data: data
data: data,
radius: [0, '90%'],
label: {
normal: {
rotate: 'radial'
}
},
levels: [{
itemStyle: {
normal: {
opacity: 1
}
}
}, {
itemStyle: {
normal: {
opacity: 0.8,
color: '#f0f'
}
},
label: {
normal: {
opacity: 0.8,
formatter: '{a}: {b}'
}
}
}, {
itemStyle: {
normal: {
opacity: 0.6,
color: '#00f'
}
},
label: {
normal: {
opacity: 0.6
}
}
}, {
itemStyle: {
normal: {
opacity: 0.4
}
}
}]
}
});
setTimeout(function () {
data.push({
name: 'Stranger',
children: [{
name: 'S1',
value: 4
}, {
name: 'S2',
value: 1
}]
});
chart.setOption({
series: {
data: data
}
});
}, 3000);
// setTimeout(function () {
// data.push({
// name: 'Stranger',
// children: [{
// name: 'S1',
// value: 4
// }, {
// name: 'S2',
// value: 1
// }]
// });
// chart.setOption({
// series: {
// data: data
// }
// });
// }, 3000);
setTimeout(function () {
data.splice(1, 1);
data[0].value = 32;
chart.setOption({
series: {
data: data
}
});
}, 6000);
// setTimeout(function () {
// data.splice(1, 1);
// data[0].value = 32;
// chart.setOption({
// series: {
// data: data
// }
// });
// }, 6000);
});
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或