diff --git a/src/chart/bar/BarSeries.js b/src/chart/bar/BarSeries.js index 0f34f9c6c4..3809819466 100644 --- a/src/chart/bar/BarSeries.js +++ b/src/chart/bar/BarSeries.js @@ -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: { + color: 'transparent', + borderColor: '#000', + borderWidth: '0', + borderType: 'solid', + barBorderRadius: 0, + shadowBlur: 0, + shadowColor: '', + shadowOffsetX: 0, + shadowOffsetY: 0, + opacity: 1 + } } }); diff --git a/src/chart/bar/BarView.js b/src/chart/bar/BarView.js index c9d0d047ba..367f1f69eb 100644 --- a/src/chart/bar/BarView.js +++ b/src/chart/bar/BarView.js @@ -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'; @@ -106,6 +107,7 @@ export default echarts.extendChartView({ var oldData = this._data; var coord = seriesModel.coordinateSystem; + var coordRect = coord.grid.getRect(); var baseAxis = coord.getBaseAxis(); var isHorizontalOrRadial; @@ -127,15 +129,43 @@ export default echarts.extendChartView({ var roundCap = seriesModel.get('roundCap', true); + var backgroundModel = seriesModel.getModel('backgroundStyle'); + var backgroundColor = backgroundModel.get('color'); + var drawBackground = backgroundColor !== 'transparent' && backgroundColor !== 'none'; + + var backgroundGroup = group.childOfName('background'); + if (backgroundGroup && !drawBackground) { + group.remove(backgroundGroup); + } + else if (!backgroundGroup) { + backgroundGroup = new Group(); + backgroundGroup.name = 'background'; + group.add(backgroundGroup); + } + + 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, + dataIndex, + coord.type === 'polar', + isHorizontalOrRadial, + layout, + coordRect, + 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. @@ -158,16 +188,28 @@ 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, + coord.type === 'polar', + isHorizontalOrRadial, + layout, + coordRect, + backgroundModel, + animationModel + ); + } + + 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) { @@ -228,9 +270,59 @@ export default echarts.extendChartView({ createLarge(seriesModel, this.group, true); }, + _renderBackground: function ( + backgroundGroup, + dataIndex, + isPolar, + isHorizontalOrRadial, + layout, + coordRect, + backgroundModel, + animationModel + ) { + var bgEl = backgroundGroup.childOfName(dataIndex + ''); + if (bgEl) { + graphic.updateProps(bgEl, { + shape: this._getBackgroundShape(isPolar, isHorizontalOrRadial, layout, coordRect), + style: backgroundModel.getBarItemStyle() + }, animationModel, dataIndex); + } + else { + if (!isPolar) { + bgEl = new graphic.Rect({ + shape: this._getBackgroundShape(isPolar, isHorizontalOrRadial, layout, coordRect), + silent: true, + z2: 0 + }); + } + bgEl.useStyle(backgroundModel.getBarItemStyle()); + bgEl.name = dataIndex + ''; + backgroundGroup.add(bgEl); + } + }, + + _getBackgroundShape: function (isPolar, isHorizontalOrRadial, layout, coordRect) { + if (isPolar) { + + } + else { + return { + x: isHorizontalOrRadial ? layout.x : coordRect.x, + y: isHorizontalOrRadial ? coordRect.y : layout.y, + width: isHorizontalOrRadial ? layout.width : coordRect.width, + height: isHorizontalOrRadial ? coordRect.height : layout.height + }; + } + }, + dispose: zrUtil.noop, remove: function (ecModel) { + var backgroundGroup = this.group.childOfName('background'); + if (backgroundGroup) { + this.group.remove(backgroundGroup); + } + this._clear(ecModel); }, @@ -308,7 +400,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) { @@ -338,9 +435,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; @@ -460,7 +560,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); } diff --git a/src/layout/barGrid.js b/src/layout/barGrid.js index 889e4a8afd..b317765557 100644 --- a/src/layout/barGrid.js +++ b/src/layout/barGrid.js @@ -421,9 +421,9 @@ export function layout(seriesType, ecModel) { 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; - } + // if (isNaN(value) || isNaN(baseValue)) { + // continue; + // } var sign = value >= 0 ? 'p' : 'n'; var baseCoord = valueAxisStart; @@ -472,6 +472,7 @@ export function layout(seriesType, ecModel) { } stacked && (lastStackCoords[stackId][baseValue][sign] += height); } + console.log(x, y, width, height); data.setItemLayout(idx, { x: x,