You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2019/10/14 09:45:33 UTC
[incubator-echarts] 02/03: feat(polar): support radius for polar
bars
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-4856
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 6a7cbdee42a9db0ed8bf38b9b9864a27c66808a3
Author: Ovilia <zw...@gmail.com>
AuthorDate: Mon Oct 14 17:37:35 2019 +0800
feat(polar): support radius for polar bars
---
src/chart/bar/BarSeries.js | 6 +++++-
src/chart/bar/BarView.js | 16 ++++++++++------
src/layout/barPolar.js | 5 +++--
src/util/graphic.js | 7 +++++--
src/util/symbol.js | 39 +++++++++++++++++++++++----------------
5 files changed, 46 insertions(+), 27 deletions(-)
diff --git a/src/chart/bar/BarSeries.js b/src/chart/bar/BarSeries.js
index 477a584..0f34f9c 100644
--- a/src/chart/bar/BarSeries.js
+++ b/src/chart/bar/BarSeries.js
@@ -53,6 +53,10 @@ export default BaseBarSeries.extend({
defaultOption: {
// If clipped
// Only available on cartesian2d
- clip: true
+ clip: true,
+
+ // If use caps on two sides of bars
+ // Only available on tangential polar bar
+ roundCap: false
}
});
diff --git a/src/chart/bar/BarView.js b/src/chart/bar/BarView.js
index 310ddff..f15f9c4 100644
--- a/src/chart/bar/BarView.js
+++ b/src/chart/bar/BarView.js
@@ -97,6 +97,7 @@ export default echarts.extendChartView({
var coordSysClipArea = coord.getArea && coord.getArea();
var needsClip = seriesModel.get('clip', true);
+ var roundCap = seriesModel.get('roundCap', true);
// If there is clipPath created in large mode. Remove it.
group.removeClipPath();
@@ -123,7 +124,7 @@ export default echarts.extendChartView({
}
var el = elementCreator[coord.type](
- data, dataIndex, itemModel, layout, isHorizontalOrRadial, animationModel
+ dataIndex, layout, isHorizontalOrRadial, animationModel, false, roundCap
);
data.setItemGraphicEl(dataIndex, el);
group.add(el);
@@ -157,7 +158,7 @@ export default echarts.extendChartView({
}
else {
el = elementCreator[coord.type](
- data, newIndex, itemModel, layout, isHorizontalOrRadial, animationModel, true
+ newIndex, layout, isHorizontalOrRadial, animationModel, true, roundCap
);
}
@@ -281,7 +282,7 @@ var clip = {
var elementCreator = {
cartesian2d: function (
- data, dataIndex, itemModel, layout, isHorizontal,
+ dataIndex, layout, isHorizontal,
animationModel, isUpdate
) {
var rect = new graphic.Rect({shape: zrUtil.extend({}, layout)});
@@ -302,15 +303,18 @@ var elementCreator = {
},
polar: function (
- data, dataIndex, itemModel, layout, isRadial,
- animationModel, isUpdate
+ dataIndex, layout, isRadial,
+ animationModel, isUpdate, roundCap
) {
// Keep the same logic with bar in catesion: use end value to control
// direction. Notice that if clockwise is true (by default), the sector
// will always draw clockwisely, no matter whether endAngle is greater
// or less than startAngle.
var clockwise = layout.startAngle < layout.endAngle;
- var sector = new graphic.Sector({
+
+ var ShapeClass = (!isRadial && roundCap) ? graphic.Sausage : graphic.Sector;
+
+ var sector = new ShapeClass({
shape: zrUtil.defaults({clockwise: clockwise}, layout)
});
diff --git a/src/layout/barPolar.js b/src/layout/barPolar.js
index 88d7641..bcdc1a6 100644
--- a/src/layout/barPolar.js
+++ b/src/layout/barPolar.js
@@ -79,6 +79,8 @@ function barLayoutPolar(seriesType, ecModel, api) {
var valueDim = data.mapDimension(valueAxis.dim);
var baseDim = data.mapDimension(baseAxis.dim);
var stacked = isDimensionStacked(data, valueDim /*, baseDim*/);
+ var clampLayout = baseDim !== 'radius'
+ || !seriesModel.get('roundCap', true);
var valueAxisStart = valueAxis.getExtent()[0];
@@ -130,8 +132,7 @@ function barLayoutPolar(seriesType, ecModel, api) {
}
// tangential sector
else {
- // angleAxis must be clamped.
- var angleSpan = valueAxis.dataToAngle(value, true) - valueAxisStart;
+ var angleSpan = valueAxis.dataToAngle(value, clampLayout) - valueAxisStart;
var radius = baseAxis.dataToRadius(baseValue);
if (Math.abs(angleSpan) < barMinAngle) {
diff --git a/src/util/graphic.js b/src/util/graphic.js
index 1d09806..969b4e4 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -43,6 +43,7 @@ import BoundingRect from 'zrender/src/core/BoundingRect';
import IncrementalDisplayable from 'zrender/src/graphic/IncrementalDisplayable';
import * as subPixelOptimizeUtil from 'zrender/src/graphic/helper/subPixelOptimize';
import fixPathClipWithShadow from 'zrender/src/graphic/helper/fixClipWithShadow';
+import {Sausage} from './symbol';
var mathMax = Math.max;
@@ -76,8 +77,8 @@ export function extendShape(opts) {
return Path.extend(opts);
}
-export function fixClipWithShadow() {
- return fixPathClipWithShadow(Path.prototype.brush);
+export function fixClipWithShadow(conditionCheck) {
+ return fixPathClipWithShadow(Path.prototype.brush, conditionCheck);
}
/**
@@ -1435,6 +1436,7 @@ function nearZero(val) {
// by users, although we do not recommend that.
registerShape('circle', Circle);
registerShape('sector', Sector);
+registerShape('sausage', Sausage);
registerShape('ring', Ring);
registerShape('polygon', Polygon);
registerShape('polyline', Polyline);
@@ -1449,6 +1451,7 @@ export {
Text,
Circle,
Sector,
+ Sausage,
Ring,
Polygon,
Polyline,
diff --git a/src/util/symbol.js b/src/util/symbol.js
index 99f4eec..8113258 100644
--- a/src/util/symbol.js
+++ b/src/util/symbol.js
@@ -133,7 +133,7 @@ var Pin = graphic.extendShape({
* Sausage: similar to sector, but have half circle on both sides
* @inner
*/
-var Sausage = graphic.extendShape({
+export var Sausage = graphic.extendShape({
type: 'sausage',
@@ -154,10 +154,11 @@ var Sausage = graphic.extendShape({
clockwise: true
},
- brush: graphic.fixClipWithShadow(),
+ brush: graphic.fixClipWithShadow(function () {
+ return this.startAngle === this.endAngle;
+ }),
buildPath: function (ctx, shape) {
-
var x = shape.cx;
var y = shape.cy;
var r0 = Math.max(shape.r0 || 0, 0);
@@ -168,27 +169,33 @@ var Sausage = graphic.extendShape({
var endAngle = shape.endAngle;
var clockwise = shape.clockwise;
- var unitX = Math.cos(startAngle);
- var unitY = Math.sin(startAngle);
+ var unitStartX = Math.cos(startAngle);
+ var unitStartY = Math.sin(startAngle);
+ var unitEndX = Math.cos(endAngle);
+ var unitEndY = Math.sin(endAngle);
+
+ var lessThanCircle = clockwise
+ ? endAngle - startAngle < Math.PI * 2
+ : startAngle - endAngle < Math.PI * 2;
- ctx.moveTo(unitX * r0 + x, unitY * r0 + y);
+ if (lessThanCircle) {
+ ctx.moveTo(unitStartX * r0 + x, unitStartY * r0 + y);
- ctx.arc(unitX * rCenter + x, unitY * rCenter + y, dr,
- Math.PI + startAngle, startAngle, !clockwise);
+ ctx.arc(unitStartX * rCenter + x, unitStartY * rCenter + y, dr,
+ -Math.PI + startAngle, startAngle, !clockwise);
+ }
ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
- ctx.arc(
- Math.cos(endAngle) * rCenter + x,
- Math.sin(endAngle) * rCenter + x,
- dr,
- endAngle,
- endAngle + Math.PI,
- !clockwise
- );
+ ctx.moveTo(unitEndX * r + x, unitEndY * r + y);
+
+ ctx.arc(unitEndX * rCenter + x, unitEndY * rCenter + y, dr,
+ endAngle - Math.PI * 2, endAngle - Math.PI, !clockwise);
if (r0 !== 0) {
ctx.arc(x, y, r0, endAngle, startAngle, clockwise);
+
+ ctx.moveTo(unitStartX * r0 + x, unitEndY * r0 + y);
}
ctx.closePath();
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org