cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
141 lines (140 loc) • 4.89 kB
JavaScript
import { __extends } from "../../../../tslib/tslib.es6.mjs";
import { ECPolygon } from "../line/poly.mjs";
import { setStatesStylesFromModel, toggleHoverEmphasis } from "../../util/states.mjs";
import { setLabelStyle, getLabelStatesModels } from "../../label/labelStyle.mjs";
import { bind } from "../../../../zrender/lib/core/util.mjs";
import DataDiffer from "../../data/DataDiffer.mjs";
import ChartView from "../../view/Chart.mjs";
import { updateProps, saveOldStyle, initProps } from "../../animation/basicTransition.mjs";
import Group from "../../../../zrender/lib/graphic/Group.mjs";
import Rect from "../../../../zrender/lib/graphic/shape/Rect.mjs";
var ThemeRiverView = function(_super) {
__extends(ThemeRiverView2, _super);
function ThemeRiverView2() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = ThemeRiverView2.type;
_this._layers = [];
return _this;
}
ThemeRiverView2.prototype.render = function(seriesModel, ecModel, api) {
var data = seriesModel.getData();
var self = this;
var group = this.group;
var layersSeries = seriesModel.getLayerSeries();
var layoutInfo = data.getLayout("layoutInfo");
var rect = layoutInfo.rect;
var boundaryGap = layoutInfo.boundaryGap;
group.x = 0;
group.y = rect.y + boundaryGap[0];
function keyGetter(item) {
return item.name;
}
var dataDiffer = new DataDiffer(this._layersSeries || [], layersSeries, keyGetter, keyGetter);
var newLayersGroups = [];
dataDiffer.add(bind(process, this, "add")).update(bind(process, this, "update")).remove(bind(process, this, "remove")).execute();
function process(status, idx, oldIdx) {
var oldLayersGroups = self._layers;
if (status === "remove") {
group.remove(oldLayersGroups[idx]);
return;
}
var points0 = [];
var points1 = [];
var style;
var indices = layersSeries[idx].indices;
var j = 0;
for (; j < indices.length; j++) {
var layout = data.getItemLayout(indices[j]);
var x = layout.x;
var y0 = layout.y0;
var y = layout.y;
points0.push(x, y0);
points1.push(x, y0 + y);
style = data.getItemVisual(indices[j], "style");
}
var polygon;
var textLayout = data.getItemLayout(indices[0]);
var labelModel = seriesModel.getModel("label");
var margin = labelModel.get("margin");
var emphasisModel = seriesModel.getModel("emphasis");
if (status === "add") {
var layerGroup = newLayersGroups[idx] = new Group();
polygon = new ECPolygon({
shape: {
points: points0,
stackedOnPoints: points1,
smooth: 0.4,
stackedOnSmooth: 0.4,
smoothConstraint: false
},
z2: 0
});
layerGroup.add(polygon);
group.add(layerGroup);
if (seriesModel.isAnimationEnabled()) {
polygon.setClipPath(createGridClipShape(polygon.getBoundingRect(), seriesModel, function() {
polygon.removeClipPath();
}));
}
} else {
var layerGroup = oldLayersGroups[oldIdx];
polygon = layerGroup.childAt(0);
group.add(layerGroup);
newLayersGroups[idx] = layerGroup;
updateProps(polygon, {
shape: {
points: points0,
stackedOnPoints: points1
}
}, seriesModel);
saveOldStyle(polygon);
}
setLabelStyle(polygon, getLabelStatesModels(seriesModel), {
labelDataIndex: indices[j - 1],
defaultText: data.getName(indices[j - 1]),
inheritColor: style.fill
}, {
normal: {
verticalAlign: "middle"
}
});
polygon.setTextConfig({
position: null,
local: true
});
var labelEl = polygon.getTextContent();
if (labelEl) {
labelEl.x = textLayout.x - margin;
labelEl.y = textLayout.y0 + textLayout.y / 2;
}
polygon.useStyle(style);
data.setItemGraphicEl(idx, polygon);
setStatesStylesFromModel(polygon, seriesModel);
toggleHoverEmphasis(polygon, emphasisModel.get("focus"), emphasisModel.get("blurScope"), emphasisModel.get("disabled"));
}
this._layersSeries = layersSeries;
this._layers = newLayersGroups;
};
ThemeRiverView2.type = "themeRiver";
return ThemeRiverView2;
}(ChartView);
function createGridClipShape(rect, seriesModel, cb) {
var rectEl = new Rect({
shape: {
x: rect.x - 10,
y: rect.y - 10,
width: 0,
height: rect.height + 20
}
});
initProps(rectEl, {
shape: {
x: rect.x - 50,
width: rect.width + 100,
height: rect.height + 20
}
}, seriesModel, cb);
return rectEl;
}
var ThemeRiverView$1 = ThemeRiverView;
export { ThemeRiverView$1 as default };