diff --git a/src/chart/funnel/FunnelView.js b/src/chart/funnel/FunnelView.js
index c190f0625ee9b74d83c45aa676056c804ced3684..63eab3e14ae9cb4da39923e162b132bb600f4a09 100644
--- a/src/chart/funnel/FunnelView.js
+++ b/src/chart/funnel/FunnelView.js
@@ -49,8 +49,6 @@ define(function (require) {
var layout = data.getItemLayout(idx);
var labelLayout = layout.label;
- var itemModel = data.getItemModel(idx);
-
var poly = new graphic.Polygon({
shape: {
points: layout.points
@@ -77,7 +75,6 @@ define(function (require) {
shape: {
points: labelLayout.linePoints
},
- ignore: !itemModel.get('labelLine.show'),
silent: true
});
poly.__labelLine = labelLine;
@@ -94,7 +91,6 @@ define(function (require) {
var layout = data.getItemLayout(newIdx);
var labelLayout = layout.label;
- var itemModel = data.getItemModel(newIdx);
api.updateGraphicEl(poly, {
shape: {
@@ -108,8 +104,7 @@ define(function (require) {
api.updateGraphicEl(labelLine, {
shape: {
points: labelLayout.linePoints
- },
- ignore: !itemModel.get('labelLine.show')
+ }
});
api.updateGraphicEl(labelText, {
style: {
@@ -170,34 +165,30 @@ define(function (require) {
itemStyleModel.getModel('emphasis').getItemStyle()
);
+ // Set label style
var labelText = poly.__labelText;
var labelLine = poly.__labelLine;
- if (labelText) {
- var labelModel = itemModel.getModel('label.normal');
- var textStyleModel = labelModel.getModel('textStyle');
- var labelPosition = labelModel.get('position');
- var isLabelInside = labelPosition === 'inside'
- || labelPosition === 'inner' || labelPosition === 'center';
- // Default use item visual color
- labelText.setStyle({
- fill: textStyleModel.get('color')
- || isLabelInside ? '#fff' : visualColor
- });
- labelText.setStyle({
- text: seriesModel.getFormattedLabel(idx, 'normal')
- || data.getName(idx),
- font: textStyleModel.getFont()
- });
- }
- if (labelLine) {
+ var labelModel = itemModel.getModel('label.normal');
+ var textStyleModel = labelModel.getModel('textStyle');
+ var labelPosition = labelModel.get('position');
+ var isLabelInside = labelPosition === 'inside'
+ || labelPosition === 'inner' || labelPosition === 'center';
+ labelText.setStyle({
// Default use item visual color
- labelLine.setStyle({
- stroke: visualColor
- });
- labelLine.setStyle(
- itemModel.getModel('labelLine.lineStyle').getLineStyle()
- );
- }
+ fill: textStyleModel.get('color')
+ || isLabelInside ? '#fff' : visualColor,
+ text: seriesModel.getFormattedLabel(idx, 'normal')
+ || data.getName(idx),
+ font: textStyleModel.getFont()
+ });
+ // Default use item visual color
+ labelLine.attr('ignore', !itemModel.get('labelLine.show'));
+ labelLine.setStyle({
+ stroke: visualColor
+ });
+ labelLine.setStyle(
+ itemModel.getModel('labelLine.lineStyle').getLineStyle()
+ );
});
}
});
diff --git a/src/chart/pie/PieView.js b/src/chart/pie/PieView.js
index beb25f11045fed647cc54387a2464c23bbfcb37a..7a14127c1ad99e1a947aa759de6e2dcf2649996b 100644
--- a/src/chart/pie/PieView.js
+++ b/src/chart/pie/PieView.js
@@ -25,6 +25,14 @@ define(function (require) {
});
}
+ function selectAnimate(el, pos) {
+ // animateTo will stop revious animation like update transition
+ el.animate()
+ .when(200, {
+ position: pos
+ })
+ .start('bounceOut');
+ }
/**
* @param {module:zrender/graphic/Sector} el
* @param {Object} layout
@@ -33,20 +41,17 @@ define(function (require) {
* @inner
*/
function toggleItemSelected(el, layout, isSelected, selectedOffset) {
- var shape = el.shape;
var midAngle = (layout.startAngle + layout.endAngle) / 2;
var dx = Math.cos(midAngle);
- var dy = (shape.clockwise ? 1 : -1) * Math.sin(midAngle);
+ var dy = (layout.clockwise ? 1 : -1) * Math.sin(midAngle);
var offset = isSelected ? selectedOffset : 0;
- // animateTo will stop revious animation like update transition
- el.animate()
- .when(200, {
- position: [dx * offset, dy * offset]
- })
- .start('bounceOut');
+ var position = [dx * offset, dy * offset];
+ selectAnimate(el, position);
+ selectAnimate(el.__labelLine, position);
+ selectAnimate(el.__labelText, position);
}
/**
@@ -74,14 +79,17 @@ define(function (require) {
var labelText = new graphic.Text({
style: {
+ x: labelLayout.x,
+ y: labelLayout.y,
text: text,
textAlign: labelLayout.textAlign,
textBaseline: labelLayout.textBaseline,
font: labelLayout.font
},
rotation: labelLayout.rotation,
- position: [labelLayout.x, labelLayout.y],
- silent: true
+ origin: [labelLayout.x, labelLayout.y],
+ silent: true,
+ z2: 10
});
sector.__labelLine = labelLine;
@@ -144,6 +152,7 @@ define(function (require) {
})
.update(function (newIdx, oldIdx) {
var sector = oldData.getItemGraphicEl(oldIdx);
+
var layout = data.getItemLayout(newIdx);
var labelLayout = layout.label;
@@ -157,22 +166,25 @@ define(function (require) {
api.updateGraphicEl(sector, {
shape: layout
});
- labelLine && api.updateGraphicEl(labelLine, {
+ api.updateGraphicEl(labelLine, {
shape: {
points: labelLayout.linePoints
}
});
- if (labelText) {
- api.updateGraphicEl(labelText, {
- position: [labelLayout.x, labelLayout.y],
- rotation: labelLayout.rotation
- });
- labelText.setStyle({
- textAlign: labelLayout.textAlign,
- textBaseline: labelLayout.textBaseline,
- font: labelLayout.font
- });
- }
+ 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,
+ font: labelLayout.font
+ });
sectorGroup.add(sector);
data.setItemGraphicEl(newIdx, sector);
@@ -213,11 +225,12 @@ define(function (require) {
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: data.getItemVisual(idx, 'color')
+ fill: visualColor
},
itemStyleModel.getModel('normal').getItemStyle()
)
@@ -227,17 +240,26 @@ define(function (require) {
itemStyleModel.getModel('emphasis').getItemStyle()
);
+ // Set label style
var labelText = sector.__labelText;
var labelLine = sector.__labelLine;
- if (labelText) {
- labelText.setStyle({
- text: seriesModel.getFormattedLabel(idx, 'normal')
- || data.getName(idx)
- });
- }
- if (labelLine) {
- labelLine.setStyle(itemModel.getModel('labelLine').getLineStyle());
- }
+ 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),
+ font: textStyleModel.getFont()
+ });
+ // Default use item visual color
+ labelLine.attr('ignore', !itemModel.get('labelLine.show'));
+ labelLine.setStyle({
+ stroke: visualColor
+ });
+ labelLine.setStyle(itemModel.getModel('labelLine').getLineStyle());
toggleItemSelected(
sector,
diff --git a/src/chart/pie/labelLayout.js b/src/chart/pie/labelLayout.js
index c2bd99f4f9aacbafc3447acecf2d283b70cdb01d..393516db525e36c398dac08d9b6d344a0b477bd7 100644
--- a/src/chart/pie/labelLayout.js
+++ b/src/chart/pie/labelLayout.js
@@ -123,6 +123,12 @@ define(function (require) {
textAlign = isLabelInside ? 'center' : (dx > 0 ? 'left' : 'right');
}
+ if (!linePoints) {
+ // Default line points
+ var linePoints = [
+ [textX, textY], [textX, textY], [textX, textY]
+ ];
+ }
var textBaseline = 'middle';
var font = labelModel.getModel('textStyle').getFont();
diff --git a/test/funnel.html b/test/funnel.html
index 64799baf5ab61735b2973a8521777eace254911f..48fdd6315749ce48231ff781ba7e27ed8e71af8c 100644
--- a/test/funnel.html
+++ b/test/funnel.html
@@ -80,32 +80,34 @@
var config = {
sort: 'ascending',
- labelPosition: 'inside'
+ labelPosition: 'inside',
+ labelLineLen: 20
};
+ function update() {
+ chart.setOption({
+ series: [{
+ name: '漏斗图',
+ sort: config.sort,
+ label: {
+ normal: {
+ position: config.labelPosition
+ }
+ },
+ labelLine: {
+ length: config.labelLineLen
+ }
+ }]
+ });
+ }
+
var gui = new dat.GUI();
gui.add(config, 'sort', ['descending', 'ascending'])
- .onChange(function (value) {
- chart.setOption({
- series: [{
- name: 'Les Miserables',
- sort: value
- }]
- });
- });
+ .onChange(update);
gui.add(config, 'labelPosition', ['inside', 'left', 'right'])
- .onChange(function (value) {
- chart.setOption({
- series: [{
- name: 'Les Miserables',
- label: {
- normal: {
- position: value
- }
- }
- }]
- });
- });
+ .onChange(update);
+ gui.add(config, 'labelLineLen', 0, 100)
+ .onChange(update);
});
diff --git a/test/geoScatter.html b/test/geoScatter.html
index 5e07b46647c693125cd4fbd42088fd18a370bb53..26a80d8a0d101c5e13d084c7f7a091fc36b1ddf4 100644
--- a/test/geoScatter.html
+++ b/test/geoScatter.html
@@ -9,6 +9,7 @@
html, body, #main {
width: 100%;
height: 100%;
+ margin: 0;
}
@@ -232,7 +233,7 @@
geoCoord[1] + Math.random() * 1 - 0.5,
Math.random()
];
- }
+ };
while(len--) {
var geoCoord = placeList[len % placeList.length].geoCoord;
@@ -244,7 +245,7 @@
data2.push({
name: placeList[len % placeList.length].name + len,
value: randomValue(geoCoord)
- })
+ });
}
chart.setOption({
diff --git a/test/pie.html b/test/pie.html
index 05bd7a35d92027fbbf57b90c070c945877b1fca0..2aa7588147932af6d035b49fbf45f538a40feab7 100644
--- a/test/pie.html
+++ b/test/pie.html
@@ -3,6 +3,7 @@
+