677 lines
24 KiB
JavaScript
677 lines
24 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 echarts = require("../../echarts");
|
||
|
|
||
|
var zrUtil = require("zrender/lib/core/util");
|
||
|
|
||
|
var graphic = require("../../util/graphic");
|
||
|
|
||
|
var _symbol = require("../../util/symbol");
|
||
|
|
||
|
var createSymbol = _symbol.createSymbol;
|
||
|
|
||
|
var _number = require("../../util/number");
|
||
|
|
||
|
var parsePercent = _number.parsePercent;
|
||
|
var isNumeric = _number.isNumeric;
|
||
|
|
||
|
var _helper = require("./helper");
|
||
|
|
||
|
var setLabel = _helper.setLabel;
|
||
|
|
||
|
/*
|
||
|
* 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', 'borderWidth']; // index: +isHorizontal
|
||
|
|
||
|
var LAYOUT_ATTRS = [{
|
||
|
xy: 'x',
|
||
|
wh: 'width',
|
||
|
index: 0,
|
||
|
posDesc: ['left', 'right']
|
||
|
}, {
|
||
|
xy: 'y',
|
||
|
wh: 'height',
|
||
|
index: 1,
|
||
|
posDesc: ['top', 'bottom']
|
||
|
}];
|
||
|
var pathForLineWidth = new graphic.Circle();
|
||
|
var BarView = echarts.extendChartView({
|
||
|
type: 'pictorialBar',
|
||
|
render: function (seriesModel, ecModel, api) {
|
||
|
var group = this.group;
|
||
|
var data = seriesModel.getData();
|
||
|
var oldData = this._data;
|
||
|
var cartesian = seriesModel.coordinateSystem;
|
||
|
var baseAxis = cartesian.getBaseAxis();
|
||
|
var isHorizontal = !!baseAxis.isHorizontal();
|
||
|
var coordSysRect = cartesian.grid.getRect();
|
||
|
var opt = {
|
||
|
ecSize: {
|
||
|
width: api.getWidth(),
|
||
|
height: api.getHeight()
|
||
|
},
|
||
|
seriesModel: seriesModel,
|
||
|
coordSys: cartesian,
|
||
|
coordSysExtent: [[coordSysRect.x, coordSysRect.x + coordSysRect.width], [coordSysRect.y, coordSysRect.y + coordSysRect.height]],
|
||
|
isHorizontal: isHorizontal,
|
||
|
valueDim: LAYOUT_ATTRS[+isHorizontal],
|
||
|
categoryDim: LAYOUT_ATTRS[1 - isHorizontal]
|
||
|
};
|
||
|
data.diff(oldData).add(function (dataIndex) {
|
||
|
if (!data.hasValue(dataIndex)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var itemModel = getItemModel(data, dataIndex);
|
||
|
var symbolMeta = getSymbolMeta(data, dataIndex, itemModel, opt);
|
||
|
var bar = createBar(data, opt, symbolMeta);
|
||
|
data.setItemGraphicEl(dataIndex, bar);
|
||
|
group.add(bar);
|
||
|
updateCommon(bar, opt, symbolMeta);
|
||
|
}).update(function (newIndex, oldIndex) {
|
||
|
var bar = oldData.getItemGraphicEl(oldIndex);
|
||
|
|
||
|
if (!data.hasValue(newIndex)) {
|
||
|
group.remove(bar);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var itemModel = getItemModel(data, newIndex);
|
||
|
var symbolMeta = getSymbolMeta(data, newIndex, itemModel, opt);
|
||
|
var pictorialShapeStr = getShapeStr(data, symbolMeta);
|
||
|
|
||
|
if (bar && pictorialShapeStr !== bar.__pictorialShapeStr) {
|
||
|
group.remove(bar);
|
||
|
data.setItemGraphicEl(newIndex, null);
|
||
|
bar = null;
|
||
|
}
|
||
|
|
||
|
if (bar) {
|
||
|
updateBar(bar, opt, symbolMeta);
|
||
|
} else {
|
||
|
bar = createBar(data, opt, symbolMeta, true);
|
||
|
}
|
||
|
|
||
|
data.setItemGraphicEl(newIndex, bar);
|
||
|
bar.__pictorialSymbolMeta = symbolMeta; // Add back
|
||
|
|
||
|
group.add(bar);
|
||
|
updateCommon(bar, opt, symbolMeta);
|
||
|
}).remove(function (dataIndex) {
|
||
|
var bar = oldData.getItemGraphicEl(dataIndex);
|
||
|
bar && removeBar(oldData, dataIndex, bar.__pictorialSymbolMeta.animationModel, bar);
|
||
|
}).execute();
|
||
|
this._data = data;
|
||
|
return this.group;
|
||
|
},
|
||
|
dispose: zrUtil.noop,
|
||
|
remove: function (ecModel, api) {
|
||
|
var group = this.group;
|
||
|
var data = this._data;
|
||
|
|
||
|
if (ecModel.get('animation')) {
|
||
|
if (data) {
|
||
|
data.eachItemGraphicEl(function (bar) {
|
||
|
removeBar(data, bar.dataIndex, ecModel, bar);
|
||
|
});
|
||
|
}
|
||
|
} else {
|
||
|
group.removeAll();
|
||
|
}
|
||
|
}
|
||
|
}); // Set or calculate default value about symbol, and calculate layout info.
|
||
|
|
||
|
function getSymbolMeta(data, dataIndex, itemModel, opt) {
|
||
|
var layout = data.getItemLayout(dataIndex);
|
||
|
var symbolRepeat = itemModel.get('symbolRepeat');
|
||
|
var symbolClip = itemModel.get('symbolClip');
|
||
|
var symbolPosition = itemModel.get('symbolPosition') || 'start';
|
||
|
var symbolRotate = itemModel.get('symbolRotate');
|
||
|
var rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
|
||
|
var symbolPatternSize = itemModel.get('symbolPatternSize') || 2;
|
||
|
var isAnimationEnabled = itemModel.isAnimationEnabled();
|
||
|
var symbolMeta = {
|
||
|
dataIndex: dataIndex,
|
||
|
layout: layout,
|
||
|
itemModel: itemModel,
|
||
|
symbolType: data.getItemVisual(dataIndex, 'symbol') || 'circle',
|
||
|
color: data.getItemVisual(dataIndex, 'color'),
|
||
|
symbolClip: symbolClip,
|
||
|
symbolRepeat: symbolRepeat,
|
||
|
symbolRepeatDirection: itemModel.get('symbolRepeatDirection'),
|
||
|
symbolPatternSize: symbolPatternSize,
|
||
|
rotation: rotation,
|
||
|
animationModel: isAnimationEnabled ? itemModel : null,
|
||
|
hoverAnimation: isAnimationEnabled && itemModel.get('hoverAnimation'),
|
||
|
z2: itemModel.getShallow('z', true) || 0
|
||
|
};
|
||
|
prepareBarLength(itemModel, symbolRepeat, layout, opt, symbolMeta);
|
||
|
prepareSymbolSize(data, dataIndex, layout, symbolRepeat, symbolClip, symbolMeta.boundingLength, symbolMeta.pxSign, symbolPatternSize, opt, symbolMeta);
|
||
|
prepareLineWidth(itemModel, symbolMeta.symbolScale, rotation, opt, symbolMeta);
|
||
|
var symbolSize = symbolMeta.symbolSize;
|
||
|
var symbolOffset = itemModel.get('symbolOffset');
|
||
|
|
||
|
if (zrUtil.isArray(symbolOffset)) {
|
||
|
symbolOffset = [parsePercent(symbolOffset[0], symbolSize[0]), parsePercent(symbolOffset[1], symbolSize[1])];
|
||
|
}
|
||
|
|
||
|
prepareLayoutInfo(itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset, symbolPosition, symbolMeta.valueLineWidth, symbolMeta.boundingLength, symbolMeta.repeatCutLength, opt, symbolMeta);
|
||
|
return symbolMeta;
|
||
|
} // bar length can be negative.
|
||
|
|
||
|
|
||
|
function prepareBarLength(itemModel, symbolRepeat, layout, opt, output) {
|
||
|
var valueDim = opt.valueDim;
|
||
|
var symbolBoundingData = itemModel.get('symbolBoundingData');
|
||
|
var valueAxis = opt.coordSys.getOtherAxis(opt.coordSys.getBaseAxis());
|
||
|
var zeroPx = valueAxis.toGlobalCoord(valueAxis.dataToCoord(0));
|
||
|
var pxSignIdx = 1 - +(layout[valueDim.wh] <= 0);
|
||
|
var boundingLength;
|
||
|
|
||
|
if (zrUtil.isArray(symbolBoundingData)) {
|
||
|
var symbolBoundingExtent = [convertToCoordOnAxis(valueAxis, symbolBoundingData[0]) - zeroPx, convertToCoordOnAxis(valueAxis, symbolBoundingData[1]) - zeroPx];
|
||
|
symbolBoundingExtent[1] < symbolBoundingExtent[0] && symbolBoundingExtent.reverse();
|
||
|
boundingLength = symbolBoundingExtent[pxSignIdx];
|
||
|
} else if (symbolBoundingData != null) {
|
||
|
boundingLength = convertToCoordOnAxis(valueAxis, symbolBoundingData) - zeroPx;
|
||
|
} else if (symbolRepeat) {
|
||
|
boundingLength = opt.coordSysExtent[valueDim.index][pxSignIdx] - zeroPx;
|
||
|
} else {
|
||
|
boundingLength = layout[valueDim.wh];
|
||
|
}
|
||
|
|
||
|
output.boundingLength = boundingLength;
|
||
|
|
||
|
if (symbolRepeat) {
|
||
|
output.repeatCutLength = layout[valueDim.wh];
|
||
|
}
|
||
|
|
||
|
output.pxSign = boundingLength > 0 ? 1 : boundingLength < 0 ? -1 : 0;
|
||
|
}
|
||
|
|
||
|
function convertToCoordOnAxis(axis, value) {
|
||
|
return axis.toGlobalCoord(axis.dataToCoord(axis.scale.parse(value)));
|
||
|
} // Support ['100%', '100%']
|
||
|
|
||
|
|
||
|
function prepareSymbolSize(data, dataIndex, layout, symbolRepeat, symbolClip, boundingLength, pxSign, symbolPatternSize, opt, output) {
|
||
|
var valueDim = opt.valueDim;
|
||
|
var categoryDim = opt.categoryDim;
|
||
|
var categorySize = Math.abs(layout[categoryDim.wh]);
|
||
|
var symbolSize = data.getItemVisual(dataIndex, 'symbolSize');
|
||
|
|
||
|
if (zrUtil.isArray(symbolSize)) {
|
||
|
symbolSize = symbolSize.slice();
|
||
|
} else {
|
||
|
if (symbolSize == null) {
|
||
|
symbolSize = '100%';
|
||
|
}
|
||
|
|
||
|
symbolSize = [symbolSize, symbolSize];
|
||
|
} // Note: percentage symbolSize (like '100%') do not consider lineWidth, because it is
|
||
|
// to complicated to calculate real percent value if considering scaled lineWidth.
|
||
|
// So the actual size will bigger than layout size if lineWidth is bigger than zero,
|
||
|
// which can be tolerated in pictorial chart.
|
||
|
|
||
|
|
||
|
symbolSize[categoryDim.index] = parsePercent(symbolSize[categoryDim.index], categorySize);
|
||
|
symbolSize[valueDim.index] = parsePercent(symbolSize[valueDim.index], symbolRepeat ? categorySize : Math.abs(boundingLength));
|
||
|
output.symbolSize = symbolSize; // If x or y is less than zero, show reversed shape.
|
||
|
|
||
|
var symbolScale = output.symbolScale = [symbolSize[0] / symbolPatternSize, symbolSize[1] / symbolPatternSize]; // Follow convention, 'right' and 'top' is the normal scale.
|
||
|
|
||
|
symbolScale[valueDim.index] *= (opt.isHorizontal ? -1 : 1) * pxSign;
|
||
|
}
|
||
|
|
||
|
function prepareLineWidth(itemModel, symbolScale, rotation, opt, output) {
|
||
|
// In symbols are drawn with scale, so do not need to care about the case that width
|
||
|
// or height are too small. But symbol use strokeNoScale, where acture lineWidth should
|
||
|
// be calculated.
|
||
|
var valueLineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
|
||
|
|
||
|
if (valueLineWidth) {
|
||
|
pathForLineWidth.attr({
|
||
|
scale: symbolScale.slice(),
|
||
|
rotation: rotation
|
||
|
});
|
||
|
pathForLineWidth.updateTransform();
|
||
|
valueLineWidth /= pathForLineWidth.getLineScale();
|
||
|
valueLineWidth *= symbolScale[opt.valueDim.index];
|
||
|
}
|
||
|
|
||
|
output.valueLineWidth = valueLineWidth;
|
||
|
}
|
||
|
|
||
|
function prepareLayoutInfo(itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset, symbolPosition, valueLineWidth, boundingLength, repeatCutLength, opt, output) {
|
||
|
var categoryDim = opt.categoryDim;
|
||
|
var valueDim = opt.valueDim;
|
||
|
var pxSign = output.pxSign;
|
||
|
var unitLength = Math.max(symbolSize[valueDim.index] + valueLineWidth, 0);
|
||
|
var pathLen = unitLength; // Note: rotation will not effect the layout of symbols, because user may
|
||
|
// want symbols to rotate on its center, which should not be translated
|
||
|
// when rotating.
|
||
|
|
||
|
if (symbolRepeat) {
|
||
|
var absBoundingLength = Math.abs(boundingLength);
|
||
|
var symbolMargin = zrUtil.retrieve(itemModel.get('symbolMargin'), '15%') + '';
|
||
|
var hasEndGap = false;
|
||
|
|
||
|
if (symbolMargin.lastIndexOf('!') === symbolMargin.length - 1) {
|
||
|
hasEndGap = true;
|
||
|
symbolMargin = symbolMargin.slice(0, symbolMargin.length - 1);
|
||
|
}
|
||
|
|
||
|
symbolMargin = parsePercent(symbolMargin, symbolSize[valueDim.index]);
|
||
|
var uLenWithMargin = Math.max(unitLength + symbolMargin * 2, 0); // When symbol margin is less than 0, margin at both ends will be subtracted
|
||
|
// to ensure that all of the symbols will not be overflow the given area.
|
||
|
|
||
|
var endFix = hasEndGap ? 0 : symbolMargin * 2; // Both final repeatTimes and final symbolMargin area calculated based on
|
||
|
// boundingLength.
|
||
|
|
||
|
var repeatSpecified = isNumeric(symbolRepeat);
|
||
|
var repeatTimes = repeatSpecified ? symbolRepeat : toIntTimes((absBoundingLength + endFix) / uLenWithMargin); // Adjust calculate margin, to ensure each symbol is displayed
|
||
|
// entirely in the given layout area.
|
||
|
|
||
|
var mDiff = absBoundingLength - repeatTimes * unitLength;
|
||
|
symbolMargin = mDiff / 2 / (hasEndGap ? repeatTimes : repeatTimes - 1);
|
||
|
uLenWithMargin = unitLength + symbolMargin * 2;
|
||
|
endFix = hasEndGap ? 0 : symbolMargin * 2; // Update repeatTimes when not all symbol will be shown.
|
||
|
|
||
|
if (!repeatSpecified && symbolRepeat !== 'fixed') {
|
||
|
repeatTimes = repeatCutLength ? toIntTimes((Math.abs(repeatCutLength) + endFix) / uLenWithMargin) : 0;
|
||
|
}
|
||
|
|
||
|
pathLen = repeatTimes * uLenWithMargin - endFix;
|
||
|
output.repeatTimes = repeatTimes;
|
||
|
output.symbolMargin = symbolMargin;
|
||
|
}
|
||
|
|
||
|
var sizeFix = pxSign * (pathLen / 2);
|
||
|
var pathPosition = output.pathPosition = [];
|
||
|
pathPosition[categoryDim.index] = layout[categoryDim.wh] / 2;
|
||
|
pathPosition[valueDim.index] = symbolPosition === 'start' ? sizeFix : symbolPosition === 'end' ? boundingLength - sizeFix : boundingLength / 2; // 'center'
|
||
|
|
||
|
if (symbolOffset) {
|
||
|
pathPosition[0] += symbolOffset[0];
|
||
|
pathPosition[1] += symbolOffset[1];
|
||
|
}
|
||
|
|
||
|
var bundlePosition = output.bundlePosition = [];
|
||
|
bundlePosition[categoryDim.index] = layout[categoryDim.xy];
|
||
|
bundlePosition[valueDim.index] = layout[valueDim.xy];
|
||
|
var barRectShape = output.barRectShape = zrUtil.extend({}, layout);
|
||
|
barRectShape[valueDim.wh] = pxSign * Math.max(Math.abs(layout[valueDim.wh]), Math.abs(pathPosition[valueDim.index] + sizeFix));
|
||
|
barRectShape[categoryDim.wh] = layout[categoryDim.wh];
|
||
|
var clipShape = output.clipShape = {}; // Consider that symbol may be overflow layout rect.
|
||
|
|
||
|
clipShape[categoryDim.xy] = -layout[categoryDim.xy];
|
||
|
clipShape[categoryDim.wh] = opt.ecSize[categoryDim.wh];
|
||
|
clipShape[valueDim.xy] = 0;
|
||
|
clipShape[valueDim.wh] = layout[valueDim.wh];
|
||
|
}
|
||
|
|
||
|
function createPath(symbolMeta) {
|
||
|
var symbolPatternSize = symbolMeta.symbolPatternSize;
|
||
|
var path = createSymbol( // Consider texture img, make a big size.
|
||
|
symbolMeta.symbolType, -symbolPatternSize / 2, -symbolPatternSize / 2, symbolPatternSize, symbolPatternSize, symbolMeta.color);
|
||
|
path.attr({
|
||
|
culling: true
|
||
|
});
|
||
|
path.type !== 'image' && path.setStyle({
|
||
|
strokeNoScale: true
|
||
|
});
|
||
|
return path;
|
||
|
}
|
||
|
|
||
|
function createOrUpdateRepeatSymbols(bar, opt, symbolMeta, isUpdate) {
|
||
|
var bundle = bar.__pictorialBundle;
|
||
|
var symbolSize = symbolMeta.symbolSize;
|
||
|
var valueLineWidth = symbolMeta.valueLineWidth;
|
||
|
var pathPosition = symbolMeta.pathPosition;
|
||
|
var valueDim = opt.valueDim;
|
||
|
var repeatTimes = symbolMeta.repeatTimes || 0;
|
||
|
var index = 0;
|
||
|
var unit = symbolSize[opt.valueDim.index] + valueLineWidth + symbolMeta.symbolMargin * 2;
|
||
|
eachPath(bar, function (path) {
|
||
|
path.__pictorialAnimationIndex = index;
|
||
|
path.__pictorialRepeatTimes = repeatTimes;
|
||
|
|
||
|
if (index < repeatTimes) {
|
||
|
updateAttr(path, null, makeTarget(index), symbolMeta, isUpdate);
|
||
|
} else {
|
||
|
updateAttr(path, null, {
|
||
|
scale: [0, 0]
|
||
|
}, symbolMeta, isUpdate, function () {
|
||
|
bundle.remove(path);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
updateHoverAnimation(path, symbolMeta);
|
||
|
index++;
|
||
|
});
|
||
|
|
||
|
for (; index < repeatTimes; index++) {
|
||
|
var path = createPath(symbolMeta);
|
||
|
path.__pictorialAnimationIndex = index;
|
||
|
path.__pictorialRepeatTimes = repeatTimes;
|
||
|
bundle.add(path);
|
||
|
var target = makeTarget(index);
|
||
|
updateAttr(path, {
|
||
|
position: target.position,
|
||
|
scale: [0, 0]
|
||
|
}, {
|
||
|
scale: target.scale,
|
||
|
rotation: target.rotation
|
||
|
}, symbolMeta, isUpdate); // FIXME
|
||
|
// If all emphasis/normal through action.
|
||
|
|
||
|
path.on('mouseover', onMouseOver).on('mouseout', onMouseOut);
|
||
|
updateHoverAnimation(path, symbolMeta);
|
||
|
}
|
||
|
|
||
|
function makeTarget(index) {
|
||
|
var position = pathPosition.slice(); // (start && pxSign > 0) || (end && pxSign < 0): i = repeatTimes - index
|
||
|
// Otherwise: i = index;
|
||
|
|
||
|
var pxSign = symbolMeta.pxSign;
|
||
|
var i = index;
|
||
|
|
||
|
if (symbolMeta.symbolRepeatDirection === 'start' ? pxSign > 0 : pxSign < 0) {
|
||
|
i = repeatTimes - 1 - index;
|
||
|
}
|
||
|
|
||
|
position[valueDim.index] = unit * (i - repeatTimes / 2 + 0.5) + pathPosition[valueDim.index];
|
||
|
return {
|
||
|
position: position,
|
||
|
scale: symbolMeta.symbolScale.slice(),
|
||
|
rotation: symbolMeta.rotation
|
||
|
};
|
||
|
}
|
||
|
|
||
|
function onMouseOver() {
|
||
|
eachPath(bar, function (path) {
|
||
|
path.trigger('emphasis');
|
||
|
});
|
||
|
}
|
||
|
|
||
|
function onMouseOut() {
|
||
|
eachPath(bar, function (path) {
|
||
|
path.trigger('normal');
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function createOrUpdateSingleSymbol(bar, opt, symbolMeta, isUpdate) {
|
||
|
var bundle = bar.__pictorialBundle;
|
||
|
var mainPath = bar.__pictorialMainPath;
|
||
|
|
||
|
if (!mainPath) {
|
||
|
mainPath = bar.__pictorialMainPath = createPath(symbolMeta);
|
||
|
bundle.add(mainPath);
|
||
|
updateAttr(mainPath, {
|
||
|
position: symbolMeta.pathPosition.slice(),
|
||
|
scale: [0, 0],
|
||
|
rotation: symbolMeta.rotation
|
||
|
}, {
|
||
|
scale: symbolMeta.symbolScale.slice()
|
||
|
}, symbolMeta, isUpdate);
|
||
|
mainPath.on('mouseover', onMouseOver).on('mouseout', onMouseOut);
|
||
|
} else {
|
||
|
updateAttr(mainPath, null, {
|
||
|
position: symbolMeta.pathPosition.slice(),
|
||
|
scale: symbolMeta.symbolScale.slice(),
|
||
|
rotation: symbolMeta.rotation
|
||
|
}, symbolMeta, isUpdate);
|
||
|
}
|
||
|
|
||
|
updateHoverAnimation(mainPath, symbolMeta);
|
||
|
|
||
|
function onMouseOver() {
|
||
|
this.trigger('emphasis');
|
||
|
}
|
||
|
|
||
|
function onMouseOut() {
|
||
|
this.trigger('normal');
|
||
|
}
|
||
|
} // bar rect is used for label.
|
||
|
|
||
|
|
||
|
function createOrUpdateBarRect(bar, symbolMeta, isUpdate) {
|
||
|
var rectShape = zrUtil.extend({}, symbolMeta.barRectShape);
|
||
|
var barRect = bar.__pictorialBarRect;
|
||
|
|
||
|
if (!barRect) {
|
||
|
barRect = bar.__pictorialBarRect = new graphic.Rect({
|
||
|
z2: 2,
|
||
|
shape: rectShape,
|
||
|
silent: true,
|
||
|
style: {
|
||
|
stroke: 'transparent',
|
||
|
fill: 'transparent',
|
||
|
lineWidth: 0
|
||
|
}
|
||
|
});
|
||
|
bar.add(barRect);
|
||
|
} else {
|
||
|
updateAttr(barRect, null, {
|
||
|
shape: rectShape
|
||
|
}, symbolMeta, isUpdate);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function createOrUpdateClip(bar, opt, symbolMeta, isUpdate) {
|
||
|
// If not clip, symbol will be remove and rebuilt.
|
||
|
if (symbolMeta.symbolClip) {
|
||
|
var clipPath = bar.__pictorialClipPath;
|
||
|
var clipShape = zrUtil.extend({}, symbolMeta.clipShape);
|
||
|
var valueDim = opt.valueDim;
|
||
|
var animationModel = symbolMeta.animationModel;
|
||
|
var dataIndex = symbolMeta.dataIndex;
|
||
|
|
||
|
if (clipPath) {
|
||
|
graphic.updateProps(clipPath, {
|
||
|
shape: clipShape
|
||
|
}, animationModel, dataIndex);
|
||
|
} else {
|
||
|
clipShape[valueDim.wh] = 0;
|
||
|
clipPath = new graphic.Rect({
|
||
|
shape: clipShape
|
||
|
});
|
||
|
|
||
|
bar.__pictorialBundle.setClipPath(clipPath);
|
||
|
|
||
|
bar.__pictorialClipPath = clipPath;
|
||
|
var target = {};
|
||
|
target[valueDim.wh] = symbolMeta.clipShape[valueDim.wh];
|
||
|
graphic[isUpdate ? 'updateProps' : 'initProps'](clipPath, {
|
||
|
shape: target
|
||
|
}, animationModel, dataIndex);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function getItemModel(data, dataIndex) {
|
||
|
var itemModel = data.getItemModel(dataIndex);
|
||
|
itemModel.getAnimationDelayParams = getAnimationDelayParams;
|
||
|
itemModel.isAnimationEnabled = isAnimationEnabled;
|
||
|
return itemModel;
|
||
|
}
|
||
|
|
||
|
function getAnimationDelayParams(path) {
|
||
|
// The order is the same as the z-order, see `symbolRepeatDiretion`.
|
||
|
return {
|
||
|
index: path.__pictorialAnimationIndex,
|
||
|
count: path.__pictorialRepeatTimes
|
||
|
};
|
||
|
}
|
||
|
|
||
|
function isAnimationEnabled() {
|
||
|
// `animation` prop can be set on itemModel in pictorial bar chart.
|
||
|
return this.parentModel.isAnimationEnabled() && !!this.getShallow('animation');
|
||
|
}
|
||
|
|
||
|
function updateHoverAnimation(path, symbolMeta) {
|
||
|
path.off('emphasis').off('normal');
|
||
|
var scale = symbolMeta.symbolScale.slice();
|
||
|
symbolMeta.hoverAnimation && path.on('emphasis', function () {
|
||
|
this.animateTo({
|
||
|
scale: [scale[0] * 1.1, scale[1] * 1.1]
|
||
|
}, 400, 'elasticOut');
|
||
|
}).on('normal', function () {
|
||
|
this.animateTo({
|
||
|
scale: scale.slice()
|
||
|
}, 400, 'elasticOut');
|
||
|
});
|
||
|
}
|
||
|
|
||
|
function createBar(data, opt, symbolMeta, isUpdate) {
|
||
|
// bar is the main element for each data.
|
||
|
var bar = new graphic.Group(); // bundle is used for location and clip.
|
||
|
|
||
|
var bundle = new graphic.Group();
|
||
|
bar.add(bundle);
|
||
|
bar.__pictorialBundle = bundle;
|
||
|
bundle.attr('position', symbolMeta.bundlePosition.slice());
|
||
|
|
||
|
if (symbolMeta.symbolRepeat) {
|
||
|
createOrUpdateRepeatSymbols(bar, opt, symbolMeta);
|
||
|
} else {
|
||
|
createOrUpdateSingleSymbol(bar, opt, symbolMeta);
|
||
|
}
|
||
|
|
||
|
createOrUpdateBarRect(bar, symbolMeta, isUpdate);
|
||
|
createOrUpdateClip(bar, opt, symbolMeta, isUpdate);
|
||
|
bar.__pictorialShapeStr = getShapeStr(data, symbolMeta);
|
||
|
bar.__pictorialSymbolMeta = symbolMeta;
|
||
|
return bar;
|
||
|
}
|
||
|
|
||
|
function updateBar(bar, opt, symbolMeta) {
|
||
|
var animationModel = symbolMeta.animationModel;
|
||
|
var dataIndex = symbolMeta.dataIndex;
|
||
|
var bundle = bar.__pictorialBundle;
|
||
|
graphic.updateProps(bundle, {
|
||
|
position: symbolMeta.bundlePosition.slice()
|
||
|
}, animationModel, dataIndex);
|
||
|
|
||
|
if (symbolMeta.symbolRepeat) {
|
||
|
createOrUpdateRepeatSymbols(bar, opt, symbolMeta, true);
|
||
|
} else {
|
||
|
createOrUpdateSingleSymbol(bar, opt, symbolMeta, true);
|
||
|
}
|
||
|
|
||
|
createOrUpdateBarRect(bar, symbolMeta, true);
|
||
|
createOrUpdateClip(bar, opt, symbolMeta, true);
|
||
|
}
|
||
|
|
||
|
function removeBar(data, dataIndex, animationModel, bar) {
|
||
|
// Not show text when animating
|
||
|
var labelRect = bar.__pictorialBarRect;
|
||
|
labelRect && (labelRect.style.text = null);
|
||
|
var pathes = [];
|
||
|
eachPath(bar, function (path) {
|
||
|
pathes.push(path);
|
||
|
});
|
||
|
bar.__pictorialMainPath && pathes.push(bar.__pictorialMainPath); // I do not find proper remove animation for clip yet.
|
||
|
|
||
|
bar.__pictorialClipPath && (animationModel = null);
|
||
|
zrUtil.each(pathes, function (path) {
|
||
|
graphic.updateProps(path, {
|
||
|
scale: [0, 0]
|
||
|
}, animationModel, dataIndex, function () {
|
||
|
bar.parent && bar.parent.remove(bar);
|
||
|
});
|
||
|
});
|
||
|
data.setItemGraphicEl(dataIndex, null);
|
||
|
}
|
||
|
|
||
|
function getShapeStr(data, symbolMeta) {
|
||
|
return [data.getItemVisual(symbolMeta.dataIndex, 'symbol') || 'none', !!symbolMeta.symbolRepeat, !!symbolMeta.symbolClip].join(':');
|
||
|
}
|
||
|
|
||
|
function eachPath(bar, cb, context) {
|
||
|
// Do not use Group#eachChild, because it do not support remove.
|
||
|
zrUtil.each(bar.__pictorialBundle.children(), function (el) {
|
||
|
el !== bar.__pictorialBarRect && cb.call(context, el);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
function updateAttr(el, immediateAttrs, animationAttrs, symbolMeta, isUpdate, cb) {
|
||
|
immediateAttrs && el.attr(immediateAttrs); // when symbolCip used, only clip path has init animation, otherwise it would be weird effect.
|
||
|
|
||
|
if (symbolMeta.symbolClip && !isUpdate) {
|
||
|
animationAttrs && el.attr(animationAttrs);
|
||
|
} else {
|
||
|
animationAttrs && graphic[isUpdate ? 'updateProps' : 'initProps'](el, animationAttrs, symbolMeta.animationModel, symbolMeta.dataIndex, cb);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function updateCommon(bar, opt, symbolMeta) {
|
||
|
var color = symbolMeta.color;
|
||
|
var dataIndex = symbolMeta.dataIndex;
|
||
|
var itemModel = symbolMeta.itemModel; // Color must be excluded.
|
||
|
// Because symbol provide setColor individually to set fill and stroke
|
||
|
|
||
|
var normalStyle = itemModel.getModel('itemStyle').getItemStyle(['color']);
|
||
|
var hoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
|
||
|
var cursorStyle = itemModel.getShallow('cursor');
|
||
|
eachPath(bar, function (path) {
|
||
|
// PENDING setColor should be before setStyle!!!
|
||
|
path.setColor(color);
|
||
|
path.setStyle(zrUtil.defaults({
|
||
|
fill: color,
|
||
|
opacity: symbolMeta.opacity
|
||
|
}, normalStyle));
|
||
|
graphic.setHoverStyle(path, hoverStyle);
|
||
|
cursorStyle && (path.cursor = cursorStyle);
|
||
|
path.z2 = symbolMeta.z2;
|
||
|
});
|
||
|
var barRectHoverStyle = {};
|
||
|
var barPositionOutside = opt.valueDim.posDesc[+(symbolMeta.boundingLength > 0)];
|
||
|
var barRect = bar.__pictorialBarRect;
|
||
|
setLabel(barRect.style, barRectHoverStyle, itemModel, color, opt.seriesModel, dataIndex, barPositionOutside);
|
||
|
graphic.setHoverStyle(barRect, barRectHoverStyle);
|
||
|
}
|
||
|
|
||
|
function toIntTimes(times) {
|
||
|
var roundedTimes = Math.round(times); // Escapse accurate error
|
||
|
|
||
|
return Math.abs(times - roundedTimes) < 1e-4 ? roundedTimes : Math.ceil(times);
|
||
|
}
|
||
|
|
||
|
var _default = BarView;
|
||
|
module.exports = _default;
|