Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 f2c7391c 编写于 作者: S sushuang
浏览文件
操作

largeLine mode on stream test.

上级 ceaf90ee
隐藏空白更改
内联 并排
Showing with 208 addition and 122 deletion
src/chart/helper/LargeLine.js 0 → 100644
浏览文件 @ f2c7391c
import * as graphic from '../../util/graphic';
import * as lineContain from 'zrender/src/contain/line';
import * as quadraticContain from 'zrender/src/contain/quadratic';
export default graphic.extendShape({
shape: {
polyline: false,
segs: []
},
buildPath: function (path, shape) {
var segs = shape.segs;
var isPolyline = shape.polyline;
for (var i = 0; i < segs.length; i++) {
var seg = segs[i];
if (isPolyline) {
path.moveTo(seg[0][0], seg[0][1]);
for (var j = 1; j < seg.length; j++) {
path.lineTo(seg[j][0], seg[j][1]);
}
}
else {
path.moveTo(seg[0][0], seg[0][1]);
if (seg.length > 2) {
path.quadraticCurveTo(seg[2][0], seg[2][1], seg[1][0], seg[1][1]);
}
else {
path.lineTo(seg[1][0], seg[1][1]);
}
}
}
},
findDataIndex: function (x, y) {
var shape = this.shape;
var segs = shape.segs;
var isPolyline = shape.polyline;
var lineWidth = Math.max(this.style.lineWidth, 1);
// Not consider transform
for (var i = 0; i < segs.length; i++) {
var seg = segs[i];
if (isPolyline) {
for (var j = 1; j < seg.length; j++) {
if (lineContain.containStroke(
seg[j - 1][0], seg[j - 1][1], seg[j][0], seg[j][1], lineWidth, x, y
)) {
return i;
}
}
}
else {
if (seg.length > 2) {
if (quadraticContain.containStroke(
seg[0][0], seg[0][1], seg[2][0], seg[2][1], seg[1][0], seg[1][1], lineWidth, x, y
)) {
return i;
}
}
else {
if (lineContain.containStroke(
seg[0][0], seg[0][1], seg[1][0], seg[1][1], lineWidth, x, y
)) {
return i;
}
}
}
}
return -1;
}
});
\ No newline at end of file
src/chart/helper/LargeLineDraw.js
浏览文件 @ f2c7391c
// TODO Batch by color
import * as graphic from '../../util/graphic';
import * as lineContain from 'zrender/src/contain/line';
import * as quadraticContain from 'zrender/src/contain/quadratic';
var LargeLineShape = graphic.extendShape({
shape: {
polyline: false,
segs: []
},
buildPath: function (path, shape) {
var segs = shape.segs;
var isPolyline = shape.polyline;
for (var i = 0; i < segs.length; i++) {
var seg = segs[i];
if (isPolyline) {
path.moveTo(seg[0][0], seg[0][1]);
for (var j = 1; j < seg.length; j++) {
path.lineTo(seg[j][0], seg[j][1]);
}
}
else {
path.moveTo(seg[0][0], seg[0][1]);
if (seg.length > 2) {
path.quadraticCurveTo(seg[2][0], seg[2][1], seg[1][0], seg[1][1]);
}
else {
path.lineTo(seg[1][0], seg[1][1]);
}
}
}
},
findDataIndex: function (x, y) {
var shape = this.shape;
var segs = shape.segs;
var isPolyline = shape.polyline;
var lineWidth = Math.max(this.style.lineWidth, 1);
// Not consider transform
for (var i = 0; i < segs.length; i++) {
var seg = segs[i];
if (isPolyline) {
for (var j = 1; j < seg.length; j++) {
if (lineContain.containStroke(
seg[j - 1][0], seg[j - 1][1], seg[j][0], seg[j][1], lineWidth, x, y
)) {
return i;
}
}
}
else {
if (seg.length > 2) {
if (quadraticContain.containStroke(
seg[0][0], seg[0][1], seg[2][0], seg[2][1], seg[1][0], seg[1][1], lineWidth, x, y
)) {
return i;
}
}
else {
if (lineContain.containStroke(
seg[0][0], seg[0][1], seg[1][0], seg[1][1], lineWidth, x, y
)) {
return i;
}
}
}
}
return -1;
}
});
import LargeLineShape from './LargeLine';
function LargeLineDraw() {
this.group = new graphic.Group();
......
src/chart/helper/LineDraw.js
浏览文件 @ f2c7391c
......@@ -6,6 +6,8 @@ import * as graphic from '../../util/graphic';
import LineGroup from './Line';
import Polyline from './Polyline';
import IncrementalDisplayable from 'zrender/src/graphic/IncrementalDisplayable';
import LargeLineShape from './LargeLine';
import {curry} from 'zrender/src/core/util';
/**
......@@ -16,8 +18,13 @@ function LineDraw(ctor) {
this._ctor = ctor || LineGroup;
// ??? The third mode: largeLineDraw?
// Create when needed.
this._incremental;
this._largeLine;
this._largeLineAdded;
this.group = new graphic.Group();
}
......@@ -37,14 +44,33 @@ lineDrawProto.updateData = function (lineData) {
// Check and change mode.
var streamRendering = seriesScope.streamRendering;
if (this._incremental ^ streamRendering) {
this.remove();
streamRendering && group.add(lineDraw._incremental = new IncrementalDisplayable());
var incremental = lineDraw._incremental;
if (incremental ^ streamRendering) {
lineDraw.remove();
if (streamRendering) {
if (!incremental) {
incremental = lineDraw._incremental = new IncrementalDisplayable();
incremental.onDisplaybleFlushed = function () {
clearLargeLine(lineDraw);
lineDraw._largeLineAdded = false;
};
}
group.add(incremental);
}
}
// ??? Process that switch from stream to non-stream.
if (streamRendering) {
this._incremental.clearDisplaybles();
clearIncremental(lineDraw);
if (seriesScope.isLargeMode) {
if (!lineDraw._largeLine) {
lineDraw._largeLine = new LargeLineShape();
}
// ??? set style should not be here, but in task?
setLargeLineCommon(lineDraw, lineData, seriesScope);
}
}
else {
lineData.diff(oldLineData)
......@@ -78,7 +104,7 @@ lineDrawProto.updateView = function () {
var seriesScope = makeSeriesScope(lineData);
if (seriesScope.streamRendering) {
this._incremental.clearDisplaybles();
clearIncremental(lineDraw);
}
else {
lineData.each(function (item, idx) {
......@@ -91,17 +117,34 @@ lineDrawProto.updateView = function () {
};
function doAdd(lineDraw, lineData, idx, seriesScope) {
if (!lineNeedsDraw(lineData.getItemLayout(idx))) {
var itemLayout = lineData.getItemLayout(idx);
var el;
if (!lineNeedsDraw(itemLayout)) {
return;
}
var itemEl = createItemEl(lineDraw, lineData, idx, seriesScope);
if (seriesScope.streamRendering) {
lineDraw._incremental.addDisplayable(itemEl, true)
if (seriesScope.isLargeMode) {
// ??? remove when switch mode?
var largeLine = lineDraw._largeLine;
largeLine.shape.segs.push(itemLayout);
if (!lineDraw._largeLineAdded) {
lineDraw._incremental.addDisplayable(largeLine, true);
lineDraw._largeLineAdded = true;
}
lineDraw._incremental.dirty();
}
else {
el = createItemEl(lineDraw, lineData, idx, seriesScope);
lineDraw._incremental.addDisplayable(el, true);
}
lineData.$releaseItemMemory(idx); // ???
}
else {
lineData.setItemGraphicEl(idx, itemEl);
lineDraw.group.add(itemEl);
el = createItemEl(lineDraw, lineData, idx, seriesScope);
lineData.setItemGraphicEl(idx, el);
lineDraw.group.add(el);
}
}
......@@ -150,16 +193,63 @@ function makeSeriesScope(lineData) {
hoverLineStyle: hostModel.getModel('lineStyle.emphasis').getLineStyle(),
labelModel: hostModel.getModel('label.normal'),
hoverLabelModel: hostModel.getModel('label.emphasis'),
streamRendering: streamSetting && streamSetting.threshold < lineData.count()
streamRendering: streamSetting && streamSetting.threshold < lineData.count(),
isLargeMode: hostModel.get('large')
};
}
lineDrawProto.remove = function () {
this._incremental && this._incremental.clearDisplaybles();
clearIncremental(this);
this._incremental = null;
this.group.removeAll();
};
function setLargeLineCommon(lineDraw, lineData, seriesScope) {
var seriesModel = lineData.hostModel;
var largeLine = lineDraw._largeLine;
largeLine.setShape({
segs: [],
polyline: seriesModel.get('polyline')
});
largeLine.useStyle(
seriesModel.getModel('lineStyle.normal').getLineStyle()
);
var visualColor = lineData.getVisual('color');
if (visualColor) {
largeLine.setStyle('stroke', visualColor);
}
largeLine.setStyle('fill');
// Enable tooltip
// PENDING May have performance issue when path is extremely large
// largeLine.seriesIndex = seriesScope.seriesIndex;
// lineEl.on('mousemove', function (e) {
// lineEl.dataIndex = null;
// var dataIndex = lineEl.findDataIndex(e.offsetX, e.offsetY);
// if (dataIndex > 0) {
// // Provide dataIndex for tooltip
// lineEl.dataIndex = dataIndex;
// }
// });
}
function clearLargeLine(lineDraw) {
// Do not set dirty.
lineDraw._largeLine && (lineDraw._largeLine.shape.segs.length = 0);
}
function clearIncremental(lineDraw) {
var incremental = lineDraw._incremental;
if (incremental) {
incremental.clearDisplaybles();
lineDraw._largeLineAdded = false;
}
clearLargeLine(lineDraw);
}
function isPointNaN(pt) {
return isNaN(pt[0]) || isNaN(pt[1]);
}
......
src/chart/lines/LinesView.js
浏览文件 @ f2c7391c
......@@ -19,7 +19,9 @@ export default echarts.extendChartView({
var hasEffect = seriesModel.get('effect.show');
var isPolyline = seriesModel.get('polyline');
// ??? largeLineDraw merge?
var isLarge = seriesModel.get('large') && data.count() >= seriesModel.get('largeThreshold');
isLarge = false;
if (__DEV__) {
if (hasEffect && isLarge) {
......
src/data/List.js
浏览文件 @ f2c7391c
......@@ -411,6 +411,11 @@ function initProgress(params, notify) {
}
function doInit(list, dueIndex, dueEnd, isInit) {
// Optimize.
if (dueIndex >= dueEnd) {
return dueIndex;
}
var data = list._rawData;
var storage = list._storage;
var indices = list.indices;
......@@ -1424,6 +1429,16 @@ listProto.createCloneShallowTask = function () {
});
};
// ??? temporarily
listProto.$releaseItemMemory = function (idx) {
if (this._itemLayouts) {
this._itemLayouts[idx] = null;
}
if (this._itemVisuals) {
this._itemVisuals[idx] = null;
}
};
/**
* Wrap some method to add more feature
* @param {string} methodName
......
test/lines-stream-ny.html
浏览文件 @ f2c7391c
......@@ -24,41 +24,6 @@
var dataURL = '../../data-online/figshare_Urban_Road_Network/public/Links_NewYork_1.json';
// var dataURL = 'http://echarts.baidu.com/resource/data/figshare_Urban_Road_Network/public/Links_NewYork_1.json';
// var testGeoJson1 = {
// 'type': 'FeatureCollection',
// 'features': [
// {
// 'geometry': {
// 'type': 'Polygon',
// 'coordinates': [
// [
// [
// xs[0],
// ys[0]
// ],
// [
// xs[1],
// ys[0]
// ],
// [
// xs[1],
// ys[1]
// ],
// [
// xs[0],
// ys[1]
// ]
// ]
// ]
// },
// 'properties': {
// 'name': 'Bejing?',
// 'childNum': 1
// }
// }
// ]
// };
require([
'echarts',
......@@ -78,7 +43,8 @@
var config = {
dataLoading: 'whole',
streamThreshold: 0,
streamRender: true
streamRender: true,
largeModel: true
};
var chart;
......@@ -86,6 +52,8 @@
var gui = new dat.GUI();
gui.add(config, 'dataLoading', ['whole', 'chunked'])
.onChange(init);
gui.add(config, 'largeModel')
.onChange(init);
gui.add(config, 'streamRender')
.onChange(init);
gui.add(config, 'streamThreshold', 0, 200000)
......@@ -106,8 +74,16 @@
};
});
// var lines = [];
// for (var i = 0; i < 1000; i++) {
// var entry = data.geometries[i];
// lines.push({
// coords: entry.coordinates
// });
// }
chart.setOption({
streamStep: 1500,
streamStep: 4000,
animation: false,
geo: {
center: [-74.04327099998152, 40.86737600240287],
......@@ -141,6 +117,7 @@
type: 'lines',
coordinateSystem: 'geo',
data: lines,
large: config.largeModel,
polyline: true,
lineStyle: {
normal: {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或