198 lines
6.0 KiB
JavaScript
198 lines
6.0 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 _config = require("../../config");
|
||
|
|
||
|
var __DEV__ = _config.__DEV__;
|
||
|
|
||
|
var echarts = require("../../echarts");
|
||
|
|
||
|
var LineDraw = require("../helper/LineDraw");
|
||
|
|
||
|
var EffectLine = require("../helper/EffectLine");
|
||
|
|
||
|
var Line = require("../helper/Line");
|
||
|
|
||
|
var Polyline = require("../helper/Polyline");
|
||
|
|
||
|
var EffectPolyline = require("../helper/EffectPolyline");
|
||
|
|
||
|
var LargeLineDraw = require("../helper/LargeLineDraw");
|
||
|
|
||
|
var linesLayout = require("./linesLayout");
|
||
|
|
||
|
var _createClipPathFromCoordSys = require("../helper/createClipPathFromCoordSys");
|
||
|
|
||
|
var createClipPath = _createClipPathFromCoordSys.createClipPath;
|
||
|
|
||
|
/*
|
||
|
* 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 _default = echarts.extendChartView({
|
||
|
type: 'lines',
|
||
|
init: function () {},
|
||
|
render: function (seriesModel, ecModel, api) {
|
||
|
var data = seriesModel.getData();
|
||
|
|
||
|
var lineDraw = this._updateLineDraw(data, seriesModel);
|
||
|
|
||
|
var zlevel = seriesModel.get('zlevel');
|
||
|
var trailLength = seriesModel.get('effect.trailLength');
|
||
|
var zr = api.getZr(); // Avoid the drag cause ghost shadow
|
||
|
// FIXME Better way ?
|
||
|
// SVG doesn't support
|
||
|
|
||
|
var isSvg = zr.painter.getType() === 'svg';
|
||
|
|
||
|
if (!isSvg) {
|
||
|
zr.painter.getLayer(zlevel).clear(true);
|
||
|
} // Config layer with motion blur
|
||
|
|
||
|
|
||
|
if (this._lastZlevel != null && !isSvg) {
|
||
|
zr.configLayer(this._lastZlevel, {
|
||
|
motionBlur: false
|
||
|
});
|
||
|
}
|
||
|
|
||
|
if (this._showEffect(seriesModel) && trailLength) {
|
||
|
if (!isSvg) {
|
||
|
zr.configLayer(zlevel, {
|
||
|
motionBlur: true,
|
||
|
lastFrameAlpha: Math.max(Math.min(trailLength / 10 + 0.9, 1), 0)
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
lineDraw.updateData(data);
|
||
|
var clipPath = seriesModel.get('clip', true) && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
|
||
|
|
||
|
if (clipPath) {
|
||
|
this.group.setClipPath(clipPath);
|
||
|
} else {
|
||
|
this.group.removeClipPath();
|
||
|
}
|
||
|
|
||
|
this._lastZlevel = zlevel;
|
||
|
this._finished = true;
|
||
|
},
|
||
|
incrementalPrepareRender: function (seriesModel, ecModel, api) {
|
||
|
var data = seriesModel.getData();
|
||
|
|
||
|
var lineDraw = this._updateLineDraw(data, seriesModel);
|
||
|
|
||
|
lineDraw.incrementalPrepareUpdate(data);
|
||
|
|
||
|
this._clearLayer(api);
|
||
|
|
||
|
this._finished = false;
|
||
|
},
|
||
|
incrementalRender: function (taskParams, seriesModel, ecModel) {
|
||
|
this._lineDraw.incrementalUpdate(taskParams, seriesModel.getData());
|
||
|
|
||
|
this._finished = taskParams.end === seriesModel.getData().count();
|
||
|
},
|
||
|
updateTransform: function (seriesModel, ecModel, api) {
|
||
|
var data = seriesModel.getData();
|
||
|
var pipelineContext = seriesModel.pipelineContext;
|
||
|
|
||
|
if (!this._finished || pipelineContext.large || pipelineContext.progressiveRender) {
|
||
|
// TODO Don't have to do update in large mode. Only do it when there are millions of data.
|
||
|
return {
|
||
|
update: true
|
||
|
};
|
||
|
} else {
|
||
|
// TODO Use same logic with ScatterView.
|
||
|
// Manually update layout
|
||
|
var res = linesLayout.reset(seriesModel);
|
||
|
|
||
|
if (res.progress) {
|
||
|
res.progress({
|
||
|
start: 0,
|
||
|
end: data.count()
|
||
|
}, data);
|
||
|
}
|
||
|
|
||
|
this._lineDraw.updateLayout();
|
||
|
|
||
|
this._clearLayer(api);
|
||
|
}
|
||
|
},
|
||
|
_updateLineDraw: function (data, seriesModel) {
|
||
|
var lineDraw = this._lineDraw;
|
||
|
|
||
|
var hasEffect = this._showEffect(seriesModel);
|
||
|
|
||
|
var isPolyline = !!seriesModel.get('polyline');
|
||
|
var pipelineContext = seriesModel.pipelineContext;
|
||
|
var isLargeDraw = pipelineContext.large;
|
||
|
|
||
|
if (!lineDraw || hasEffect !== this._hasEffet || isPolyline !== this._isPolyline || isLargeDraw !== this._isLargeDraw) {
|
||
|
if (lineDraw) {
|
||
|
lineDraw.remove();
|
||
|
}
|
||
|
|
||
|
lineDraw = this._lineDraw = isLargeDraw ? new LargeLineDraw() : new LineDraw(isPolyline ? hasEffect ? EffectPolyline : Polyline : hasEffect ? EffectLine : Line);
|
||
|
this._hasEffet = hasEffect;
|
||
|
this._isPolyline = isPolyline;
|
||
|
this._isLargeDraw = isLargeDraw;
|
||
|
this.group.removeAll();
|
||
|
}
|
||
|
|
||
|
this.group.add(lineDraw.group);
|
||
|
return lineDraw;
|
||
|
},
|
||
|
_showEffect: function (seriesModel) {
|
||
|
return !!seriesModel.get('effect.show');
|
||
|
},
|
||
|
_clearLayer: function (api) {
|
||
|
// Not use motion when dragging or zooming
|
||
|
var zr = api.getZr();
|
||
|
var isSvg = zr.painter.getType() === 'svg';
|
||
|
|
||
|
if (!isSvg && this._lastZlevel != null) {
|
||
|
zr.painter.getLayer(this._lastZlevel).clear(true);
|
||
|
}
|
||
|
},
|
||
|
remove: function (ecModel, api) {
|
||
|
this._lineDraw && this._lineDraw.remove();
|
||
|
this._lineDraw = null; // Clear motion when lineDraw is removed
|
||
|
|
||
|
this._clearLayer(api);
|
||
|
},
|
||
|
dispose: function () {}
|
||
|
});
|
||
|
|
||
|
module.exports = _default;
|