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