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/07/01 03:19:35 UTC
[echarts] 01/07: test: fix some type issues. add test case
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch improve-type
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 46120ff0adaf69956c2dc7bc2c1ef7f8892a61e7
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Jun 28 14:53:01 2021 +0800
test: fix some type issues. add test case
---
src/chart/treemap/TreemapSeries.ts | 2 +-
src/model/Series.ts | 2 +-
src/util/types.ts | 2 +-
test/universalTransition.html | 6 ++
test/universalTransition3.html | 159 +++++++++++++++++++++++++++++++++++++
5 files changed, 168 insertions(+), 3 deletions(-)
diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts
index fab2fc3..e84fe85 100644
--- a/src/chart/treemap/TreemapSeries.ts
+++ b/src/chart/treemap/TreemapSeries.ts
@@ -190,7 +190,7 @@ export interface TreemapSeriesOption
show?: boolean
height?: number
- emptyItemWidth: number // With of empty width
+ emptyItemWidth?: number // With of empty width
itemStyle?: BreadcrumbItemStyleOption
emphasis?: {
diff --git a/src/model/Series.ts b/src/model/Series.ts
index 1e8c2c4..1972ca7 100644
--- a/src/model/Series.ts
+++ b/src/model/Series.ts
@@ -23,7 +23,7 @@ import * as modelUtil from '../util/model';
import {
DataHost, DimensionName, StageHandlerProgressParams,
SeriesOption, ZRColor, BoxLayoutOptionMixin,
- ScaleDataValue, Dictionary, OptionDataItemObject, SeriesDataType, UniversalTransitionOption
+ ScaleDataValue, Dictionary, OptionDataItemObject, SeriesDataType
} from '../util/types';
import ComponentModel, { ComponentModelConstructor } from './Component';
import {PaletteMixin} from './mixin/palette';
diff --git a/src/util/types.ts b/src/util/types.ts
index 70597dd..8c6d766 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -1550,7 +1550,7 @@ export interface UniversalTransitionOption {
/**
* Animation delay of each divided element
*/
- delay?: (index?: number, count?: number) => number
+ delay?: (index: number, count: number) => number
/**
* How to divide the shape in combine and split animation.
*/
diff --git a/test/universalTransition.html b/test/universalTransition.html
index 253ea3b..0599a26 100644
--- a/test/universalTransition.html
+++ b/test/universalTransition.html
@@ -608,6 +608,9 @@ under the License.
symbolRepeat: true,
symbolSize: ['80%', '60%'],
barCategoryGap: '40%',
+ animationDelayUpdate(idx) {
+ return idx * 500;
+ },
universalTransition: {
enabled: true,
delay(idx, total) {
@@ -638,6 +641,9 @@ under the License.
label: labelSetting,
symbolRepeat: true,
symbolSize: ['80%', '60%'],
+ animationDelayUpdate(idx) {
+ return idx * 500;
+ },
universalTransition: {
enabled: true,
delay(idx, total) {
diff --git a/test/universalTransition3.html b/test/universalTransition3.html
index 1d03d8a..fc0b226 100644
--- a/test/universalTransition3.html
+++ b/test/universalTransition3.html
@@ -39,6 +39,7 @@ under the License.
<div id="main0"></div>
+ <div id="main1"></div>
<script>
window.ANIMATION_DURATION_UPDATE = 1000;
@@ -268,6 +269,164 @@ under the License.
</script>
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var pieData = [
+ { value: 800, name: 'A' },
+ { value: 635, name: 'B' },
+ { value: 580, name: 'C' },
+ { value: 484, name: 'D' },
+ { value: 300, name: 'E' },
+ { value: 200, name: 'F' }
+ ];
+ const defaultPalette = [
+ // '#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090', '#91c4c5', '#6890ba'
+ '#5470c6',
+ '#91cc75',
+ '#fac858',
+ '#ee6666',
+ '#73c0de',
+ '#3ba272',
+ '#fc8452',
+ '#9a60b4',
+ '#ea7ccc'
+ ];
+
+ const radius = ['30%', '80%'];
+
+ var pieOption = {
+ series: [{
+ type: 'pie',
+ center: ['50%', '50%'],
+ radius: radius,
+ label: {
+ show: false
+ },
+ itemStyle: {
+ borderRadius: 0
+ },
+ universalTransition: {
+ enabled: true,
+ seriesKey: 'first'
+ },
+ animationDurationUpdate: 1000,
+ data: pieData
+ }]
+ };
+
+
+ var parliamentOption = (function () {
+ const sum = pieData.reduce((sum, cur) => {
+ return sum + cur.value;
+ }, 0);
+
+ const angles = [];
+ const startAngle = -Math.PI / 2;
+ let curAngle = startAngle;
+ pieData.forEach(item => {
+ angles.push(curAngle);
+ curAngle += (item.value / sum) * Math.PI * 2;
+ });
+ angles.push(startAngle + Math.PI * 2);
+ function parliamentLayout(startAngle, endAngle, totalAngle, r0, r1, size) {
+ const rowsCount = Math.ceil((r1 - r0) / size);
+ const points = [];
+
+ let r = r0;
+ for (let i = 0; i < rowsCount; i++) {
+ // Recalculate size
+ const totalRingSeatsNumber = Math.round((totalAngle * r) / size);
+ const newSize = (totalAngle * r) / totalRingSeatsNumber;
+ for (
+ let k = Math.floor((startAngle * r) / newSize) * newSize;
+ k < Math.floor((endAngle * r) / newSize) * newSize - 1e-6;
+ k += newSize
+ ) {
+ const angle = k / r;
+ const x = Math.cos(angle) * r;
+ const y = Math.sin(angle) * r;
+ points.push([x, y]);
+ }
+
+ r += size;
+ }
+
+ return points;
+ }
+ return {
+ series: {
+ type: 'custom',
+ data: pieData,
+ coordinateSystem: undefined,
+ universalTransition: {
+ enabled: true,
+ seriesKey: 'first'
+ },
+ animationDurationUpdate: 1000,
+ renderItem(params, api) {
+ const idx = params.dataIndex;
+ const viewSize = Math.min(api.getWidth(), api.getHeight());
+ const r0 = ((parseFloat(radius[0]) / 100) * viewSize) / 2;
+ const r1 = ((parseFloat(radius[1]) / 100) * viewSize) / 2;
+ const cx = api.getWidth() * 0.5;
+ const cy = api.getHeight() * 0.5;
+ const size = 15;
+
+ const points = parliamentLayout(
+ angles[idx],
+ angles[idx + 1],
+ Math.PI * 2,
+ r0,
+ r1,
+ size + 3
+ );
+
+ return {
+ type: 'group',
+ children: points.map(pt => {
+ return {
+ type: 'circle',
+ autoBatch: true,
+ shape: {
+ cx: cx + pt[0],
+ cy: cy + pt[1],
+ r: size / 2
+ },
+ style: {
+ fill: defaultPalette[idx % defaultPalette.length]
+ }
+ };
+ })
+ };
+ }
+ }
+ };
+ })();
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Parliament and pie chart.'
+ ],
+ recordVideo: true,
+ option: pieOption,
+ height: 500,
+ buttons: [{
+ text: 'Parliament chart',
+ onclick: function () {
+ chart.setOption(parliamentOption, true);
+ }
+ }, {
+ text: 'Pie chart',
+ onclick: function () {
+ chart.setOption(pieOption, true);
+ }
+ }],
+ });
+ });
+ </script>
+
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org