554 lines
17 KiB
HTML
Generated
554 lines
17 KiB
HTML
Generated
<!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/simpleRequire.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="ut/lib/canteen.js"></script> -->
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
</style>
|
|
|
|
|
|
|
|
<div id="during-case-continue"></div>
|
|
<div id="during-case-get-curr"></div>
|
|
<div id="during-case-partial-change"></div>
|
|
<div id="during-first-frame-correct"></div>
|
|
<div id="during-ensure-once-in-each-frame"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
function renderItem(params, api) {
|
|
return {
|
|
type: 'circle',
|
|
shape: {
|
|
cx: api.value(0),
|
|
cy: api.value(1),
|
|
r: 40,
|
|
transition: 'cx'
|
|
},
|
|
style: {
|
|
fill: 'green',
|
|
},
|
|
};
|
|
}
|
|
|
|
var baseX = 60;
|
|
var baseY = 80
|
|
|
|
var option = {
|
|
series: [{
|
|
id: 'a',
|
|
type: 'custom',
|
|
coordinateSystem: 'none',
|
|
renderItem: renderItem,
|
|
animationDuration: 3000,
|
|
animationDurationUpdate: 3000,
|
|
data: [[baseX, baseY]]
|
|
}]
|
|
};
|
|
|
|
|
|
var chart = testHelper.create(echarts, 'during-case-continue', {
|
|
title: [
|
|
'Click "move" several times **before animation finished**',
|
|
'The cirle should keep move to right **without jump**'
|
|
],
|
|
height: 200,
|
|
option: option,
|
|
buttons: [{
|
|
text: 'move',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: {
|
|
id: 'a',
|
|
data: [[baseX += 60, baseY]]
|
|
}
|
|
});
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
function renderItem(params, api) {
|
|
var renderNumberStart;
|
|
return {
|
|
type: 'circle',
|
|
shape: {
|
|
cx: api.value(0),
|
|
cy: api.value(1),
|
|
r: 40
|
|
},
|
|
extra: {
|
|
renderNumber: ++renderNumber,
|
|
transition: 'renderNumber'
|
|
},
|
|
style: {
|
|
fill: 'green'
|
|
},
|
|
during: function (apiDuring) {
|
|
var currNum = apiDuring.getExtra('renderNumber');
|
|
!renderNumberStart && (renderNumberStart = currNum);
|
|
var opacity = (currNum - renderNumberStart) / (renderNumber - renderNumberStart);
|
|
isNaN(opacity) && (opacity = 1);
|
|
apiDuring.setStyle('opacity', opacity);
|
|
}
|
|
};
|
|
}
|
|
|
|
var renderNumber = 1;
|
|
var baseX = 60;
|
|
var baseY = 100;
|
|
|
|
var option = {
|
|
series: [{
|
|
id: 'a',
|
|
type: 'custom',
|
|
coordinateSystem: 'none',
|
|
renderItem: renderItem,
|
|
animationDuration: 3000,
|
|
animationDurationUpdate: 1000,
|
|
data: [[baseX, baseY]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'during-case-get-curr', {
|
|
title: [
|
|
'Click next several times **before animation finished**',
|
|
'Each click, the circle **disappear immediately** and **fade in** at right a bit',
|
|
'MUST **not blink**'
|
|
],
|
|
height: 200,
|
|
option: option,
|
|
buttons: [{
|
|
text: 'next',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: {
|
|
id: 'a',
|
|
data: [[baseX += 40, baseY]]
|
|
}
|
|
});
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var baseX = 100;
|
|
var baseY = 100;
|
|
|
|
function renderItem(params, api) {
|
|
var textOpt = {
|
|
type: 'text',
|
|
extra: { },
|
|
// transition: [], // disable the default transition of x y.
|
|
style: { x: 20, y: 20, fontSize: 20, stroke: 'green' },
|
|
during: function (apiDuring) {
|
|
var x = apiDuring.getExtra('x');
|
|
var y = apiDuring.getExtra('y');
|
|
apiDuring.setStyle('text', makeText(x, y));
|
|
}
|
|
};
|
|
var movingCircleOpt = {
|
|
type: 'circle',
|
|
shape: { cx: 0, cy: 0, r: 10 },
|
|
extra: { },
|
|
style: { fill: 'red' },
|
|
// transition: [], // disable the default transition of x y.
|
|
during: function (apiDuring) {
|
|
var x = apiDuring.getExtra('x');
|
|
var y = apiDuring.getExtra('y');
|
|
apiDuring.setTransform('x', x).setTransform('y', y);
|
|
}
|
|
};
|
|
|
|
var cmd = api.value(0);
|
|
if (cmd === 'init') {
|
|
textOpt.extra.x = baseX;
|
|
textOpt.extra.y = baseY;
|
|
textOpt.extra.transition = ['x', 'y'];
|
|
textOpt.style.text = makeText(baseX, baseY);
|
|
movingCircleOpt.x = baseX;
|
|
movingCircleOpt.y = baseY;
|
|
movingCircleOpt.extra.x = baseX;
|
|
movingCircleOpt.extra.y = baseY;
|
|
movingCircleOpt.extra.transition = ['x', 'y'];
|
|
}
|
|
else if (cmd === 'x') {
|
|
baseX += 100;
|
|
textOpt.extra.x = baseX;
|
|
textOpt.extra.transition = ['x'];
|
|
// textOpt.style.text = makeText(baseX, baseY);
|
|
movingCircleOpt.extra.x = baseX;
|
|
movingCircleOpt.extra.transition = ['x'];
|
|
}
|
|
else if (cmd === 'y') {
|
|
baseY += 100;
|
|
textOpt.extra.y = baseY;
|
|
textOpt.extra.transition = ['y'];
|
|
// textOpt.style.text = makeText(baseX, baseY);
|
|
movingCircleOpt.extra.y = baseY;
|
|
movingCircleOpt.extra.transition = ['y'];
|
|
}
|
|
|
|
return {
|
|
type: 'group',
|
|
children: [
|
|
textOpt,
|
|
movingCircleOpt,
|
|
{
|
|
// Standard circle: used to check the result of moving circle.
|
|
type: 'circle',
|
|
x: baseX,
|
|
y: baseY,
|
|
transition: [], // disable the default transition of x y.
|
|
shape: {cx: 0, cy: 0, r: 15},
|
|
style: {fill: '#aaa'},
|
|
z2: -1
|
|
}
|
|
]
|
|
};
|
|
}
|
|
|
|
function makeText(x, y) {
|
|
return ['x: ' + x.toFixed(2), 'y: ' + y.toFixed(2)].join('\n');
|
|
}
|
|
|
|
var option = {
|
|
series: [{
|
|
id: 'a',
|
|
type: 'custom',
|
|
coordinateSystem: 'none',
|
|
renderItem: renderItem,
|
|
animationDuration: 3000,
|
|
animationDurationUpdate: 5000,
|
|
data: [['init']]
|
|
}]
|
|
};
|
|
|
|
|
|
var chart = testHelper.create(echarts, 'during-case-partial-change', {
|
|
title: [
|
|
'Partial change props test:',
|
|
'Click "add x" and "add y" before animation finished.',
|
|
'The red circle animation should be smooth **without jump**.',
|
|
'The red circle should be finally **reach at the grey circle**.',
|
|
'The **text should be correct**.',
|
|
],
|
|
height: 500,
|
|
option: option,
|
|
buttons: [{
|
|
text: 'add x 100',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: {
|
|
id: 'a',
|
|
data: [['x']]
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
text: 'add y 100',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: {
|
|
id: 'a',
|
|
data: [['y']]
|
|
}
|
|
});
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var resultPrinted = false;
|
|
|
|
function renderItem(params, api) {
|
|
return {
|
|
type: 'text',
|
|
extra: {
|
|
renderNumber: renderNumber,
|
|
transition: 'renderNumber'
|
|
},
|
|
style: {
|
|
x: 100,
|
|
y: 50,
|
|
fontSize: 30,
|
|
enterFrom: {
|
|
x: 10
|
|
}
|
|
},
|
|
during: function (apiDuring) {
|
|
var currNum = apiDuring.getExtra('renderNumber');
|
|
if (resultPrinted || currNum <= 2) {
|
|
return;
|
|
}
|
|
resultPrinted = true;
|
|
if (currNum === 3) {
|
|
apiDuring.setStyle('text', 'TEST FAIL');
|
|
apiDuring.setStyle('fill', 'red');
|
|
}
|
|
else {
|
|
apiDuring.setStyle('text', 'TEST PASS');
|
|
apiDuring.setStyle('fill', 'green');
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
var renderNumber = 2;
|
|
|
|
var option = {
|
|
series: [{
|
|
id: 'a',
|
|
type: 'custom',
|
|
coordinateSystem: 'none',
|
|
renderItem: renderItem,
|
|
animationDuration: 10000,
|
|
animationDurationUpdate: 10000,
|
|
data: [[10]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'during-first-frame-correct', {
|
|
title: [
|
|
'Test the first during call should not get the target value:',
|
|
'Should print TEST PASS'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
|
|
chart && setTimeout(function () {
|
|
renderNumber = 3;
|
|
chart.setOption({
|
|
series: {
|
|
id: 'a',
|
|
data: [[10]]
|
|
}
|
|
});
|
|
// Set option before init finished.
|
|
}, 100);
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var resultPrinted = false;
|
|
var currX = 0;
|
|
var currFontSize = 16;
|
|
|
|
function renderItem(params, api) {
|
|
var cmd = api.value(0);
|
|
|
|
var opt = {
|
|
type: 'text',
|
|
extra: {
|
|
renderNumber: renderNumber,
|
|
transition: 'renderNumber'
|
|
},
|
|
style: {
|
|
x: 100,
|
|
y: 50,
|
|
fontSize: currFontSize,
|
|
fill: 'green'
|
|
}
|
|
};
|
|
|
|
if (cmd !== 'noDuring') {
|
|
opt.during = function (apiDuring) {
|
|
duringCount++;
|
|
var currNum = apiDuring.getExtra('renderNumber');
|
|
apiDuring.setStyle(
|
|
'text',
|
|
'during count: ' + duringCount + '\n' + 'rAF count: ' + rAFCount
|
|
);
|
|
};
|
|
}
|
|
if (cmd === 'addX') {
|
|
currX += 50;
|
|
opt.x = currX;
|
|
opt.transition = 'x';
|
|
}
|
|
if (cmd === 'addFontSize') {
|
|
currFontSize += 8;
|
|
opt.style.fontSize = currFontSize;
|
|
opt.style.transition = 'fontSize';
|
|
}
|
|
|
|
return opt;
|
|
}
|
|
|
|
var renderNumber = 2;
|
|
|
|
var option = {
|
|
series: [{
|
|
id: 'a',
|
|
type: 'custom',
|
|
coordinateSystem: 'none',
|
|
renderItem: renderItem,
|
|
animationDuration: 3000,
|
|
animationDurationUpdate: 3000,
|
|
data: [[10]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'during-ensure-once-in-each-frame', {
|
|
title: [
|
|
'Test during only called once in each:',
|
|
'In **init** and after **click the buttons**,',
|
|
'during count and rAF count',
|
|
'should **be the same** (may be 1 different)'
|
|
],
|
|
option: option,
|
|
height: 200,
|
|
button: [{
|
|
text: 'add x 50',
|
|
onclick: function () {
|
|
chart.setOption({ series: { id: 'a', data: [['addX']] } });
|
|
startCountFrame();
|
|
}
|
|
}, {
|
|
text: 'add fontSize 8',
|
|
onclick: function () {
|
|
chart.setOption({ series: { id: 'a', data: [['addFontSize']] } });
|
|
startCountFrame();
|
|
}
|
|
}]
|
|
});
|
|
|
|
var rAFCount = 0;
|
|
var duringCount = 0;
|
|
var rAFId;
|
|
|
|
function startCountFrame() {
|
|
stopCountFrame();
|
|
rAFId = requestAnimationFrame(countFrame);
|
|
|
|
function countFrame() {
|
|
rAFCount++;
|
|
rAFId = requestAnimationFrame(countFrame);
|
|
}
|
|
}
|
|
|
|
function stopCountFrame() {
|
|
if (rAFId != null) {
|
|
cancelAnimationFrame(rAFId);
|
|
rAFId = null;
|
|
}
|
|
}
|
|
|
|
if (chart) {
|
|
chart.on('finished', function () {
|
|
stopCountFrame();
|
|
});
|
|
|
|
startCountFrame();
|
|
|
|
setTimeout(function () {
|
|
renderNumber = 3;
|
|
chart.setOption({ series: { id: 'a', data: [['init']] } });
|
|
// Set option before init finished.
|
|
startCountFrame();
|
|
}, 100);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|