Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 6c8e1f64 编写于 作者: L lang
浏览文件
操作

Improve funnel and pie

上级 0752513a
隐藏空白更改
内联 并排
Showing with 140 addition and 86 deletion
src/chart/funnel/FunnelView.js
浏览文件 @ 6c8e1f64
......@@ -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()
);
});
}
});
......
src/chart/pie/PieView.js
浏览文件 @ 6c8e1f64
......@@ -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,
......
src/chart/pie/labelLayout.js
浏览文件 @ 6c8e1f64
......@@ -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();
......
test/funnel.html
浏览文件 @ 6c8e1f64
......@@ -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);
});
</script>
......
test/geoScatter.html
浏览文件 @ 6c8e1f64
......@@ -9,6 +9,7 @@
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<div id="main"></div>
......@@ -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({
......
test/pie.html
浏览文件 @ 6c8e1f64
......@@ -3,6 +3,7 @@
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<script src="lib/dat.gui.min.js"></script>
</head>
<body>
<style>
......@@ -60,6 +61,37 @@
itemStyle: itemStyle
}]
});
var config = {
labelPosition: 'outside',
labelLineLen: 20,
labelLineLen2: 5
};
function update() {
chart.setOption({
series: [{
name: 'pie',
label: {
normal: {
position: config.labelPosition
}
},
labelLine: {
length: config.labelLineLen,
length2: config.labelLineLen2
}
}]
});
}
var gui = new dat.GUI();
gui.add(config, 'labelPosition', ['inside', 'outside'])
.onChange(update);
gui.add(config, 'labelLineLen', 0, 100)
.onChange(update);
gui.add(config, 'labelLineLen2', 0, 100)
.onChange(update);
})
</script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或