lepu-test-platform-web/node_modules/echarts/lib/chart/bar/BarView.js

698 lines
22 KiB
JavaScript

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var _config = require("../../config");
var __DEV__ = _config.__DEV__;
var echarts = require("../../echarts");
var zrUtil = require("zrender/lib/core/util");
var graphic = require("../../util/graphic");
var _helper = require("./helper");
var setLabel = _helper.setLabel;
var Model = require("../../model/Model");
var barItemStyle = require("./barItemStyle");
var Path = require("zrender/lib/graphic/Path");
var Group = require("zrender/lib/container/Group");
var _throttle = require("../../util/throttle");
var throttle = _throttle.throttle;
var _createClipPathFromCoordSys = require("../helper/createClipPathFromCoordSys");
var createClipPath = _createClipPathFromCoordSys.createClipPath;
var Sausage = require("../../util/shape/sausage");
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'barBorderWidth'];
var _eventPos = [0, 0]; // FIXME
// 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;
}
var _default = echarts.extendChartView({
type: 'bar',
render: function (seriesModel, ecModel, api) {
this._updateDrawMode(seriesModel);
var coordinateSystemType = seriesModel.get('coordinateSystem');
if (coordinateSystemType === 'cartesian2d' || coordinateSystemType === 'polar') {
this._isLargeDraw ? this._renderLarge(seriesModel, ecModel, api) : this._renderNormal(seriesModel, ecModel, api);
} else {}
return this.group;
},
incrementalPrepareRender: function (seriesModel, ecModel, api) {
this._clear();
this._updateDrawMode(seriesModel);
},
incrementalRender: function (params, seriesModel, ecModel, api) {
// Do not support progressive in normal mode.
this._incrementalRenderLarge(params, seriesModel);
},
_updateDrawMode: function (seriesModel) {
var isLargeDraw = seriesModel.pipelineContext.large;
if (this._isLargeDraw == null || isLargeDraw ^ this._isLargeDraw) {
this._isLargeDraw = isLargeDraw;
this._clear();
}
},
_renderNormal: function (seriesModel, ecModel, api) {
var group = this.group;
var data = seriesModel.getData();
var oldData = this._data;
var coord = seriesModel.coordinateSystem;
var baseAxis = coord.getBaseAxis();
var isHorizontalOrRadial;
if (coord.type === 'cartesian2d') {
isHorizontalOrRadial = baseAxis.isHorizontal();
} else if (coord.type === 'polar') {
isHorizontalOrRadial = baseAxis.dim === 'angle';
}
var animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;
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
// And don't want the label are clipped.
var roundCap = seriesModel.get('roundCap', true);
var drawBackground = seriesModel.get('showBackground', true);
var backgroundModel = seriesModel.getModel('backgroundStyle');
var barBorderRadius = backgroundModel.get('barBorderRadius') || 0;
var bgEls = [];
var oldBgEls = this._backgroundEls || [];
var createBackground = function (dataIndex) {
var bgLayout = getLayout[coord.type](data, dataIndex);
var bgEl = createBackgroundEl(coord, isHorizontalOrRadial, bgLayout);
bgEl.useStyle(backgroundModel.getBarItemStyle()); // Only cartesian2d support borderRadius.
if (coord.type === 'cartesian2d') {
bgEl.setShape('r', barBorderRadius);
}
bgEls[dataIndex] = bgEl;
return bgEl;
};
data.diff(oldData).add(function (dataIndex) {
var itemModel = data.getItemModel(dataIndex);
var layout = getLayout[coord.type](data, dataIndex, itemModel);
if (drawBackground) {
createBackground(dataIndex);
} // If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
if (!data.hasValue(dataIndex)) {
return;
}
if (needsClip) {
// Clip will modify the layout params.
// And return a boolean to determine if the shape are fully clipped.
var isClipped = clip[coord.type](coordSysClipArea, layout);
if (isClipped) {
group.remove(el);
return;
}
}
var el = elementCreator[coord.type](dataIndex, layout, isHorizontalOrRadial, animationModel, false, roundCap);
data.setItemGraphicEl(dataIndex, el);
group.add(el);
updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, coord.type === 'polar');
}).update(function (newIndex, oldIndex) {
var itemModel = data.getItemModel(newIndex);
var layout = getLayout[coord.type](data, newIndex, itemModel);
if (drawBackground) {
var bgEl;
if (oldBgEls.length === 0) {
bgEl = createBackground(oldIndex);
} else {
bgEl = oldBgEls[oldIndex];
bgEl.useStyle(backgroundModel.getBarItemStyle()); // Only cartesian2d support borderRadius.
if (coord.type === 'cartesian2d') {
bgEl.setShape('r', barBorderRadius);
}
bgEls[newIndex] = bgEl;
}
var bgLayout = getLayout[coord.type](data, newIndex);
var shape = createBackgroundShape(isHorizontalOrRadial, bgLayout, coord);
graphic.updateProps(bgEl, {
shape: shape
}, animationModel, newIndex);
}
var el = oldData.getItemGraphicEl(oldIndex);
if (!data.hasValue(newIndex)) {
group.remove(el);
return;
}
if (needsClip) {
var isClipped = clip[coord.type](coordSysClipArea, layout);
if (isClipped) {
group.remove(el);
return;
}
}
if (el) {
graphic.updateProps(el, {
shape: layout
}, animationModel, newIndex);
} else {
el = elementCreator[coord.type](newIndex, layout, isHorizontalOrRadial, animationModel, true, roundCap);
}
data.setItemGraphicEl(newIndex, el); // Add back
group.add(el);
updateStyle(el, data, newIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, coord.type === 'polar');
}).remove(function (dataIndex) {
var el = oldData.getItemGraphicEl(dataIndex);
if (coord.type === 'cartesian2d') {
el && removeRect(dataIndex, animationModel, el);
} else {
el && removeSector(dataIndex, animationModel, el);
}
}).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;
},
_renderLarge: function (seriesModel, ecModel, api) {
this._clear();
createLarge(seriesModel, this.group); // Use clipPath in large mode.
var clipPath = seriesModel.get('clip', true) ? createClipPath(seriesModel.coordinateSystem, false, seriesModel) : null;
if (clipPath) {
this.group.setClipPath(clipPath);
} else {
this.group.removeClipPath();
}
},
_incrementalRenderLarge: function (params, seriesModel) {
this._removeBackground();
createLarge(seriesModel, this.group, true);
},
dispose: zrUtil.noop,
remove: function (ecModel) {
this._clear(ecModel);
},
_clear: function (ecModel) {
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);
} else {
removeRect(el.dataIndex, ecModel, el);
}
});
} else {
group.removeAll();
}
this._data = null;
},
_removeBackground: function () {
this.group.remove(this._backgroundGroup);
this._backgroundGroup = null;
}
});
var mathMax = Math.max;
var mathMin = Math.min;
var clip = {
cartesian2d: function (coordSysBoundingRect, layout) {
var signWidth = layout.width < 0 ? -1 : 1;
var signHeight = layout.height < 0 ? -1 : 1; // Needs positive width and height
if (signWidth < 0) {
layout.x += layout.width;
layout.width = -layout.width;
}
if (signHeight < 0) {
layout.y += layout.height;
layout.height = -layout.height;
}
var x = mathMax(layout.x, coordSysBoundingRect.x);
var x2 = mathMin(layout.x + layout.width, coordSysBoundingRect.x + coordSysBoundingRect.width);
var y = mathMax(layout.y, coordSysBoundingRect.y);
var y2 = mathMin(layout.y + layout.height, coordSysBoundingRect.y + coordSysBoundingRect.height);
layout.x = x;
layout.y = y;
layout.width = x2 - x;
layout.height = y2 - y;
var clipped = layout.width < 0 || layout.height < 0; // Reverse back
if (signWidth < 0) {
layout.x += layout.width;
layout.width = -layout.width;
}
if (signHeight < 0) {
layout.y += layout.height;
layout.height = -layout.height;
}
return clipped;
},
polar: function (coordSysClipArea, layout) {
var signR = layout.r0 <= layout.r ? 1 : -1; // Make sure r is larger than r0
if (signR < 0) {
var r = layout.r;
layout.r = layout.r0;
layout.r0 = r;
}
var r = mathMin(layout.r, coordSysClipArea.r);
var r0 = mathMax(layout.r0, coordSysClipArea.r0);
layout.r = r;
layout.r0 = r0;
var clipped = r - r0 < 0; // Reverse back
if (signR < 0) {
var r = layout.r;
layout.r = layout.r0;
layout.r0 = r;
}
return clipped;
}
};
var elementCreator = {
cartesian2d: function (dataIndex, layout, isHorizontal, animationModel, isUpdate) {
var rect = new graphic.Rect({
shape: zrUtil.extend({}, layout),
z2: 1
});
rect.name = 'item'; // Animation
if (animationModel) {
var rectShape = rect.shape;
var animateProperty = isHorizontal ? 'height' : 'width';
var animateTarget = {};
rectShape[animateProperty] = 0;
animateTarget[animateProperty] = layout[animateProperty];
graphic[isUpdate ? 'updateProps' : 'initProps'](rect, {
shape: animateTarget
}, animationModel, dataIndex);
}
return rect;
},
polar: function (dataIndex, layout, isRadial, animationModel, isUpdate, roundCap) {
// Keep the same logic with bar in catesion: use end value to control
// direction. Notice that if clockwise is true (by default), the sector
// will always draw clockwisely, no matter whether endAngle is greater
// or less than startAngle.
var clockwise = layout.startAngle < layout.endAngle;
var ShapeClass = !isRadial && roundCap ? Sausage : graphic.Sector;
var sector = new ShapeClass({
shape: zrUtil.defaults({
clockwise: clockwise
}, layout),
z2: 1
});
sector.name = 'item'; // Animation
if (animationModel) {
var sectorShape = sector.shape;
var animateProperty = isRadial ? 'r' : 'endAngle';
var animateTarget = {};
sectorShape[animateProperty] = isRadial ? 0 : layout.startAngle;
animateTarget[animateProperty] = layout[animateProperty];
graphic[isUpdate ? 'updateProps' : 'initProps'](sector, {
shape: animateTarget
}, animationModel, dataIndex);
}
return sector;
}
};
function removeRect(dataIndex, animationModel, el) {
// Not show text when animating
el.style.text = null;
graphic.updateProps(el, {
shape: {
width: 0
}
}, animationModel, dataIndex, function () {
el.parent && el.parent.remove(el);
});
}
function removeSector(dataIndex, animationModel, el) {
// Not show text when animating
el.style.text = null;
graphic.updateProps(el, {
shape: {
r: el.shape.r0
}
}, animationModel, dataIndex, function () {
el.parent && el.parent.remove(el);
});
}
var getLayout = {
// itemModel is only used to get borderWidth, which is not needed
// when calculating bar background layout.
cartesian2d: function (data, dataIndex, itemModel) {
var layout = data.getItemLayout(dataIndex);
var fixedLineWidth = itemModel ? getLineWidth(itemModel, layout) : 0; // fix layout with lineWidth
var signX = layout.width > 0 ? 1 : -1;
var signY = layout.height > 0 ? 1 : -1;
return {
x: layout.x + signX * fixedLineWidth / 2,
y: layout.y + signY * fixedLineWidth / 2,
width: layout.width - signX * fixedLineWidth,
height: layout.height - signY * fixedLineWidth
};
},
polar: function (data, dataIndex, itemModel) {
var layout = data.getItemLayout(dataIndex);
return {
cx: layout.cx,
cy: layout.cy,
r0: layout.r0,
r: layout.r,
startAngle: layout.startAngle,
endAngle: layout.endAngle
};
}
};
function isZeroOnPolar(layout) {
return layout.startAngle != null && layout.endAngle != null && layout.startAngle === layout.endAngle;
}
function updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontal, isPolar) {
var color = data.getItemVisual(dataIndex, 'color');
var opacity = data.getItemVisual(dataIndex, 'opacity');
var stroke = data.getVisual('borderColor');
var itemStyleModel = itemModel.getModel('itemStyle');
var hoverStyle = itemModel.getModel('emphasis.itemStyle').getBarItemStyle();
if (!isPolar) {
el.setShape('r', itemStyleModel.get('barBorderRadius') || 0);
}
el.useStyle(zrUtil.defaults({
stroke: isZeroOnPolar(layout) ? 'none' : stroke,
fill: isZeroOnPolar(layout) ? 'none' : color,
opacity: opacity
}, itemStyleModel.getBarItemStyle()));
var cursorStyle = itemModel.getShallow('cursor');
cursorStyle && el.attr('cursor', cursorStyle);
var labelPositionOutside = isHorizontal ? layout.height > 0 ? 'bottom' : 'top' : layout.width > 0 ? 'left' : 'right';
if (!isPolar) {
setLabel(el.style, hoverStyle, itemModel, color, seriesModel, dataIndex, labelPositionOutside);
}
if (isZeroOnPolar(layout)) {
hoverStyle.fill = hoverStyle.stroke = 'none';
}
graphic.setHoverStyle(el, hoverStyle);
} // In case width or height are too small.
function getLineWidth(itemModel, rawLayout) {
var lineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0; // 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);
}
var LargePath = Path.extend({
type: 'largeBar',
shape: {
points: []
},
buildPath: function (ctx, shape) {
// Drawing lines is more efficient than drawing
// a whole line or drawing rects.
var points = shape.points;
var startPoint = this.__startPoint;
var baseDimIdx = this.__baseDimIdx;
for (var i = 0; i < points.length; i += 2) {
startPoint[baseDimIdx] = points[i + baseDimIdx];
ctx.moveTo(startPoint[0], startPoint[1]);
ctx.lineTo(points[i], points[i + 1]);
}
}
});
function createLarge(seriesModel, group, incremental) {
// TODO support polar
var data = seriesModel.getData();
var startPoint = [];
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: largeDataIndices,
__barWidth: barWidth
});
group.add(el);
setLargeStyle(el, seriesModel, data); // Enable tooltip and user mouse/touch event handlers.
el.seriesIndex = seriesModel.seriesIndex;
if (!seriesModel.get('silent')) {
el.on('mousedown', largePathUpdateDataIndex);
el.on('mousemove', largePathUpdateDataIndex);
}
} // Use throttle to avoid frequently traverse to find dataIndex.
var largePathUpdateDataIndex = throttle(function (event) {
var largePath = this;
var dataIndex = largePathFindDataIndex(largePath, event.offsetX, event.offsetY);
largePath.dataIndex = dataIndex >= 0 ? dataIndex : null;
}, 30, false);
function largePathFindDataIndex(largePath, x, y) {
var baseDimIdx = largePath.__baseDimIdx;
var valueDimIdx = 1 - baseDimIdx;
var points = largePath.shape.points;
var largeDataIndices = largePath.__largeDataIndices;
var barWidthHalf = Math.abs(largePath.__barWidth / 2);
var startValueVal = largePath.__startPoint[valueDimIdx];
_eventPos[0] = x;
_eventPos[1] = y;
var pointerBaseVal = _eventPos[baseDimIdx];
var pointerValueVal = _eventPos[1 - baseDimIdx];
var baseLowerBound = pointerBaseVal - barWidthHalf;
var baseUpperBound = pointerBaseVal + barWidthHalf;
for (var i = 0, len = points.length / 2; i < len; i++) {
var ii = i * 2;
var barBaseVal = points[ii + baseDimIdx];
var barValueVal = points[ii + valueDimIdx];
if (barBaseVal >= baseLowerBound && barBaseVal <= baseUpperBound && (startValueVal <= barValueVal ? pointerValueVal >= startValueVal && pointerValueVal <= barValueVal : pointerValueVal >= barValueVal && pointerValueVal <= startValueVal)) {
return largeDataIndices[i];
}
}
return -1;
}
function setLargeStyle(el, seriesModel, data) {
var borderColor = data.getVisual('borderColor') || data.getVisual('color');
var itemStyle = seriesModel.getModel('itemStyle').getItemStyle(['color', 'borderColor']);
el.useStyle(itemStyle);
el.style.fill = null;
el.style.stroke = borderColor;
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
});
}
module.exports = _default;