define(function (require) {
var graphic = require('../../util/graphic');
var zrUtil = require('zrender/core/util');
/**
* @param {module:echarts/model/Series} seriesModel
* @param {boolean} hasAnimation
* @inner
*/
function updateDataSelected(uid, seriesModel, hasAnimation, api) {
var data = seriesModel.getData();
var dataIndex = this.dataIndex;
var name = data.getName(dataIndex);
var selectedOffset = seriesModel.get('selectedOffset');
api.dispatchAction({
type: 'pieToggleSelect',
from: uid,
name: name,
seriesId: seriesModel.id
});
data.each(function (idx) {
toggleItemSelected(
data.getItemGraphicEl(idx),
data.getItemLayout(idx),
seriesModel.isSelected(data.getName(idx)),
selectedOffset,
hasAnimation
);
});
}
/**
* @param {module:zrender/graphic/Sector} el
* @param {Object} layout
* @param {boolean} isSelected
* @param {number} selectedOffset
* @param {boolean} hasAnimation
* @inner
*/
function toggleItemSelected(el, layout, isSelected, selectedOffset, hasAnimation) {
var midAngle = (layout.startAngle + layout.endAngle) / 2;
var dx = Math.cos(midAngle);
var dy = Math.sin(midAngle);
var offset = isSelected ? selectedOffset : 0;
var position = [dx * offset, dy * offset];
hasAnimation
// animateTo will stop revious animation like update transition
? el.animate()
.when(200, {
position: position
})
.start('bounceOut')
: el.attr('position', position);
}
/**
* Piece of pie including Sector, Label, LabelLine
* @constructor
* @extends {module:zrender/graphic/Group}
*/
function PiePiece(data, idx) {
graphic.Group.call(this);
var sector = new graphic.Sector({
z2: 2
});
var polyline = new graphic.Polyline();
var text = new graphic.Text();
this.add(sector);
this.add(polyline);
this.add(text);
this.updateData(data, idx, true);
// Hover to change label and labelLine
function onEmphasis() {
polyline.ignore = polyline.hoverIgnore;
text.ignore = text.hoverIgnore;
}
function onNormal() {
polyline.ignore = polyline.normalIgnore;
text.ignore = text.normalIgnore;
}
this.on('emphasis', onEmphasis)
.on('normal', onNormal)
.on('mouseover', onEmphasis)
.on('mouseout', onNormal);
}
var piePieceProto = PiePiece.prototype;
function getLabelStyle(data, idx, state, labelModel, labelPosition) {
var textStyleModel = labelModel.getModel('textStyle');
var isLabelInside = labelPosition === 'inside' || labelPosition === 'inner';
return {
fill: textStyleModel.getTextColor()
|| (isLabelInside ? '#fff' : data.getItemVisual(idx, 'color')),
opacity: data.getItemVisual(idx, 'opacity'),
textFont: textStyleModel.getFont(),
text: zrUtil.retrieve(
data.hostModel.getFormattedLabel(idx, state), data.getName(idx)
)
};
}
piePieceProto.updateData = function (data, idx, firstCreate) {
var sector = this.childAt(0);
var seriesModel = data.hostModel;
var itemModel = data.getItemModel(idx);
var layout = data.getItemLayout(idx);
var sectorShape = zrUtil.extend({}, layout);
sectorShape.label = null;
if (firstCreate) {
sector.setShape(sectorShape);
sector.shape.endAngle = layout.startAngle;
graphic.updateProps(sector, {
shape: {
endAngle: layout.endAngle
}
}, seriesModel, idx);
}
else {
graphic.updateProps(sector, {
shape: sectorShape
}, seriesModel, idx);
}
// Update common style
var itemStyleModel = itemModel.getModel('itemStyle');
var visualColor = data.getItemVisual(idx, 'color');
sector.useStyle(
zrUtil.defaults(
{
fill: visualColor
},
itemStyleModel.getModel('normal').getItemStyle()
)
);
sector.hoverStyle = itemStyleModel.getModel('emphasis').getItemStyle();
// Toggle selected
toggleItemSelected(
this,
data.getItemLayout(idx),
itemModel.get('selected'),
seriesModel.get('selectedOffset'),
seriesModel.get('animation')
);
function onEmphasis() {
// Sector may has animation of updating data. Force to move to the last frame
// Or it may stopped on the wrong shape
sector.stopAnimation(true);
sector.animateTo({
shape: {
r: layout.r + 10
}
}, 300, 'elasticOut');
}
function onNormal() {
sector.stopAnimation(true);
sector.animateTo({
shape: {
r: layout.r
}
}, 300, 'elasticOut');
}
sector.off('mouseover').off('mouseout').off('emphasis').off('normal');
if (itemModel.get('hoverAnimation')) {
sector
.on('mouseover', onEmphasis)
.on('mouseout', onNormal)
.on('emphasis', onEmphasis)
.on('normal', onNormal);
}
this._updateLabel(data, idx);
graphic.setHoverStyle(this);
};
piePieceProto._updateLabel = function (data, idx) {
var labelLine = this.childAt(1);
var labelText = this.childAt(2);
var seriesModel = data.hostModel;
var itemModel = data.getItemModel(idx);
var layout = data.getItemLayout(idx);
var labelLayout = layout.label;
var visualColor = data.getItemVisual(idx, 'color');
graphic.updateProps(labelLine, {
shape: {
points: labelLayout.linePoints || [
[labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y]
]
}
}, seriesModel, idx);
graphic.updateProps(labelText, {
style: {
x: labelLayout.x,
y: labelLayout.y
}
}, seriesModel, idx);
labelText.attr({
style: {
textVerticalAlign: labelLayout.verticalAlign,
textAlign: labelLayout.textAlign,
textFont: labelLayout.font
},
rotation: labelLayout.rotation,
origin: [labelLayout.x, labelLayout.y],
z2: 10
});
var labelModel = itemModel.getModel('label.normal');
var labelHoverModel = itemModel.getModel('label.emphasis');
var labelLineModel = itemModel.getModel('labelLine.normal');
var labelLineHoverModel = itemModel.getModel('labelLine.emphasis');
var labelPosition = labelModel.get('position') || labelHoverModel.get('position');
labelText.setStyle(getLabelStyle(data, idx, 'normal', labelModel, labelPosition));
labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
labelText.hoverIgnore = !labelHoverModel.get('show');
labelLine.ignore = labelLine.normalIgnore = !labelLineModel.get('show');
labelLine.hoverIgnore = !labelLineHoverModel.get('show');
// Default use item visual color
labelLine.setStyle({
stroke: visualColor,
opacity: data.getItemVisual(idx, 'opacity')
});
labelLine.setStyle(labelLineModel.getModel('lineStyle').getLineStyle());
labelText.hoverStyle = getLabelStyle(data, idx, 'emphasis', labelHoverModel, labelPosition);
labelLine.hoverStyle = labelLineHoverModel.getModel('lineStyle').getLineStyle();
var smooth = labelLineModel.get('smooth');
if (smooth && smooth === true) {
smooth = 0.4;
}
labelLine.setShape({
smooth: smooth
});
};
zrUtil.inherits(PiePiece, graphic.Group);
// Pie view
var Pie = require('../../view/Chart').extend({
type: 'pie',
init: function () {
var sectorGroup = new graphic.Group();
this._sectorGroup = sectorGroup;
},
render: function (seriesModel, ecModel, api, payload) {
if (payload && (payload.from === this.uid)) {
return;
}
var data = seriesModel.getData();
var oldData = this._data;
var group = this.group;
var hasAnimation = ecModel.get('animation');
var isFirstRender = !oldData;
var onSectorClick = zrUtil.curry(
updateDataSelected, this.uid, seriesModel, hasAnimation, api
);
var selectedMode = seriesModel.get('selectedMode');
data.diff(oldData)
.add(function (idx) {
var piePiece = new PiePiece(data, idx);
if (isFirstRender) {
piePiece.eachChild(function (child) {
child.stopAnimation(true);
});
}
selectedMode && piePiece.on('click', onSectorClick);
data.setItemGraphicEl(idx, piePiece);
group.add(piePiece);
})
.update(function (newIdx, oldIdx) {
var piePiece = oldData.getItemGraphicEl(oldIdx);
piePiece.updateData(data, newIdx);
piePiece.off('click');
selectedMode && piePiece.on('click', onSectorClick);
group.add(piePiece);
data.setItemGraphicEl(newIdx, piePiece);
})
.remove(function (idx) {
var piePiece = oldData.getItemGraphicEl(idx);
group.remove(piePiece);
})
.execute();
if (hasAnimation && isFirstRender && data.count() > 0) {
var shape = data.getItemLayout(0);
var r = Math.max(api.getWidth(), api.getHeight()) / 2;
var removeClipPath = zrUtil.bind(group.removeClipPath, group);
group.setClipPath(this._createClipPath(
shape.cx, shape.cy, r, shape.startAngle, shape.clockwise, removeClipPath, seriesModel
));
}
this._data = data;
},
_createClipPath: function (
cx, cy, r, startAngle, clockwise, cb, seriesModel
) {
var clipPath = new graphic.Sector({
shape: {
cx: cx,
cy: cy,
r0: 0,
r: r,
startAngle: startAngle,
endAngle: startAngle,
clockwise: clockwise
}
});
graphic.initProps(clipPath, {
shape: {
endAngle: startAngle + (clockwise ? 1 : -1) * Math.PI * 2
}
}, seriesModel, cb);
return clipPath;
}
});
return Pie;
});
|
Download
