You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/03/30 06:25:40 UTC
[echarts] 01/01: feat(animation): add animaiton configuration in
resize
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 <bm...@gmail.com>
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: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org