Skip to content

Commit

Permalink
feat(bar): bar background #11405 (#11951)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ovilia
Ovilia authored Jan 13, 2020
1 parent 0211578 commit 4023cfa
Show file tree
Hide file tree
Showing 6 changed files with 668 additions and 23 deletions.
16 changes: 15 additions & 1 deletion src/chart/bar/BarSeries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,20 @@ export default BaseBarSeries.extend({

// If use caps on two sides of bars
// Only available on tangential polar bar
roundCap: false
roundCap: false,

showBackground: false,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)',
borderColor: null,
borderWidth: 0,
borderType: 'solid',
borderRadius: 0,
shadowBlur: 0,
shadowColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
}
}
});
147 changes: 135 additions & 12 deletions src/chart/bar/BarView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {setLabel} from './helper';
import Model from '../../model/Model';
import barItemStyle from './barItemStyle';
import Path from 'zrender/src/graphic/Path';
import Group from 'zrender/src/container/Group';
import {throttle} from '../../util/throttle';
import {createClipPath} from '../helper/createClipPathFromCoordSys';
import Sausage from '../../util/shape/sausage';
Expand Down Expand Up @@ -127,15 +128,27 @@ export default echarts.extendChartView({

var roundCap = seriesModel.get('roundCap', true);

var drawBackground = seriesModel.get('showBackground', true);
var backgroundModel = seriesModel.getModel('backgroundStyle');

var bgEls = [];
var oldBgEls = this._backgroundEls || [];

data.diff(oldData)
.add(function (dataIndex) {
var itemModel = data.getItemModel(dataIndex);
var layout = getLayout[coord.type](data, dataIndex, itemModel);

if (drawBackground) {
var bgEl = createBackgroundEl(coord, isHorizontalOrRadial, layout);
bgEl.useStyle(backgroundModel.getBarItemStyle());
bgEls[dataIndex] = bgEl;
}

if (!data.hasValue(dataIndex)) {
return;
}

var itemModel = data.getItemModel(dataIndex);
var layout = getLayout[coord.type](data, dataIndex, itemModel);

if (needsClip) {
// Clip will modify the layout params.
// And return a boolean to determine if the shape are fully clipped.
Expand All @@ -158,16 +171,24 @@ export default echarts.extendChartView({
);
})
.update(function (newIndex, oldIndex) {
var el = oldData.getItemGraphicEl(oldIndex);
var itemModel = data.getItemModel(newIndex);
var layout = getLayout[coord.type](data, newIndex, itemModel);

if (drawBackground) {
var bgEl = oldBgEls[oldIndex];
bgEl.useStyle(backgroundModel.getBarItemStyle());
bgEls[newIndex] = bgEl;

var shape = createBackgroundShape(isHorizontalOrRadial, layout, coord);
graphic.updateProps(bgEl, { shape: shape }, animationModel, newIndex);
}

var el = oldData.getItemGraphicEl(oldIndex);
if (!data.hasValue(newIndex)) {
group.remove(el);
return;
}

var itemModel = data.getItemModel(newIndex);
var layout = getLayout[coord.type](data, newIndex, itemModel);

if (needsClip) {
var isClipped = clip[coord.type](coordSysClipArea, layout);
if (isClipped) {
Expand Down Expand Up @@ -205,6 +226,15 @@ export default echarts.extendChartView({
})
.execute();

var bgGroup = this._backgroundGroup || (this._backgroundGroup = new Group());
bgGroup.removeAll();

for (var i = 0; i < bgEls.length; ++i) {
bgGroup.add(bgEls[i]);
}
group.add(bgGroup);
this._backgroundEls = bgEls;

this._data = data;
},

Expand All @@ -225,6 +255,7 @@ export default echarts.extendChartView({
},

_incrementalRenderLarge: function (params, seriesModel) {
this._removeBackground();
createLarge(seriesModel, this.group, true);
},

Expand All @@ -238,6 +269,9 @@ export default echarts.extendChartView({
var group = this.group;
var data = this._data;
if (ecModel && ecModel.get('animation') && data && !this._isLargeDraw) {
this._removeBackground();
this._backgroundEls = [];

data.eachItemGraphicEl(function (el) {
if (el.type === 'sector') {
removeSector(el.dataIndex, ecModel, el);
Expand All @@ -251,6 +285,11 @@ export default echarts.extendChartView({
group.removeAll();
}
this._data = null;
},

_removeBackground: function () {
this.group.remove(this._backgroundGroup);
this._backgroundGroup = null;
}

});
Expand Down Expand Up @@ -308,7 +347,12 @@ var elementCreator = {
dataIndex, layout, isHorizontal,
animationModel, isUpdate
) {
var rect = new graphic.Rect({shape: zrUtil.extend({}, layout)});
var rect = new graphic.Rect({
shape: zrUtil.extend({}, layout),
z2: 1
});

rect.name = 'item';

// Animation
if (animationModel) {
Expand Down Expand Up @@ -338,9 +382,12 @@ var elementCreator = {
var ShapeClass = (!isRadial && roundCap) ? Sausage : graphic.Sector;

var sector = new ShapeClass({
shape: zrUtil.defaults({clockwise: clockwise}, layout)
shape: zrUtil.defaults({clockwise: clockwise}, layout),
z2: 1
});

sector.name = 'item';

// Animation
if (animationModel) {
var sectorShape = sector.shape;
Expand Down Expand Up @@ -460,7 +507,10 @@ function updateStyle(
// In case width or height are too small.
function getLineWidth(itemModel, rawLayout) {
var lineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
return Math.min(lineWidth, Math.abs(rawLayout.width), Math.abs(rawLayout.height));
// width or height may be NaN for empty data
var width = isNaN(rawLayout.width) ? Number.MAX_VALUE : Math.abs(rawLayout.width);
var height = isNaN(rawLayout.height) ? Number.MAX_VALUE : Math.abs(rawLayout.height);
return Math.min(lineWidth, width, height);
}


Expand Down Expand Up @@ -492,13 +542,38 @@ function createLarge(seriesModel, group, incremental) {
var baseDimIdx = data.getLayout('valueAxisHorizontal') ? 1 : 0;
startPoint[1 - baseDimIdx] = data.getLayout('valueAxisStart');

var largeDataIndices = data.getLayout('largeDataIndices');
var barWidth = data.getLayout('barWidth');

var backgroundModel = seriesModel.getModel('backgroundStyle');
var drawBackground = seriesModel.get('showBackground', true);

if (drawBackground) {
var points = data.getLayout('largeBackgroundPoints');
var backgroundStartPoint = [];
backgroundStartPoint[1 - baseDimIdx] = data.getLayout('backgroundStart');

var bgEl = new LargePath({
shape: {points: points},
incremental: !!incremental,
__startPoint: backgroundStartPoint,
__baseDimIdx: baseDimIdx,
__largeDataIndices: largeDataIndices,
__barWidth: barWidth,
silent: true,
z2: 0
});
setLargeBackgroundStyle(bgEl, backgroundModel, data);
group.add(bgEl);
}

var el = new LargePath({
shape: {points: data.getLayout('largePoints')},
incremental: !!incremental,
__startPoint: startPoint,
__baseDimIdx: baseDimIdx,
__largeDataIndices: data.getLayout('largeDataIndices'),
__barWidth: data.getLayout('barWidth')
__largeDataIndices: largeDataIndices,
__barWidth: barWidth
});
group.add(el);
setLargeStyle(el, seriesModel, data);
Expand Down Expand Up @@ -563,3 +638,51 @@ function setLargeStyle(el, seriesModel, data) {
el.style.lineWidth = data.getLayout('barWidth');
}

function setLargeBackgroundStyle(el, backgroundModel, data) {
var borderColor = backgroundModel.get('borderColor') || backgroundModel.get('color');
var itemStyle = backgroundModel.getItemStyle(['color', 'borderColor']);

el.useStyle(itemStyle);
el.style.fill = null;
el.style.stroke = borderColor;
el.style.lineWidth = data.getLayout('barWidth');
}

function createBackgroundShape(isHorizontalOrRadial, layout, coord) {
var coordLayout;
var isPolar = coord.type === 'polar';
if (isPolar) {
coordLayout = coord.getArea();
}
else {
coordLayout = coord.grid.getRect();
}

if (isPolar) {
return {
cx: coordLayout.cx,
cy: coordLayout.cy,
r0: isHorizontalOrRadial ? coordLayout.r0 : layout.r0,
r: isHorizontalOrRadial ? coordLayout.r : layout.r,
startAngle: isHorizontalOrRadial ? layout.startAngle : 0,
endAngle: isHorizontalOrRadial ? layout.endAngle : Math.PI * 2
};
}
else {
return {
x: isHorizontalOrRadial ? layout.x : coordLayout.x,
y: isHorizontalOrRadial ? coordLayout.y : layout.y,
width: isHorizontalOrRadial ? layout.width : coordLayout.width,
height: isHorizontalOrRadial ? coordLayout.height : layout.height
};
}
}

function createBackgroundEl(coord, isHorizontalOrRadial, layout) {
var ElementClz = coord.type === 'polar' ? graphic.Sector : graphic.Rect;
return new ElementClz({
shape: createBackgroundShape(isHorizontalOrRadial, layout, coord),
silent: true,
z2: 0
});
}
11 changes: 6 additions & 5 deletions src/layout/barGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,11 +420,6 @@ export function layout(seriesType, ecModel) {
var value = data.get(valueDim, idx);
var baseValue = data.get(baseDim, idx);

// If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
if (isNaN(value) || isNaN(baseValue)) {
continue;
}

var sign = value >= 0 ? 'p' : 'n';
var baseCoord = valueAxisStart;

Expand Down Expand Up @@ -498,6 +493,7 @@ export var largeLayout = {

var data = seriesModel.getData();
var cartesian = seriesModel.coordinateSystem;
var coordLayout = cartesian.grid.getRect();
var baseAxis = cartesian.getBaseAxis();
var valueAxis = cartesian.getOtherAxis(baseAxis);
var valueDim = data.mapDimension(valueAxis.dim);
Expand All @@ -517,6 +513,7 @@ export var largeLayout = {
function progress(params, data) {
var count = params.count;
var largePoints = new LargeArr(count * 2);
var largeBackgroundPoints = new LargeArr(count * 2);
var largeDataIndices = new LargeArr(count);
var dataIndex;
var coord = [];
Expand All @@ -530,16 +527,20 @@ export var largeLayout = {

coord = cartesian.dataToPoint(valuePair, null, coord);
// Data index might not be in order, depends on `progressiveChunkMode`.
largeBackgroundPoints[pointsOffset] = valueAxisHorizontal ? coordLayout.x + coordLayout.width : coord[0];
largePoints[pointsOffset++] = coord[0];
largeBackgroundPoints[pointsOffset] = valueAxisHorizontal ? coord[1] : coordLayout.y + coordLayout.height;
largePoints[pointsOffset++] = coord[1];
largeDataIndices[idxOffset++] = dataIndex;
}

data.setLayout({
largePoints: largePoints,
largeDataIndices: largeDataIndices,
largeBackgroundPoints: largeBackgroundPoints,
barWidth: barWidth,
valueAxisStart: getValueAxisStart(baseAxis, valueAxis, false),
backgroundStart: valueAxisHorizontal ? coordLayout.x : coordLayout.y,
valueAxisHorizontal: valueAxisHorizontal
});
}
Expand Down
4 changes: 0 additions & 4 deletions src/layout/barPolar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,6 @@ function barLayoutPolar(seriesType, ecModel, api) {
var value = data.get(valueDim, idx);
var baseValue = data.get(baseDim, idx);

if (isNaN(value)) {
continue;
}

var sign = value >= 0 ? 'p' : 'n';
var baseCoord = valueAxisStart;

Expand Down
Loading

0 comments on commit 4023cfa

Please sign in to comment.