Skip to content

I
incubator-echarts

z1593 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 9c44687a 编写于 作者: L lang
浏览文件
操作

Optimize pie

上级 66f1ccc9
隐藏空白更改
内联 并排
Showing with 215 addition and 191 deletion
src/chart/bar/BarView.js
浏览文件 @ 9c44687a
......@@ -129,8 +129,7 @@ define(function (require) {
var labelText = seriesModel.getFormattedLabel(idx, 'normal')
|| data.getRawValue(idx);
var rectStyle = rect.style;
var showLabel = labelModel.get('show');
if (showLabel) {
if (labelModel.get('show')) {
setLabel(
rectStyle, labelModel, color, labelText, labelPositionOutside
);
......@@ -138,7 +137,7 @@ define(function (require) {
else {
rectStyle.text = '';
}
if (zrUtil.retrieve(hoverLabelModel.get('show'), showLabel)) {
if (hoverLabelModel.get('show')) {
setLabel(
hoverStyle, hoverLabelModel, color, labelText, labelPositionOutside
);
......
src/chart/helper/Symbol.js
浏览文件 @ 9c44687a
......@@ -18,7 +18,7 @@ define(function (require) {
function Symbol(data, idx, api) {
graphic.Group.call(this);
this.updateSymbol(data, idx, api);
this.updateData(data, idx, api);
}
var symbolProto = Symbol.prototype;
......@@ -53,7 +53,7 @@ define(function (require) {
* @param {number} idx
* @param {module:echarts/ExtensionAPI} api
*/
symbolProto.updateSymbol = function (data, idx, api) {
symbolProto.updateData = function (data, idx, api) {
var symbolType = data.getItemVisual(idx, 'symbol') || 'circle';
if (symbolType !== this._symbolType) {
......@@ -99,15 +99,14 @@ define(function (require) {
|| data.get(lastDim, idx);
var elStyle = symbolPath.style;
var showLabel = labelModel.get('show');
if (showLabel) {
if (labelModel.get('show')) {
graphic.setText(elStyle, labelModel, color);
elStyle.text = labelText;
}
else {
elStyle.text = '';
}
if (zrUtil.retrieve(hoverLabelModel.get('show'), showLabel)) {
if (hoverLabelModel.get('show')) {
graphic.setText(hoverStyle, hoverLabelModel, color);
hoverStyle.text = labelText;
}
......
src/chart/helper/SymbolDraw.js
浏览文件 @ 9c44687a
......@@ -16,6 +16,7 @@ define(function (require) {
var symbolDrawProto = SymbolDraw.prototype;
/**
* Update symbols draw by new data
* @param {module:echarts/data/List} data
* @param {module:echarts/ExtensionAPI} api
* @param {Array.<boolean>} [isIgnore]
......@@ -51,7 +52,7 @@ define(function (require) {
symbolEl.attr('position', point);
}
else {
symbolEl.updateSymbol(data, newIdx, api);
symbolEl.updateData(data, newIdx, api);
api.updateGraphicEl(symbolEl, {
position: point
});
......
src/chart/pie/PieSeries.js
浏览文件 @ 9c44687a
......@@ -43,7 +43,7 @@ define(function(require) {
getDataParams: function (dataIndex) {
var data = this._data;
var params = seriesModelProto.getDataParams.call(this, dataIndex);
params.percent = data.get('value', dataIndex) / data.getSum('value');
params.percent = (data.get('value', dataIndex) / data.getSum('value')) * 100;
params.$vars.push('percent');
return params;
......@@ -84,15 +84,17 @@ define(function(require) {
},
// Enabled when label.normal.position is 'outer'
labelLine: {
show: true,
// 引导线两段中的第一段长度
length: 20,
// 引导线两段中的第二段长度
length2: 5,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
normal: {
show: true,
// 引导线两段中的第一段长度
length: 20,
// 引导线两段中的第二段长度
length2: 5,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
},
itemStyle: {
......
src/chart/pie/PieView.js
浏览文件 @ 9c44687a
......@@ -32,16 +32,6 @@ define(function (require) {
});
}
function updateElementSelect(el, pos, hasAnimation) {
hasAnimation
// animateTo will stop revious animation like update transition
? el.animate()
.when(200, {
position: pos
})
.start('bounceOut')
: el.attr('position', pos);
}
/**
* @param {module:zrender/graphic/Sector} el
* @param {Object} layout
......@@ -58,66 +48,177 @@ define(function (require) {
var offset = isSelected ? selectedOffset : 0;
var position = [dx * offset, dy * offset];
updateElementSelect(el, position, hasAnimation);
updateElementSelect(el.__labelLine, position, hasAnimation);
updateElementSelect(el.__labelText, position, hasAnimation);
hasAnimation
// animateTo will stop revious animation like update transition
? el.animate()
.when(200, {
position: position
})
.start('bounceOut')
: el.attr('position', position);
}
/**
* Create sector, label, and label line for each data
* @param {Object} layout
* @param {string} text
* @param {boolean} hasAnimation
* @return {module:zrender/graphic/Sector}
* Piece of pie including Sector, Label, LabelLine
* @constructor
* @extends {module:zrender/graphic/Group}
*/
function createSectorAndLabel(layout, text, hasAnimation, api) {
var shape = zrUtil.extend({}, layout);
delete shape.label;
function PiePiece(data, idx, api) {
var sector = new graphic.Sector({
shape: shape
});
graphic.Group.call(this);
var sector = new graphic.Sector();
var polyline = new graphic.Polyline();
var text = new graphic.Text();
this.add(sector);
this.add(polyline);
this.add(text);
this.updateData(data, idx, api, true);
function onEmphasis() {
polyline.ignore = polyline.hoverIgnore;
text.ignore = text.hoverIgnore;
}
function onNormal() {
polyline.ignore = polyline.normalIgnore;
text.ignore = text.normalIgnore;
}
this.on('emphasis', onEmphasis);
this.on('normal', onNormal);
this.on('mouseover', onEmphasis);
this.on('mouseout', onNormal);
}
var piePieceProto = PiePiece.prototype;
piePieceProto.updateData = function (data, idx, api, 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;
if (firstCreate) {
sector.setShape(sectorShape);
sector.shape.endAngle = layout.startAngle;
api.updateGraphicEl(sector, {
shape: {
endAngle: layout.endAngle
}
});
}
else {
api.updateGraphicEl(sector, {
shape: sectorShape
});
}
var labelLayout = layout.label;
var labelLine = new graphic.Polyline({
api.updateGraphicEl(labelLine, {
shape: {
points: labelLayout.linePoints || [
[layout.x, layout.y], [layout.x, layout.y], [layout.x, layout.y]
[labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y]
]
},
silent: true
}
});
var labelText = new graphic.Text({
api.updateGraphicEl(labelText, {
style: {
x: labelLayout.x,
y: labelLayout.y,
text: text,
y: labelLayout.y
}
});
labelText.attr({
style: {
textAlign: labelLayout.textAlign,
textBaseline: labelLayout.textBaseline,
textFont: labelLayout.font
},
rotation: labelLayout.rotation,
origin: [labelLayout.x, labelLayout.y],
silent: true,
z2: 10
});
sector.__labelLine = labelLine;
sector.__labelText = labelText;
// Update common style
var itemStyleModel = itemModel.getModel('itemStyle');
var visualColor = data.getItemVisual(idx, 'color');
sector.setStyle(
zrUtil.extend(
{
fill: visualColor
},
itemStyleModel.getModel('normal').getItemStyle()
)
);
graphic.setHoverStyle(
sector,
itemStyleModel.getModel('emphasis').getItemStyle()
);
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 textStyleModel = labelModel.getModel('textStyle');
var labelPosition = labelModel.get('position');
var isLabelInside = labelPosition === 'inside';
labelText.setStyle({
fill: textStyleModel.get('color')
|| isLabelInside ? '#fff' : visualColor,
text: seriesModel.getFormattedLabel(idx, 'normal')
|| data.getName(idx),
textFont: textStyleModel.getFont()
});
if (hasAnimation) {
sector.shape.endAngle = layout.startAngle;
api.updateGraphicEl(sector, {
shape: {
endAngle: layout.endAngle
}
});
}
labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
labelText.hoverIgnore = !labelHoverModel.get('show');
return sector;
}
labelLine.ignore = labelLine.normalIgnore = !labelLineModel.get('show');
labelLine.hoverIgnore = !labelLineHoverModel.get('show');
// Default use item visual color
labelLine.setStyle({
stroke: visualColor
});
labelLine.setStyle(labelLineModel.getLineStyle());
sector.setStyle(
zrUtil.extend(
{
fill: visualColor
},
itemStyleModel.getModel('normal').getItemStyle()
)
);
sector.hoverStyle = itemStyleModel.getModel('emphasis').getItemStyle();
labelText.hoverStyle = labelHoverModel.getModel('textStyle').getItemStyle();
labelLine.hoverStyle = labelLineHoverModel.getLineStyle();
graphic.setHoverStyle(this);
// Toggle selected
toggleItemSelected(
this,
data.getItemLayout(idx),
itemModel.get('selected'),
seriesModel.get('selectedOffset'),
seriesModel.ecModel.get('animation')
);
};
zrUtil.inherits(PiePiece, graphic.Group);
// Pie view
var Pie = require('../../view/Chart').extend({
type: 'pie',
......@@ -138,13 +239,11 @@ define(function (require) {
var data = seriesModel.getData();
var oldData = this._data;
var sectorGroup = this._sectorGroup;
var group = this.group;
var hasAnimation = ecModel.get('animation');
var isFirstRender = !oldData;
var firstSector;
var onSectorClick = zrUtil.curry(
updateDataSelected, this.uid, seriesModel, hasAnimation, api
);
......@@ -153,149 +252,49 @@ define(function (require) {
data.diff(oldData)
.add(function (idx) {
var layout = data.getItemLayout(idx);
var sector = createSectorAndLabel(
layout, '', !isFirstRender, api
);
var piePiece = new PiePiece(data, idx, api);
if (isFirstRender) {
piePiece.eachChild(function (child) {
child.stopAnimation(true);
});
}
selectedMode && sector.on('click', onSectorClick);
selectedMode && piePiece.on('click', onSectorClick);
data.setItemGraphicEl(idx, sector);
data.setItemGraphicEl(idx, piePiece);
sectorGroup.add(sector);
group.add(sector.__labelLine);
group.add(sector.__labelText);
firstSector = firstSector || sector;
group.add(piePiece);
})
.update(function (newIdx, oldIdx) {
var sector = oldData.getItemGraphicEl(oldIdx);
var piePiece = oldData.getItemGraphicEl(oldIdx);
var layout = data.getItemLayout(newIdx);
var labelLayout = layout.label;
var labelLine = sector.__labelLine;
var labelText = sector.__labelText;
piePiece.updateData(data, newIdx, api);
selectedMode
? sector.on('click', onSectorClick)
: sector.off('click');
api.updateGraphicEl(sector, {
shape: layout
});
api.updateGraphicEl(labelLine, {
shape: {
points: labelLayout.linePoints || [
[labelLayout.x, labelLayout.y],
[labelLayout.x, labelLayout.y],
[labelLayout.x, labelLayout.y]
]
}
});
api.updateGraphicEl(labelText, {
style: {
x: labelLayout.x,
y: labelLayout.y
},
rotation: labelLayout.rotation
});
// Set none animating style
labelText.setStyle({
textAlign: labelLayout.textAlign,
textBaseline: labelLayout.textBaseline,
textFont: labelLayout.font
});
sectorGroup.add(sector);
data.setItemGraphicEl(newIdx, sector);
group.add(labelLine);
group.add(labelText);
? piePiece.on('click', onSectorClick)
: piePiece.off('click');
group.add(piePiece);
data.setItemGraphicEl(newIdx, piePiece);
})
.remove(function (idx) {
var sector = oldData.getItemGraphicEl(idx);
sectorGroup.remove(sector);
group.remove(sector.__labelLine);
group.remove(sector.__labelText);
var piePiece = oldData.getItemGraphicEl(idx);
group.remove(piePiece);
})
.execute();
if (hasAnimation && isFirstRender && firstSector) {
var shape = firstSector.shape;
if (hasAnimation && isFirstRender && data.count() > 0) {
var shape = data.getItemLayout(0);
var r = Math.max(api.getWidth(), api.getHeight()) / 2;
var removeClipPath = zrUtil.bind(sectorGroup.removeClipPath, sectorGroup);
sectorGroup.setClipPath(this._createClipPath(
var removeClipPath = zrUtil.bind(group.removeClipPath, group);
group.setClipPath(this._createClipPath(
shape.cx, shape.cy, r, shape.startAngle, shape.clockwise, removeClipPath, api
));
}
// Make sure sectors is on top of labels
group.remove(sectorGroup);
group.add(sectorGroup);
this._updateAll(data, seriesModel);
this._data = data;
},
_updateAll: function (data, seriesModel, hasAnimation) {
var selectedOffset = seriesModel.get('selectedOffset');
data.eachItemGraphicEl(function (sector, idx) {
var itemModel = data.getItemModel(idx);
var itemStyleModel = itemModel.getModel('itemStyle');
var visualColor = data.getItemVisual(idx, 'color');
sector.setStyle(
zrUtil.extend(
{
fill: visualColor
},
itemStyleModel.getModel('normal').getItemStyle()
)
);
graphic.setHoverStyle(
sector,
itemStyleModel.getModel('emphasis').getItemStyle()
);
// Set label style
var labelText = sector.__labelText;
var labelLine = sector.__labelLine;
var labelModel = itemModel.getModel('label.normal');
var textStyleModel = labelModel.getModel('textStyle');
var labelPosition = labelModel.get('position');
var isLabelInside = labelPosition === 'inside';
labelText.setStyle({
fill: textStyleModel.get('color')
|| isLabelInside ? '#fff' : visualColor,
text: seriesModel.getFormattedLabel(idx, 'normal')
|| data.getName(idx),
textFont: textStyleModel.getFont()
});
labelText.attr('ignore', !labelModel.get('show'));
// Default use item visual color
labelLine.attr('ignore', !itemModel.get('labelLine.show'));
labelLine.setStyle({
stroke: visualColor
});
labelLine.setStyle(itemModel.getModel('labelLine').getLineStyle());
toggleItemSelected(
sector,
data.getItemLayout(idx),
itemModel.get('selected'),
selectedOffset,
hasAnimation
);
});
},
_createClipPath: function (
cx, cy, r, startAngle, clockwise, cb, api
) {
......@@ -318,9 +317,7 @@ define(function (require) {
}, cb);
return clipPath;
},
dispose: function () {}
}
});
return Pie;
......
src/chart/pie/labelLayout.js
浏览文件 @ 9c44687a
......@@ -145,7 +145,7 @@ define(function (require) {
var labelModel = itemModel.getModel('label.normal');
var labelPosition = labelModel.get('position');
var labelLineModel = itemModel.getModel('labelLine');
var labelLineModel = itemModel.getModel('labelLine.normal');
var labelLineLen = labelLineModel.get('length');
var labelLineLen2 = labelLineModel.get('length2');
......
src/echarts.js
浏览文件 @ 9c44687a
......@@ -879,6 +879,7 @@ define(function (require) {
echarts.registerVisualCoding('echarts', require('./visual/seriesColor'));
echarts.registerPreprocessor(require('./preprocessor/backwardCompat'));
echarts.registerPreprocessor(require('./preprocessor/fillLabel'));
// Default action
echarts.registerAction({
......
src/preprocessor/fillLabel.js 0 → 100644
浏览文件 @ 9c44687a
define(function (require) {
var zrUtil = require('zrender/core/util');
// Extend the emphasis option which has in normal but
// Not in the emphasis, like position, show
function fillLabel(labelOpt) {
if (labelOpt) {
var normalOpt = labelOpt.normal;
if (normalOpt) {
zrUtil.merge(labelOpt.emphasis || (labelOpt.emphasis = {}), normalOpt);
}
}
}
return function (option) {
zrUtil.each(option.series, function (seriesOpt) {
fillLabel(seriesOpt.label);
// Label line for pie and funnel
fillLabel(seriesOpt.labelLine);
zrUtil.each(seriesOpt.data, function (dataOpt) {
fillLabel(dataOpt.label);
fillLabel(dataOpt.labelLine);
});
});
};
});
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或