| Current File : //home/tradevaly/www/node_modules/echarts/lib/chart/pie/PieView.js |
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var zrUtil = require("zrender/lib/core/util");
var graphic = require("../../util/graphic");
var ChartView = require("../../view/Chart");
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/**
* @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);
}
var piePieceProto = PiePiece.prototype;
piePieceProto.updateData = function (data, idx, firstCreate) {
var sector = this.childAt(0);
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 sectorShape = zrUtil.extend({}, layout);
sectorShape.label = null;
var animationTypeUpdate = seriesModel.getShallow('animationTypeUpdate');
if (firstCreate) {
sector.setShape(sectorShape);
var animationType = seriesModel.getShallow('animationType');
if (animationType === 'scale') {
sector.shape.r = layout.r0;
graphic.initProps(sector, {
shape: {
r: layout.r
}
}, seriesModel, idx);
} // Expansion
else {
sector.shape.endAngle = layout.startAngle;
graphic.updateProps(sector, {
shape: {
endAngle: layout.endAngle
}
}, seriesModel, idx);
}
} else {
if (animationTypeUpdate === 'expansion') {
// Sectors are set to be target shape and an overlaying clipPath is used for animation
sector.setShape(sectorShape);
} else {
// Transition animation from the old shape
graphic.updateProps(sector, {
shape: sectorShape
}, seriesModel, idx);
}
} // Update common style
var visualColor = data.getItemVisual(idx, 'color');
sector.useStyle(zrUtil.defaults({
lineJoin: 'bevel',
fill: visualColor
}, itemModel.getModel('itemStyle').getItemStyle()));
sector.hoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
var cursorStyle = itemModel.getShallow('cursor');
cursorStyle && sector.attr('cursor', cursorStyle); // Toggle selected
toggleItemSelected(this, data.getItemLayout(idx), seriesModel.isSelected(data.getName(idx)), seriesModel.get('selectedOffset'), seriesModel.get('animation')); // Label and text animation should be applied only for transition type animation when update
var withAnimation = !firstCreate && animationTypeUpdate === 'transition';
this._updateLabel(data, idx, withAnimation);
this.highDownOnUpdate = !seriesModel.get('silent') ? function (fromState, toState) {
var hasAnimation = seriesModel.isAnimationEnabled() && itemModel.get('hoverAnimation');
if (toState === 'emphasis') {
labelLine.ignore = labelLine.hoverIgnore;
labelText.ignore = labelText.hoverIgnore; // Sector may has animation of updating data. Force to move to the last frame
// Or it may stopped on the wrong shape
if (hasAnimation) {
sector.stopAnimation(true);
sector.animateTo({
shape: {
r: layout.r + seriesModel.get('hoverOffset')
}
}, 300, 'elasticOut');
}
} else {
labelLine.ignore = labelLine.normalIgnore;
labelText.ignore = labelText.normalIgnore;
if (hasAnimation) {
sector.stopAnimation(true);
sector.animateTo({
shape: {
r: layout.r
}
}, 300, 'elasticOut');
}
}
} : null;
graphic.setHoverStyle(this);
};
piePieceProto._updateLabel = function (data, idx, withAnimation) {
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');
if (!labelLayout || isNaN(labelLayout.x) || isNaN(labelLayout.y)) {
labelText.ignore = labelText.normalIgnore = labelText.hoverIgnore = labelLine.ignore = labelLine.normalIgnore = labelLine.hoverIgnore = true;
return;
}
var targetLineShape = {
points: labelLayout.linePoints || [[labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y]]
};
var targetTextStyle = {
x: labelLayout.x,
y: labelLayout.y
};
if (withAnimation) {
graphic.updateProps(labelLine, {
shape: targetLineShape
}, seriesModel, idx);
graphic.updateProps(labelText, {
style: targetTextStyle
}, seriesModel, idx);
} else {
labelLine.attr({
shape: targetLineShape
});
labelText.attr({
style: targetTextStyle
});
}
labelText.attr({
rotation: labelLayout.rotation,
origin: [labelLayout.x, labelLayout.y],
z2: 10
});
var labelModel = itemModel.getModel('label');
var labelHoverModel = itemModel.getModel('emphasis.label');
var labelLineModel = itemModel.getModel('labelLine');
var labelLineHoverModel = itemModel.getModel('emphasis.labelLine');
var visualColor = data.getItemVisual(idx, 'color');
graphic.setLabelStyle(labelText.style, labelText.hoverStyle = {}, labelModel, labelHoverModel, {
labelFetcher: data.hostModel,
labelDataIndex: idx,
defaultText: labelLayout.text,
autoColor: visualColor,
useInsideStyle: !!labelLayout.inside
}, {
textAlign: labelLayout.textAlign,
textVerticalAlign: labelLayout.verticalAlign,
opacity: data.getItemVisual(idx, 'opacity')
});
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());
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 PieView = ChartView.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 animationType = seriesModel.get('animationType');
var animationTypeUpdate = seriesModel.get('animationTypeUpdate');
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); // Default expansion animation
if (isFirstRender && animationType !== 'scale') {
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);
if (!isFirstRender && animationTypeUpdate !== 'transition') {
piePiece.eachChild(function (child) {
child.stopAnimation(true);
});
}
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 && data.count() > 0 && (isFirstRender ? animationType !== 'scale' : animationTypeUpdate !== 'transition')) {
var shape = data.getItemLayout(0);
for (var s = 1; isNaN(shape.startAngle) && s < data.count(); ++s) {
shape = data.getItemLayout(s);
}
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, isFirstRender));
} else {
// clipPath is used in first-time animation, so remove it when otherwise. See: #8994
group.removeClipPath();
}
this._data = data;
},
dispose: function () {},
_createClipPath: function (cx, cy, r, startAngle, clockwise, cb, seriesModel, isFirstRender) {
var clipPath = new graphic.Sector({
shape: {
cx: cx,
cy: cy,
r0: 0,
r: r,
startAngle: startAngle,
endAngle: startAngle,
clockwise: clockwise
}
});
var initOrUpdate = isFirstRender ? graphic.initProps : graphic.updateProps;
initOrUpdate(clipPath, {
shape: {
endAngle: startAngle + (clockwise ? 1 : -1) * Math.PI * 2
}
}, seriesModel, cb);
return clipPath;
},
/**
* @implement
*/
containPoint: function (point, seriesModel) {
var data = seriesModel.getData();
var itemLayout = data.getItemLayout(0);
if (itemLayout) {
var dx = point[0] - itemLayout.cx;
var dy = point[1] - itemLayout.cy;
var radius = Math.sqrt(dx * dx + dy * dy);
return radius <= itemLayout.r && radius >= itemLayout.r0;
}
}
});
var _default = PieView;
module.exports = _default;