cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
238 lines (237 loc) • 9.56 kB
JavaScript
import { __extends } from "../../../../tslib/tslib.es6.mjs";
import { traverseElements } from "../../util/graphic.mjs";
import { toggleHoverEmphasis } from "../../util/states.mjs";
import HeatmapLayer from "./HeatmapLayer.mjs";
import { map } from "../../../../zrender/lib/core/util.mjs";
import ChartView from "../../view/Chart.mjs";
import { isCoordinateSystemType } from "../../coord/CoordinateSystem.mjs";
import { getLabelStatesModels, setLabelStyle } from "../../label/labelStyle.mjs";
import Rect from "../../../../zrender/lib/graphic/shape/Rect.mjs";
import ZRImage from "../../../../zrender/lib/graphic/Image.mjs";
function getIsInPiecewiseRange(dataExtent, pieceList, selected) {
var dataSpan = dataExtent[1] - dataExtent[0];
pieceList = map(pieceList, function(piece) {
return {
interval: [(piece.interval[0] - dataExtent[0]) / dataSpan, (piece.interval[1] - dataExtent[0]) / dataSpan]
};
});
var len = pieceList.length;
var lastIndex = 0;
return function(val) {
var i;
for (i = lastIndex; i < len; i++) {
var interval = pieceList[i].interval;
if (interval[0] <= val && val <= interval[1]) {
lastIndex = i;
break;
}
}
if (i === len) {
for (i = lastIndex - 1; i >= 0; i--) {
var interval = pieceList[i].interval;
if (interval[0] <= val && val <= interval[1]) {
lastIndex = i;
break;
}
}
}
return i >= 0 && i < len && selected[i];
};
}
function getIsInContinuousRange(dataExtent, range) {
var dataSpan = dataExtent[1] - dataExtent[0];
range = [(range[0] - dataExtent[0]) / dataSpan, (range[1] - dataExtent[0]) / dataSpan];
return function(val) {
return val >= range[0] && val <= range[1];
};
}
function isGeoCoordSys(coordSys) {
var dimensions = coordSys.dimensions;
return dimensions[0] === "lng" && dimensions[1] === "lat";
}
var HeatmapView = function(_super) {
__extends(HeatmapView2, _super);
function HeatmapView2() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = HeatmapView2.type;
return _this;
}
HeatmapView2.prototype.render = function(seriesModel, ecModel, api) {
var visualMapOfThisSeries;
ecModel.eachComponent("visualMap", function(visualMap) {
visualMap.eachTargetSeries(function(targetSeries) {
if (targetSeries === seriesModel) {
visualMapOfThisSeries = visualMap;
}
});
});
this._progressiveEls = null;
this.group.removeAll();
var coordSys = seriesModel.coordinateSystem;
if (coordSys.type === "cartesian2d" || coordSys.type === "calendar") {
this._renderOnCartesianAndCalendar(seriesModel, api, 0, seriesModel.getData().count());
} else if (isGeoCoordSys(coordSys)) {
this._renderOnGeo(coordSys, seriesModel, visualMapOfThisSeries, api);
}
};
HeatmapView2.prototype.incrementalPrepareRender = function(seriesModel, ecModel, api) {
this.group.removeAll();
};
HeatmapView2.prototype.incrementalRender = function(params, seriesModel, ecModel, api) {
var coordSys = seriesModel.coordinateSystem;
if (coordSys) {
if (isGeoCoordSys(coordSys)) {
this.render(seriesModel, ecModel, api);
} else {
this._progressiveEls = [];
this._renderOnCartesianAndCalendar(seriesModel, api, params.start, params.end, true);
}
}
};
HeatmapView2.prototype.eachRendered = function(cb) {
traverseElements(this._progressiveEls || this.group, cb);
};
HeatmapView2.prototype._renderOnCartesianAndCalendar = function(seriesModel, api, start, end, incremental) {
var coordSys = seriesModel.coordinateSystem;
var isCartesian2d = isCoordinateSystemType(coordSys, "cartesian2d");
var width;
var height;
var xAxisExtent;
var yAxisExtent;
if (isCartesian2d) {
var xAxis = coordSys.getAxis("x");
var yAxis = coordSys.getAxis("y");
width = xAxis.getBandWidth() + 0.5;
height = yAxis.getBandWidth() + 0.5;
xAxisExtent = xAxis.scale.getExtent();
yAxisExtent = yAxis.scale.getExtent();
}
var group = this.group;
var data = seriesModel.getData();
var emphasisStyle = seriesModel.getModel(["emphasis", "itemStyle"]).getItemStyle();
var blurStyle = seriesModel.getModel(["blur", "itemStyle"]).getItemStyle();
var selectStyle = seriesModel.getModel(["select", "itemStyle"]).getItemStyle();
var borderRadius = seriesModel.get(["itemStyle", "borderRadius"]);
var labelStatesModels = getLabelStatesModels(seriesModel);
var emphasisModel = seriesModel.getModel("emphasis");
var focus = emphasisModel.get("focus");
var blurScope = emphasisModel.get("blurScope");
var emphasisDisabled = emphasisModel.get("disabled");
var dataDims = isCartesian2d ? [data.mapDimension("x"), data.mapDimension("y"), data.mapDimension("value")] : [data.mapDimension("time"), data.mapDimension("value")];
for (var idx = start; idx < end; idx++) {
var rect = void 0;
var style = data.getItemVisual(idx, "style");
if (isCartesian2d) {
var dataDimX = data.get(dataDims[0], idx);
var dataDimY = data.get(dataDims[1], idx);
if (isNaN(data.get(dataDims[2], idx)) || isNaN(dataDimX) || isNaN(dataDimY) || dataDimX < xAxisExtent[0] || dataDimX > xAxisExtent[1] || dataDimY < yAxisExtent[0] || dataDimY > yAxisExtent[1]) {
continue;
}
var point = coordSys.dataToPoint([dataDimX, dataDimY]);
rect = new Rect({
shape: {
x: point[0] - width / 2,
y: point[1] - height / 2,
width,
height
},
style
});
} else {
if (isNaN(data.get(dataDims[1], idx))) {
continue;
}
rect = new Rect({
z2: 1,
shape: coordSys.dataToRect([data.get(dataDims[0], idx)]).contentShape,
style
});
}
if (data.hasItemOption) {
var itemModel = data.getItemModel(idx);
var emphasisModel_1 = itemModel.getModel("emphasis");
emphasisStyle = emphasisModel_1.getModel("itemStyle").getItemStyle();
blurStyle = itemModel.getModel(["blur", "itemStyle"]).getItemStyle();
selectStyle = itemModel.getModel(["select", "itemStyle"]).getItemStyle();
borderRadius = itemModel.get(["itemStyle", "borderRadius"]);
focus = emphasisModel_1.get("focus");
blurScope = emphasisModel_1.get("blurScope");
emphasisDisabled = emphasisModel_1.get("disabled");
labelStatesModels = getLabelStatesModels(itemModel);
}
rect.shape.r = borderRadius;
var rawValue = seriesModel.getRawValue(idx);
var defaultText = "-";
if (rawValue && rawValue[2] != null) {
defaultText = rawValue[2] + "";
}
setLabelStyle(rect, labelStatesModels, {
labelFetcher: seriesModel,
labelDataIndex: idx,
defaultOpacity: style.opacity,
defaultText
});
rect.ensureState("emphasis").style = emphasisStyle;
rect.ensureState("blur").style = blurStyle;
rect.ensureState("select").style = selectStyle;
toggleHoverEmphasis(rect, focus, blurScope, emphasisDisabled);
rect.incremental = incremental;
if (incremental) {
rect.states.emphasis.hoverLayer = true;
}
group.add(rect);
data.setItemGraphicEl(idx, rect);
if (this._progressiveEls) {
this._progressiveEls.push(rect);
}
}
};
HeatmapView2.prototype._renderOnGeo = function(geo, seriesModel, visualMapModel, api) {
var inRangeVisuals = visualMapModel.targetVisuals.inRange;
var outOfRangeVisuals = visualMapModel.targetVisuals.outOfRange;
var data = seriesModel.getData();
var hmLayer = this._hmLayer || this._hmLayer || new HeatmapLayer();
hmLayer.blurSize = seriesModel.get("blurSize");
hmLayer.pointSize = seriesModel.get("pointSize");
hmLayer.minOpacity = seriesModel.get("minOpacity");
hmLayer.maxOpacity = seriesModel.get("maxOpacity");
var rect = geo.getViewRect().clone();
var roamTransform = geo.getRoamTransform();
rect.applyTransform(roamTransform);
var x = Math.max(rect.x, 0);
var y = Math.max(rect.y, 0);
var x2 = Math.min(rect.width + rect.x, api.getWidth());
var y2 = Math.min(rect.height + rect.y, api.getHeight());
var width = x2 - x;
var height = y2 - y;
var dims = [data.mapDimension("lng"), data.mapDimension("lat"), data.mapDimension("value")];
var points = data.mapArray(dims, function(lng, lat, value) {
var pt = geo.dataToPoint([lng, lat]);
pt[0] -= x;
pt[1] -= y;
pt.push(value);
return pt;
});
var dataExtent = visualMapModel.getExtent();
var isInRange = visualMapModel.type === "visualMap.continuous" ? getIsInContinuousRange(dataExtent, visualMapModel.option.range) : getIsInPiecewiseRange(dataExtent, visualMapModel.getPieceList(), visualMapModel.option.selected);
hmLayer.update(points, width, height, inRangeVisuals.color.getNormalizer(), {
inRange: inRangeVisuals.color.getColorMapper(),
outOfRange: outOfRangeVisuals.color.getColorMapper()
}, isInRange);
var img = new ZRImage({
style: {
width,
height,
x,
y,
image: hmLayer.canvas
},
silent: true
});
this.group.add(img);
};
HeatmapView2.type = "heatmap";
return HeatmapView2;
}(ChartView);
var HeatmapView$1 = HeatmapView;
export { HeatmapView$1 as default };