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 <zwl.s...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org