cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
156 lines (155 loc) • 5.2 kB
JavaScript
import { __extends } from "../../../../tslib/tslib.es6.mjs";
import { setStatesStylesFromModel, toggleHoverEmphasis } from "../../util/states.mjs";
import ChartView from "../../view/Chart.mjs";
import { setLabelLineStyle, getLabelLineStatesModels } from "../../label/labelGuideHelper.mjs";
import { setLabelStyle, getLabelStatesModels } from "../../label/labelStyle.mjs";
import { saveOldStyle, initProps, updateProps, removeElementWithFadeOut } from "../../animation/basicTransition.mjs";
import Polyline from "../../../../zrender/lib/graphic/shape/Polyline.mjs";
import ZRText from "../../../../zrender/lib/graphic/Text.mjs";
import Point from "../../../../zrender/lib/core/Point.mjs";
import Polygon from "../../../../zrender/lib/graphic/shape/Polygon.mjs";
var opacityAccessPath = ["itemStyle", "opacity"];
var FunnelPiece = function(_super) {
__extends(FunnelPiece2, _super);
function FunnelPiece2(data, idx) {
var _this = _super.call(this) || this;
var polygon = _this;
var labelLine = new Polyline();
var text = new ZRText();
polygon.setTextContent(text);
_this.setTextGuideLine(labelLine);
_this.updateData(data, idx, true);
return _this;
}
FunnelPiece2.prototype.updateData = function(data, idx, firstCreate) {
var polygon = this;
var seriesModel = data.hostModel;
var itemModel = data.getItemModel(idx);
var layout = data.getItemLayout(idx);
var emphasisModel = itemModel.getModel("emphasis");
var opacity = itemModel.get(opacityAccessPath);
opacity = opacity == null ? 1 : opacity;
if (!firstCreate) {
saveOldStyle(polygon);
}
polygon.useStyle(data.getItemVisual(idx, "style"));
polygon.style.lineJoin = "round";
if (firstCreate) {
polygon.setShape({
points: layout.points
});
polygon.style.opacity = 0;
initProps(polygon, {
style: {
opacity
}
}, seriesModel, idx);
} else {
updateProps(polygon, {
style: {
opacity
},
shape: {
points: layout.points
}
}, seriesModel, idx);
}
setStatesStylesFromModel(polygon, itemModel);
this._updateLabel(data, idx);
toggleHoverEmphasis(this, emphasisModel.get("focus"), emphasisModel.get("blurScope"), emphasisModel.get("disabled"));
};
FunnelPiece2.prototype._updateLabel = function(data, idx) {
var polygon = this;
var labelLine = this.getTextGuideLine();
var labelText = polygon.getTextContent();
var seriesModel = data.hostModel;
var itemModel = data.getItemModel(idx);
var layout = data.getItemLayout(idx);
var labelLayout = layout.label;
var style = data.getItemVisual(idx, "style");
var visualColor = style.fill;
setLabelStyle(
labelText,
getLabelStatesModels(itemModel),
{
labelFetcher: data.hostModel,
labelDataIndex: idx,
defaultOpacity: style.opacity,
defaultText: data.getName(idx)
},
{
normal: {
align: labelLayout.textAlign,
verticalAlign: labelLayout.verticalAlign
}
}
);
polygon.setTextConfig({
local: true,
inside: !!labelLayout.inside,
insideStroke: visualColor,
outsideFill: visualColor
});
var linePoints = labelLayout.linePoints;
labelLine.setShape({
points: linePoints
});
polygon.textGuideLineConfig = {
anchor: linePoints ? new Point(linePoints[0][0], linePoints[0][1]) : null
};
updateProps(labelText, {
style: {
x: labelLayout.x,
y: labelLayout.y
}
}, seriesModel, idx);
labelText.attr({
rotation: labelLayout.rotation,
originX: labelLayout.x,
originY: labelLayout.y,
z2: 10
});
setLabelLineStyle(polygon, getLabelLineStatesModels(itemModel), {
stroke: visualColor
});
};
return FunnelPiece2;
}(Polygon);
var FunnelView = function(_super) {
__extends(FunnelView2, _super);
function FunnelView2() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = FunnelView2.type;
_this.ignoreLabelLineUpdate = true;
return _this;
}
FunnelView2.prototype.render = function(seriesModel, ecModel, api) {
var data = seriesModel.getData();
var oldData = this._data;
var group = this.group;
data.diff(oldData).add(function(idx) {
var funnelPiece = new FunnelPiece(data, idx);
data.setItemGraphicEl(idx, funnelPiece);
group.add(funnelPiece);
}).update(function(newIdx, oldIdx) {
var piece = oldData.getItemGraphicEl(oldIdx);
piece.updateData(data, newIdx);
group.add(piece);
data.setItemGraphicEl(newIdx, piece);
}).remove(function(idx) {
var piece = oldData.getItemGraphicEl(idx);
removeElementWithFadeOut(piece, seriesModel, idx);
}).execute();
this._data = data;
};
FunnelView2.prototype.remove = function() {
this.group.removeAll();
this._data = null;
};
FunnelView2.prototype.dispose = function() {
};
FunnelView2.type = "funnel";
return FunnelView2;
}(ChartView);
var FunnelView$1 = FunnelView;
export { FunnelView$1 as default };