Skip to content

E
echarts

Five-菜鸟级 / echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 1
Fork 0
E
echarts

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

提交 95e9b271 编写于 作者: 1 100pah
浏览文件
操作

fix: 

(1) fix bar incremental render (brought by a61fd5ab)
(2) add stream test case.
上级 0802ef0a
隐藏空白更改
内联 并排
Showing with 288 addition and 73 deletion
src/chart/bar/BarView.ts
浏览文件 @ 95e9b271
......@@ -119,6 +119,9 @@ class BarView extends ChartView {
incrementalPrepareRender(seriesModel: BarSeriesModel): void {
this._clear();
this._updateDrawMode(seriesModel);
// incremental also need to clip, otherwise might be overlow.
// But must not set clip in each frame, otherwise all of the children will be marked redraw.
this._updateLargeClip(seriesModel);
}
incrementalRender(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
......@@ -288,8 +291,6 @@ class BarView extends ChartView {
private _incrementalRenderLarge(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
this._removeBackground();
createLarge(seriesModel, this.group, true);
// incremental also need to clip, otherwise might be overlow.
this._updateLargeClip(seriesModel);
}
private _updateLargeClip(seriesModel: BarSeriesModel): void {
......
test/-cases.js
浏览文件 @ 95e9b271
......@@ -54,6 +54,7 @@
name: 'stream-cases',
whiteList: [
'stream-basic1.html',
'stream-basic2.html',
'lines-ny-appendData.html',
'scatter-stream-large.html',
'scatter-stream-not-large.html',
......
test/bar-stream-large.html
浏览文件 @ 95e9b271
......@@ -25,8 +25,11 @@ under the License.
<script src='lib/config.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='lib/testHelper.js'></script>
<!-- <script src="lib/canteen.js"></script> -->
<link rel="stylesheet" href="lib/reset.css" />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel="stylesheet" href="./stream-basic.css" />
<script src="./stream-basic.js"></script>
</head>
<body>
<style>
......@@ -38,9 +41,19 @@ under the License.
}
</style>
<div id='main0'></div>
<div id='record'></div>
<img id="snapshot"/>
<script>
var chart;
var recordContainer = document.getElementById('record');
// testHelper.controlFrame({
// pauseAt: 20,
// onFrame: function (frameNumber) {
// window.printIncrementalOnFrame(chart, frameNumber, recordContainer);
// }
// });
require(['echarts'], function (echarts) {
var count = 2e5;
......@@ -77,7 +90,7 @@ under the License.
}]
};
var chart = testHelper.create(echarts, 'main0', {
chart = testHelper.create(echarts, 'main0', {
title: [
count + ' points should be rendered from left to right.',
'(1) Check all bars rendered (full of xAxis)',
......
test/lib/testHelper.js
浏览文件 @ 95e9b271
......@@ -285,12 +285,16 @@
var _frameNumber = 0;
var _mounted = false;
function getRunBtnText() {
return _running ? 'pause' : 'run';
}
var buttons = [{
text: 'run',
onclick: run
}, {
text: 'pause',
onclick: pause
text: getRunBtnText(),
onclick: function () {
buttons[0].el.innerHTML = getRunBtnText();
_running ? pause() : run();
}
}, {
text: 'next frame',
onclick: nextFrame
......@@ -304,7 +308,7 @@
document.body.appendChild(btnPanel);
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
var btnEl = document.createElement('button');
var btnEl = button.el = document.createElement('button');
btnEl.innerHTML = button.text;
btnEl.addEventListener('click', button.onclick);
btnPanel.appendChild(btnEl);
......@@ -335,11 +339,12 @@
function nextFrame() {
opt.onFrame && opt.onFrame(_frameNumber);
infoEl.innerHTML = 'current frame: ' + _frameNumber;
if (pauseAt != null && _frameNumber === pauseAt) {
_running = false;
pauseAt = null;
}
infoEl.innerHTML = 'Frame: ' + _frameNumber + ' ( ' + (_running ? 'Running' : 'Paused') + ' )';
buttons[0].el.innerHTML = getRunBtnText();
_mounted = false;
var pending = _pendingCbList;
......
test/stream-basic.css 0 → 100644
浏览文件 @ 95e9b271
/*
* 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.
*/
.print-incremental-record-title {
margin: 10px;
font-size: 18px;
font-weight: 700;
}
.print-incremental-record-title .print-incremental-cmd-count {
color: red;
}
.print-incremental-record {
margin: 5px 20px;
}
.print-incremental-record-line {
margin: 10px 10px;
font-size: 10px;
}
.print-incremental-record-line .print-incremental-cmd-count {
color: red;
font-size: 12px;
}
test/stream-basic.js 0 → 100644
浏览文件 @ 95e9b271
/*
* 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.
*/
(function () {
var _layersInfoMap = {};
var _recordContainer;
var CELL_MAX = 160;
if (window.Canteen) {
window.Canteen.globals.STACK_SIZE = 100000000;
}
window.printIncrementalOnFrame = function (chart, frameNumber, recordContainer) {
if (!_recordContainer) {
_recordContainer = recordContainer;
initContainer();
}
if (!chart) {
return;
}
var layers = chart.getZr().painter.getLayers();
for (var zlevel in layers) {
if (layers.hasOwnProperty(zlevel)) {
printIncremental(zlevel, layers[zlevel], frameNumber);
}
}
}
function initContainer() {
_recordContainer.innerHTML = [
'<div class="print-incremental-record-title">',
'In the "incremental layer", each frame: <br>',
'canvas instruction count (<span class="print-incremental-cmd-count">red number</span>) should be the same:',
'</div>'
].join('');
_recordContainer.className = 'print-incremental-record';
}
function printIncremental(zlevel, layer, frameNumber) {
var layerInfo = _layersInfoMap[zlevel];
if (!layerInfo) {
layerInfo = _layersInfoMap[zlevel] = {
recordLineCellCount: 0,
recordLineTitle: document.createElement('div'),
recordLineContainer: document.createElement('div')
};
var incrementalText = layer.incremental ? ' (incremental)' : '';
layerInfo.recordLineTitle.innerHTML = 'layer ' + zlevel + incrementalText + ': <br>';
layerInfo.recordLineContainer.className = 'print-incremental-record-line';
_recordContainer.appendChild(layerInfo.recordLineTitle);
_recordContainer.appendChild(layerInfo.recordLineContainer);
}
var canvas = layer.dom;
var ctx = canvas.getContext('2d');
var stackLength = getStackLength(ctx);
var thisStackLength = stackLength;
var cell;
if (layerInfo.recordLineCellCount > CELL_MAX) {
cell = layerInfo.recordLineContainer.firstChild;
}
else {
cell = document.createElement('span');
layerInfo.recordLineCellCount++;
}
cell.innerHTML = frameNumber + ':<span class="print-incremental-cmd-count">' + thisStackLength + '</span> ';
layerInfo.recordLineContainer.appendChild(cell);
clearStack(ctx);
}
function getStackLength(ctx) {
return ctx.stack().length;
}
function clearStack(ctx) {
window.printIncrementalLastStack = ctx.stack().slice();
ctx.clear();
}
})();
test/stream-basic1.html
浏览文件 @ 95e9b271
......@@ -30,83 +30,26 @@ under the License.
<script src="lib/testHelper.js"></script>
<script src="lib/canteen.js"></script>
<link rel="stylesheet" href="lib/reset.css" />
<link rel="stylesheet" href="./stream-basic.css" />
<script src="./stream-basic.js"></script>
</head>
<body>
<style>
.record-title {
margin: 10px;
font-size: 18px;
font-weight: 700;
}
.record {
margin: 5px 20px;
}
.record-unit {
margin: 10px 10px;
font-size: 10px;
}
.record-unit .cmd-count {
color: red;
font-size: 12px;
}
.record-title .cmd-count {
color: red;
}
</style>
<div id="main0"></div>
<div class="record-title">
In incremental layer, each frame, <br>
new canvas command count (<span class="cmd-count">red number</span>) should be the same:</div>
<div id="record"></div>
<script>
window.Canteen.globals.STACK_SIZE = 100000000;
var recordContainer = document.getElementById('record');
var chart;
var layersInfoMap = {};
testHelper.controlFrame({
pauseAt: 120,
onFrame: function (frameNumber) {
if (chart) {
var layers = chart.getZr().painter.getLayers();
for (var zlevel in layers) {
if (layers.hasOwnProperty(zlevel)) {
printNewCmds(zlevel, layers[zlevel], frameNumber)
}
}
}
window.printIncrementalOnFrame(chart, frameNumber, recordContainer);
}
});
function printNewCmds(zlevel, layer, frameNumber) {
var layerInfo = layersInfoMap[zlevel];
if (!layerInfo) {
layerInfo = layersInfoMap[zlevel] = {
lastStackLength: 0,
recordDom: document.createElement('div')
};
layerInfo.recordDom.className = 'record-unit';
layerInfo.recordDom.innerHTML = 'layer ' + zlevel + ': <br>';
recordContainer.appendChild(layerInfo.recordDom);
}
var canvas = layer.dom;
var ctx = canvas.getContext('2d');
var stackLength = ctx.stack().length;
var span = document.createElement('span');
span.innerHTML = frameNumber + ':<span class="cmd-count">' + (stackLength - layerInfo.lastStackLength) + '</span> ';
layerInfo.recordDom.appendChild(span);
layerInfo.lastStackLength = stackLength;
}
require(['echarts'], function (echarts) {
var option;
......@@ -136,12 +79,12 @@ under the License.
axisLabel: {fontSize: 9, interval: 0},
boundaryGap: false
},
progressive: progressive,
progressiveThreshold: 1,
largeThreshold: 1,
series: {
type: 'scatter',
symbolSize: 2,
progressive: progressive,
progressiveThreshold: 1,
largeThreshold: 1,
data: data
}
};
......
test/stream-basic2.html 0 → 100644
浏览文件 @ 95e9b271
<!DOCTYPE html>
<!--
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.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<script src="lib/testHelper.js"></script>
<script src="lib/canteen.js"></script>
<link rel="stylesheet" href="lib/reset.css" />
<link rel="stylesheet" href="./stream-basic.css" />
<script src="./stream-basic.js"></script>
</head>
<body>
<div id="main0"></div>
<div id="record"></div>
<script>
var recordContainer = document.getElementById('record');
var chart;
testHelper.controlFrame({
pauseAt: 120,
onFrame: function (frameNumber) {
window.printIncrementalOnFrame(chart, frameNumber, recordContainer);
}
});
require(['echarts'], function (echarts) {
var option;
var count = 5000;
var lineCount = 100;
var progressive = 50;
var data = [];
var yCurr = 5;
for (var i = 0; i < count; i++) {
// var mod = i % lineCount;
// if (mod === 0) {
// yCurr += 5;
// }
// data.push([mod, yCurr]);
data.push([i, 5]);
}
option = {
color: ['red'],
grid: {top: 20, bottom: 80},
xAxis: {
type: 'category',
// axisLabel: {fontSize: 9, interval: 0, rotate: 90, margin: 20},
boundaryGap: false
},
yAxis: {
// type: 'category',
axisLabel: {fontSize: 9, interval: 0},
boundaryGap: false
},
dataZoom: [{
type: 'slider'
}, {
type: 'inside'
}],
series: {
type: 'bar',
progressiveChunkMode: 'sequential',
large: true,
progressive: progressive,
progressiveThreshold: 1,
largeThreshold: 1,
data: data
}
};
chart = testHelper.create(echarts, 'main0', {
title: [
'Click **run** and check the printed records:',
],
option: option,
height: 450,
recordCanvas: true
});
});
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或