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

Jump to bottom

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 4 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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 14 additions & 1 deletion src/chart/bar/BarSeries.js
View file
Open in desktop
Expand Up @@ -57,6 +57,19 @@ export default BaseBarSeries.extend({

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

backgroundStyle: {
Ovilia marked this conversation as resolved.
Show resolved Hide resolved
color: 'transparent',
borderColor: null,
borderWidth: '0',
Ovilia marked this conversation as resolved.
Show resolved Hide resolved
borderType: 'solid',
barBorderRadius: 0,
Ovilia marked this conversation as resolved.
Show resolved Hide resolved
shadowBlur: 0,
shadowColor: '',
Ovilia marked this conversation as resolved.
Show resolved Hide resolved
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
}
}
});
210 changes: 198 additions & 12 deletions src/chart/bar/BarView.js
View file
Open in desktop
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,50 @@ export default echarts.extendChartView({

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

var backgroundModel = seriesModel.getModel('backgroundStyle');
Ovilia marked this conversation as resolved.
Show resolved Hide resolved
var backgroundColor = backgroundModel.get('color');

// Not create background element for transparent one to improve efficiency
var drawBackground = backgroundColor !== 'transparent' && backgroundColor !== 'none';

Ovilia marked this conversation as resolved.
Show resolved Hide resolved
var backgroundGroup = group.childOfName('background');
if (backgroundGroup && !drawBackground) {
group.remove(backgroundGroup);
}
else if (!backgroundGroup) {
backgroundGroup = new Group();
backgroundGroup.name = 'background';
group.add(backgroundGroup);
}
var oldLargeBackgroundEl = group.childOfName('largeBackground');
Ovilia marked this conversation as resolved.
Show resolved Hide resolved
if (oldLargeBackgroundEl) {
// Always remove large background because it is supposed to be rerendered.
group.remove(oldLargeBackgroundEl);
}

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

if (drawBackground) {
that._renderBackground(
backgroundGroup,
null,
dataIndex,
coord,
isHorizontalOrRadial,
layout,
backgroundModel,
animationModel
);
}

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 +194,32 @@ 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) {
that._renderBackground(
backgroundGroup,
oldIndex,
newIndex,
coord,
isHorizontalOrRadial,
layout,
backgroundModel,
animationModel
);
}
else {
var bgEl = backgroundGroup.childOfName(oldIndex + '');
backgroundGroup.remove(bgEl);
}

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 @@ -195,6 +247,11 @@ export default echarts.extendChartView({
);
})
.remove(function (dataIndex) {
var bgEl = backgroundGroup.childOfName(dataIndex + '');
if (bgEl) {
Ovilia marked this conversation as resolved.
Show resolved Hide resolved
backgroundGroup.remove(bgEl);
}

var el = oldData.getItemGraphicEl(dataIndex);
if (coord.type === 'cartesian2d') {
el && removeRect(dataIndex, animationModel, el);
Expand Down Expand Up @@ -228,6 +285,54 @@ export default echarts.extendChartView({
createLarge(seriesModel, this.group, true);
},

_renderBackground: function (
backgroundGroup,
oldIndex,
newIndex,
coord,
isHorizontalOrRadial,
layout,
backgroundModel,
animationModel
) {
var coordLayout;
var isPolar = coord.type === 'polar';
if (isPolar) {
coordLayout = coord.getArea();
}
else {
coordLayout = coord.grid.getRect();
}

var bgEl = oldIndex != null && backgroundGroup.childOfName(oldIndex + '');
if (bgEl) {
backgroundGroup.remove(bgEl);
graphic.updateProps(bgEl, {
shape: getBackgroundShape(isPolar, isHorizontalOrRadial, layout, coordLayout),
style: backgroundModel.getBarItemStyle()
}, animationModel, newIndex);
}
else {
if (isPolar) {
bgEl = new graphic.Sector({
shape: getBackgroundShape(isPolar, isHorizontalOrRadial, layout, coordLayout),
silent: true,
z2: 0
});
}
else {
bgEl = new graphic.Rect({
shape: getBackgroundShape(isPolar, isHorizontalOrRadial, layout, coordLayout),
silent: true,
z2: 0
});
}
bgEl.useStyle(backgroundModel.getBarItemStyle());
}
bgEl.name = newIndex + '';
backgroundGroup.add(bgEl);
},

dispose: zrUtil.noop,

remove: function (ecModel) {
Expand All @@ -238,6 +343,9 @@ export default echarts.extendChartView({
var group = this.group;
var data = this._data;
if (ecModel && ecModel.get('animation') && data && !this._isLargeDraw) {
group.remove(group.childOfName('background'));
group.remove(group.childOfName('largeBackground'));

data.eachItemGraphicEl(function (el) {
if (el.type === 'sector') {
removeSector(el.dataIndex, ecModel, el);
Expand Down Expand Up @@ -308,7 +416,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 +451,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 +576,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 +611,49 @@ 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 oldLargeBackgroundEl = group.childOfName('largeBackground');
if (oldLargeBackgroundEl) {
group.remove(oldLargeBackgroundEl);
}
var oldBackgroundEl = group.childOfName('background');
if (oldBackgroundEl) {
group.remove(oldBackgroundEl);
}

var backgroundModel = seriesModel.getModel('backgroundStyle');
Ovilia marked this conversation as resolved.
Show resolved Hide resolved
var backgroundColor = backgroundModel.get('color');
Ovilia marked this conversation as resolved.
Show resolved Hide resolved
var drawBackground = backgroundColor !== 'transparent' && backgroundColor !== 'none';
Ovilia marked this conversation as resolved.
Show resolved Hide resolved

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);
bgEl.name = 'largeBackground';
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 +718,34 @@ 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 getBackgroundShape(isPolar, isHorizontalOrRadial, layout, coordLayout) {
Ovilia marked this conversation as resolved.
Show resolved Hide resolved
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
};
}
}

11 changes: 6 additions & 5 deletions src/layout/barGrid.js
View file
Open in desktop
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
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