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/06/15 14:47:17 UTC
[echarts] 01/02: feat(ut): add transition between different symbol
of scatters
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch enhance-morph
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 18c83747ec6011162c141f7c434144e23d446b40
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 15 22:26:36 2021 +0800
feat(ut): add transition between different symbol of scatters
---
src/chart/helper/Symbol.ts | 3 +
src/chart/helper/SymbolDraw.ts | 9 ++-
src/core/echarts.ts | 2 +-
test/universalTransition.html | 129 ++++++++++++++++++++++++++++++++++++++++-
test/universalTransition2.html | 5 +-
5 files changed, 141 insertions(+), 7 deletions(-)
diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index 15fc84c..ad9efea 100644
--- a/src/chart/helper/Symbol.ts
+++ b/src/chart/helper/Symbol.ts
@@ -102,6 +102,9 @@ class Symbol extends graphic.Group {
this.childAt(0).stopAnimation(null, toLastFrame);
}
+ getSymbolType() {
+ return this._symbolType;
+ }
/**
* FIXME:
* Caution: This method breaks the encapsulation of this module,
diff --git a/src/chart/helper/SymbolDraw.ts b/src/chart/helper/SymbolDraw.ts
index 97c01a0..db61fbb 100644
--- a/src/chart/helper/SymbolDraw.ts
+++ b/src/chart/helper/SymbolDraw.ts
@@ -206,7 +206,14 @@ class SymbolDraw {
group.remove(symbolEl);
return;
}
- if (!symbolEl) {
+ const newSymbolType = data.getItemVisual(newIdx, 'symbol') || 'circle';
+ const oldSymbolType = symbolEl
+ && (symbolEl as SymbolClz).getSymbolType
+ && (symbolEl as SymbolClz).getSymbolType();
+
+ // Create a new if symbol type changed.
+ if (oldSymbolType !== newSymbolType) {
+ symbolEl && group.remove(symbolEl);
symbolEl = new SymbolCtor(data, newIdx);
symbolEl.setPosition(point);
}
diff --git a/src/core/echarts.ts b/src/core/echarts.ts
index c76fc1a..014aa27 100644
--- a/src/core/echarts.ts
+++ b/src/core/echarts.ts
@@ -2040,7 +2040,7 @@ class ECharts extends Eventful<ECEventDefinition> {
// Render all charts
const scheduler = ecIns._scheduler;
- updateParams = extend(updateParams, {
+ updateParams = extend(updateParams || {}, {
updatedSeries: ecModel.getSeries()
});
diff --git a/test/universalTransition.html b/test/universalTransition.html
index 9ddf153..e9e8890 100644
--- a/test/universalTransition.html
+++ b/test/universalTransition.html
@@ -41,6 +41,7 @@ under the License.
<div id="main1"></div>
<div id="main2"></div>
<div id="main3"></div>
+ <div id="main4"></div>
@@ -174,6 +175,127 @@ under the License.
</script>
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var option;
+ var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
+ '7a', '8a', '9a','10a','11a',
+ '12p', '1p', '2p', '3p', '4p', '5p',
+ '6p', '7p', '8p', '9p', '10p', '11p'];
+ var days = ['Saturday', 'Friday', 'Thursday',
+ 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
+
+ var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2 [...]
+
+ data = data.map(function (item) {
+ return [item[1], item[0], item[2] || '-'];
+ });
+
+ const heatmapSeries = {
+ name: 'Punch Card',
+ id: 'punch-card',
+ type: 'heatmap',
+ data: data,
+ label: {
+ show: true
+ },
+ universalTransition: {
+ enabled: true
+ }
+ }
+
+ function makeScatterSeries(symbolType) {
+ return {
+ name: 'Punch Card',
+ id: 'punch-card',
+ type: 'scatter',
+ symbol: symbolType,
+ symbolSize: item => {
+ return Math.sqrt(item[2]) * 10;
+ },
+ data: data,
+ label: {
+ show: true
+ },
+ universalTransition: {
+ enabled: true
+ }
+ }
+ }
+
+ option = {
+ tooltip: {
+ position: 'top'
+ },
+ grid: {
+ height: '50%',
+ top: '10%'
+ },
+ xAxis: {
+ type: 'category',
+ data: hours,
+ splitArea: {
+ show: true
+ }
+ },
+ yAxis: {
+ type: 'category',
+ data: days,
+ splitArea: {
+ show: true
+ }
+ },
+ visualMap: {
+ min: 0,
+ max: 10,
+ calculable: true,
+ orient: 'horizontal',
+ left: 'center',
+ bottom: '15%'
+ },
+ series: heatmapSeries
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Convert between heatmap, scatter (with different symbols)'
+ ],
+ // height: 300,
+ buttons: [{
+ text: 'Heatmap',
+ onclick: function () {
+ chart.setOption({
+ series: heatmapSeries
+ });
+ }
+ }, {
+ text: 'Scatter (Rect)',
+ onclick: function () {
+ chart.setOption({
+ series: makeScatterSeries('rect')
+ });
+ }
+ }, {
+ text: 'Scatter (Diamond)',
+ onclick: function () {
+ chart.setOption({
+ series: makeScatterSeries('diamond')
+ });
+ }
+ }, {
+ text: 'Scatter (Circle)',
+ onclick: function () {
+ chart.setOption({
+ series: makeScatterSeries('circle')
+ });
+ }
+ }],
+ option: option
+ });
+ });
+ </script>
<script>
require([
@@ -370,7 +492,7 @@ under the License.
};
}
- var chart = testHelper.create(echarts, 'main1', {
+ var chart = testHelper.create(echarts, 'main2', {
title: [
'Convert between treemap, sunburst'
],
@@ -511,7 +633,7 @@ under the License.
};
}
- var chart = testHelper.create(echarts, 'main2', {
+ var chart = testHelper.create(echarts, 'main3', {
title: [
'Convert between bar, pictorialBar'
],
@@ -656,7 +778,7 @@ under the License.
}
}
}
- var chart = testHelper.create(echarts, 'main3', {
+ var chart = testHelper.create(echarts, 'main4', {
title: [
'Convert between bar, map'
],
@@ -676,6 +798,7 @@ under the License.
});
});
</script>
+
</body>
</html>
diff --git a/test/universalTransition2.html b/test/universalTransition2.html
index 7cc0bb5..478d5ca 100644
--- a/test/universalTransition2.html
+++ b/test/universalTransition2.html
@@ -57,6 +57,7 @@ under the License.
data: ['Animals', 'Fruits', 'Cars']
},
yAxis: {},
+ dataGroupId: '',
// animationDurationUpdate: 1000,
series: {
type: 'bar',
@@ -142,10 +143,10 @@ under the License.
fontSize: 18
},
onclick() {
- chart.setOption(option, true);
+ chart.setOption(option);
}
}]
- }, true);
+ });
}
});
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org