Skip to content

Bar: Expand clipping area on the value axis or axis with no boundaryGap. #11338

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pissang merged 1 commit into from
Sep 26, 2019
Merged

Bar: Expand clipping area on the value axis or axis with no boundaryGap. #11338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 24 additions & 3 deletions src/chart/bar/BarView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,29 @@ var _eventPos = [0, 0];
// Just for compatible with ec2.
zrUtil.extend(Model.prototype, barItemStyle);

function getClipArea(coord, data) {
var coordSysClipArea = coord.getArea && coord.getArea();
if (coord.type === 'cartesian2d') {
var baseAxis = coord.getBaseAxis();
// When boundaryGap is false or using time axis. bar may exceed the grid.
// We should not clip this part.
// See test/bar2.html
if (baseAxis.type !== 'category' || !baseAxis.onBand) {
var expandWidth = data.getLayout('bandWidth');
if (baseAxis.isHorizontal()) {
coordSysClipArea.x -= expandWidth;
coordSysClipArea.width += expandWidth * 2;
}
else {
coordSysClipArea.y -= expandWidth;
coordSysClipArea.height += expandWidth * 2;
}
}
}

return coordSysClipArea;
}

export default echarts.extendChartView({

type: 'bar',
Expand Down Expand Up @@ -94,10 +117,8 @@ export default echarts.extendChartView({

var animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;

var coordSysClipArea = coord.getArea && coord.getArea();

var needsClip = seriesModel.get('clip', true);

var coordSysClipArea = getClipArea(coord, data);
// If there is clipPath created in large mode. Remove it.
group.removeClipPath();
// We don't use clipPath in normal mode because we needs a perfect animation
Expand Down
2 changes: 2 additions & 0 deletions src/layout/barGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ function doCalBarWidthAndOffset(seriesInfoList) {
var offset = -widthSum / 2;
zrUtil.each(stacks, function (column, stackId) {
result[coordSysName][stackId] = result[coordSysName][stackId] || {
bandWidth: bandWidth,
offset: offset,
width: column.width
};
Expand Down Expand Up @@ -280,6 +281,7 @@ export function layout(seriesType, ecModel) {
lastStackCoordsOrigin[stackId] = lastStackCoordsOrigin[stackId] || []; // Fix #4243

data.setLayout({
bandWidth: columnLayoutInfo.bandWidth,
offset: columnOffset,
size: columnWidth
});
Expand Down