UNPKG

cione-comp-lib

Version:

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

156 lines (155 loc) 5.2 kB
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 };