| <!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> | |