Skip to content
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

feat(bar): bar background #11951

Merged
merged 11 commits into from
Jan 13, 2020
Merged

feat(bar): bar background #11951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9d06aa3
feat(bar): bar background for grid layout #11405
Ovilia Dec 26, 2019
c139f38
feat(bar): background for polar bars #11405
Ovilia Dec 26, 2019
5f8dfc8
feat(bar): background for large bar series
Ovilia Dec 30, 2019
64ba094
test(bar): test for bar background #11405
Ovilia Dec 30, 2019
30c383c
refactor(bar): use showBackground and improve efficiency
Ovilia Jan 7, 2020
a19129a
refactor(bar): bg update style
Ovilia Jan 7, 2020
e18a4c7
fix(bar): remove unused param
Ovilia Jan 7, 2020
058e4dd
fix(bar): fix according to review comments
Ovilia Jan 9, 2020
3fe7dde
test(bar): update tests
Ovilia Jan 13, 2020
41ccd23
style(bar): remove debug info
Ovilia Jan 13, 2020
2bf6f48
refactor(bar): rename variable
Ovilia Jan 13, 2020
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
16 changes: 15 additions & 1 deletion src/chart/bar/BarSeries.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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