This is an automated email from the ASF dual-hosted git repository. shenyi pushed a commit to branch resize-animation in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 1fecb51ae8db3f1416b037903f0f36205ab99d13 Author: pissang <[email protected]> AuthorDate: Tue Mar 30 14:23:27 2021 +0800 feat(animation): add animaiton configuration in resize --- src/core/echarts.ts | 35 +++++---- src/echarts.ts | 2 +- test/resize-animation.html | 117 +++++++++++++++++++++++++++++ test/runTest/actions/__meta__.json | 1 + test/runTest/actions/resize-animation.json | 1 + 5 files changed, 140 insertions(+), 16 deletions(-) diff --git a/src/core/echarts.ts b/src/core/echarts.ts index b272247..8c2371c 100644 --- a/src/core/echarts.ts +++ b/src/core/echarts.ts @@ -88,7 +88,8 @@ import { DimensionLoose, ScaleDataValue, ZRElementEventName, - ECElementEvent + ECElementEvent, + AnimationOption } from '../util/types'; import Displayable from 'zrender/src/graphic/Displayable'; import IncrementalDisplayable from 'zrender/src/graphic/IncrementalDisplayable'; @@ -210,7 +211,15 @@ export interface SetOptionTransitionOptItem { from?: SetOptionTransitionOptFinder; to: SetOptionTransitionOptFinder; dividingMethod: MorphDividingMethod; -} +}; + +export interface ResizeOpts { + width?: number | 'auto', // Can be 'auto' (the same as null/undefined) + height?: number | 'auto', // Can be 'auto' (the same as null/undefined) + animation?: AnimationOption + silent?: boolean // by default false. +}; + interface SetOptionTransitionOptFinder extends modelUtil.ModelFinderObject { dimension: DimensionLoose; } @@ -1129,11 +1138,7 @@ class ECharts extends Eventful<ECEventDefinition> { /** * Resize the chart */ - resize(opts?: { - width?: number | 'auto', // Can be 'auto' (the same as null/undefined) - height?: number | 'auto', // Can be 'auto' (the same as null/undefined) - silent?: boolean // by default false. - }): void { + resize(opts?: ResizeOpts): void { if (__DEV__) { assert(!this[IN_MAIN_PROCESS_KEY], '`resize` should not be called during main process.'); } @@ -1162,10 +1167,10 @@ class ECharts extends Eventful<ECEventDefinition> { optionChanged && prepare(this); updateMethods.update.call(this, { type: 'resize', - animation: { + animation: zrUtil.extend({ // Disable animation duration: 0 - } + }, opts && opts.animation) }); this[IN_MAIN_PROCESS_KEY] = false; @@ -1504,12 +1509,12 @@ class ECharts extends Eventful<ECEventDefinition> { updateMethods = { - prepareAndUpdate: function (this: ECharts, payload: Payload): void { + prepareAndUpdate(this: ECharts, payload: Payload): void { prepare(this); updateMethods.update.call(this, payload); }, - update: function (this: ECharts, payload: Payload): void { + update(this: ECharts, payload: Payload): void { // console.profile && console.profile('update'); const ecModel = this._model; @@ -1581,7 +1586,7 @@ class ECharts extends Eventful<ECEventDefinition> { // console.profile && console.profileEnd('update'); }, - updateTransform: function (this: ECharts, payload: Payload): void { + updateTransform(this: ECharts, payload: Payload): void { const ecModel = this._model; const api = this._api; @@ -1638,7 +1643,7 @@ class ECharts extends Eventful<ECEventDefinition> { performPostUpdateFuncs(ecModel, this._api); }, - updateView: function (this: ECharts, payload: Payload): void { + updateView(this: ECharts, payload: Payload): void { const ecModel = this._model; // update before setOption @@ -1660,7 +1665,7 @@ class ECharts extends Eventful<ECEventDefinition> { performPostUpdateFuncs(ecModel, this._api); }, - updateVisual: function (this: ECharts, payload: Payload): void { + updateVisual(this: ECharts, payload: Payload): void { // updateMethods.update.call(this, payload); const ecModel = this._model; @@ -1701,7 +1706,7 @@ class ECharts extends Eventful<ECEventDefinition> { performPostUpdateFuncs(ecModel, this._api); }, - updateLayout: function (this: ECharts, payload: Payload): void { + updateLayout(this: ECharts, payload: Payload): void { updateMethods.update.call(this, payload); } }; diff --git a/src/echarts.ts b/src/echarts.ts index c457055..e998b0f 100644 --- a/src/echarts.ts +++ b/src/echarts.ts @@ -38,4 +38,4 @@ export default { // @ts-ignore return init.apply(null, arguments); } -} \ No newline at end of file +}; \ No newline at end of file diff --git a/test/resize-animation.html b/test/resize-animation.html new file mode 100644 index 0000000..359a9cb --- /dev/null +++ b/test/resize-animation.html @@ -0,0 +1,117 @@ + +<!-- +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"> + <script src="lib/esl.js"></script> + <script src="lib/config.js"></script> + <script src="lib/testHelper.js"></script> + <link rel="stylesheet" href="lib/reset.css"> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + </head> + <body> + <style> + body { + position: absolute; + left: 0; + top: 0; + } + </style> + <div id="main0"></div> + + <script> + + + require([ + 'echarts' + // 'echarts/chart/pie', + // 'echarts/component/title', + // 'echarts/component/legend', + // 'echarts/component/tooltip' + ], function (echarts) { + + require([ + 'echarts' + ], function (echarts) { + const option = { + tooltip : { + trigger: 'item', + formatter: "{a} <br/>{b} : {c} ({d}%)" + }, + legend: { + orient: 'vertical', + left: 'left', + data: ['直接访问','邮件营销','联盟广告','视频广告(value is null)','搜索引擎'] + }, + series : [ + { + name: '访问来源', + type: 'pie', + radius : '55%', + center: ['50%', '60%'], + selectedMode: 'single', + data:[ + {value:335, name:'直接访问'}, + {value:310, name:'邮件营销'}, + {value:234, name:'联盟广告'}, + {value:null, name:'视频广告(value is null)'}, + {value:1548, name:'搜索引擎'} + ] + } + ] + }; + + var myChart = testHelper.create(echarts, 'main0', { + width: 600, + height: 400, + title: [ + 'Resize animation should be configured properly' + ], + option: option, + buttons: [{ + text: 'Resize without animation by default', + onClick: () => { + myChart.resize({ + width: 400, + height: 266 + }) + } + }, { + text: 'Resize with animaiton', + onClick: () => { + myChart.resize({ + width: 300, + height: 200, + animation: { + // Use a long duration so it can be recorded + duration: 2000, + easing: 'cubicInOut' + } + }) + } + }] + }); + }); + + }); + </script> + </body> +</html> \ No newline at end of file diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index acc5386..526b2fb 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -131,6 +131,7 @@ "radar2": 1, "radar3": 1, "radar4": 1, + "resize-animation": 1, "sankey-depth": 1, "sankey-jump": 1, "sankey-level": 1, diff --git a/test/runTest/actions/resize-animation.json b/test/runTest/actions/resize-animation.json new file mode 100644 index 0000000..1e21cf9 --- /dev/null +++ b/test/runTest/actions/resize-animation.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousemove","time":294,"x":206,"y":78},{"type":"mousedown","time":382,"x":206,"y":78},{"type":"mouseup","time":481,"x":206,"y":78},{"time":482,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":910,"x":207,"y":78},{"type":"mousemove","time":1111,"x":248,"y":78},{"type":"mousedown","time":1201,"x":248,"y":78},{"type":"mouseup","time":1305,"x":248,"y":78},{"time":1306,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1320,"x": [...] \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
