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/11 12:30:24 UTC
[echarts] branch enhance-morph updated: test(ut): add map to bar
transition case
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
The following commit(s) were added to refs/heads/enhance-morph by this push:
new cb7df68 test(ut): add map to bar transition case
cb7df68 is described below
commit cb7df684df1273b1d8d9e9f427376958bcaad65a
Author: pissang <bm...@gmail.com>
AuthorDate: Fri Jun 11 16:59:49 2021 +0800
test(ut): add map to bar transition case
---
test/universalTransition.html | 403 ++++++++++++++++++++++++++++--------------
1 file changed, 274 insertions(+), 129 deletions(-)
diff --git a/test/universalTransition.html b/test/universalTransition.html
index 71611e6..8f1707a 100644
--- a/test/universalTransition.html
+++ b/test/universalTransition.html
@@ -40,6 +40,7 @@ under the License.
<div id="main0"></div>
<div id="main1"></div>
<div id="main2"></div>
+ <div id="main3"></div>
@@ -388,149 +389,293 @@ under the License.
option: makeTreemapOption()
});
});
- </script>
+ </script>
- <script>
- require([
- 'echarts'
- ], function (echarts) {
- var pathSymbols = {
- reindeer: 'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04 [...]
- plane: 'path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39 [...]
- train: 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z M14.544,40.764c1.143,0,2.0 [...]
- ship: 'path://M16.678,17.086h9.854l-2.703,5.912c5.596,2.428,11.155,5.575,16.711,8.607c3.387,1.847,6.967,3.75,10.541,5.375 v-6.16l-4.197-2.763v-5.318L33.064,12.197h-11.48L20.43,15.24h-4.533l-1.266,3.286l0.781,0.345L16.678,17.086z M49.6,31.84 l0.047,1.273L27.438,20.998l0.799-1.734L49.6,31.84z M33.031,15.1l12.889,8.82l0.027,0.769L32.551,16.1L33.031,15.1z M22.377,14.045 h9.846l-1.539,3.365l-2.287-1.498h1.371l0.721-1.352h-2.023l-0.553,1.037l-0.541-0.357h-0.34l0.359-0.6 [...]
- car: 'path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475, [...]
- };
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var pathSymbols = {
+ reindeer: 'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.8 [...]
+ plane: 'path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934 [...]
+ train: 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z M14.544,40.764c1.143,0,2.07-0. [...]
+ ship: 'path://M16.678,17.086h9.854l-2.703,5.912c5.596,2.428,11.155,5.575,16.711,8.607c3.387,1.847,6.967,3.75,10.541,5.375 v-6.16l-4.197-2.763v-5.318L33.064,12.197h-11.48L20.43,15.24h-4.533l-1.266,3.286l0.781,0.345L16.678,17.086z M49.6,31.84 l0.047,1.273L27.438,20.998l0.799-1.734L49.6,31.84z M33.031,15.1l12.889,8.82l0.027,0.769L32.551,16.1L33.031,15.1z M22.377,14.045 h9.846l-1.539,3.365l-2.287-1.498h1.371l0.721-1.352h-2.023l-0.553,1.037l-0.541-0.357h-0.34l0.359-0.684h- [...]
+ car: 'path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.45 [...]
+ };
- var labelSetting = {
- show: true,
- position: 'right',
- offset: [10, 0],
- textStyle: {
- fontSize: 16
- }
- };
+ var labelSetting = {
+ show: true,
+ position: 'right',
+ offset: [10, 0],
+ textStyle: {
+ fontSize: 16
+ }
+ };
- function makeOption(type) {
- return {
- title: {
- text: 'Vehicles in X City'
- },
- legend: {
- data: ['2015', '2016']
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- containLabel: true,
- left: 20
+ function makeOption(type) {
+ return {
+ title: {
+ text: 'Vehicles in X City'
+ },
+ legend: {
+ data: ['2015', '2016']
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ containLabel: true,
+ left: 20
+ },
+ yAxis: {
+ data: ['reindeer', 'ship', 'plane', 'train', 'car'],
+ inverse: true,
+ axisLine: {show: false},
+ axisTick: {show: false},
+ axisLabel: {
+ margin: 30,
+ fontSize: 14
},
- yAxis: {
- data: ['reindeer', 'ship', 'plane', 'train', 'car'],
- inverse: true,
- axisLine: {show: false},
- axisTick: {show: false},
- axisLabel: {
- margin: 30,
- fontSize: 14
- },
- axisPointer: {
- label: {
- show: true,
- margin: 30
- }
+ axisPointer: {
+ label: {
+ show: true,
+ margin: 30
}
+ }
+ },
+ xAxis: {
+ splitLine: {show: false},
+ axisLabel: {show: false},
+ axisTick: {show: false},
+ axisLine: {show: false}
+ },
+ // animationDurationUpdate: 10000,
+ series: [{
+ name: '2015',
+ id: 'bar1',
+ type,
+ label: labelSetting,
+ symbolRepeat: true,
+ symbolSize: ['80%', '60%'],
+ barCategoryGap: '40%',
+ universalAnimation: {
+ enabled: true
},
- xAxis: {
- splitLine: {show: false},
- axisLabel: {show: false},
- axisTick: {show: false},
- axisLine: {show: false}
+ data: [{
+ value: 157,
+ symbol: pathSymbols.reindeer
+ }, {
+ value: 21,
+ symbol: pathSymbols.ship
+ }, {
+ value: 66,
+ symbol: pathSymbols.plane
+ }, {
+ value: 78,
+ symbol: pathSymbols.train
+ }, {
+ value: 123,
+ symbol: pathSymbols.car
+ }]
+ }, {
+ name: '2016',
+ id: 'bar2',
+ type,
+ barGap: '10%',
+ label: labelSetting,
+ symbolRepeat: true,
+ symbolSize: ['80%', '60%'],
+ universalAnimation: {
+ enabled: true
},
- // animationDurationUpdate: 10000,
- series: [{
- name: '2015',
- id: 'bar1',
- type,
- label: labelSetting,
- symbolRepeat: true,
- symbolSize: ['80%', '60%'],
- barCategoryGap: '40%',
- universalAnimation: {
- enabled: true
- },
- data: [{
- value: 157,
- symbol: pathSymbols.reindeer
- }, {
- value: 21,
- symbol: pathSymbols.ship
- }, {
- value: 66,
- symbol: pathSymbols.plane
- }, {
- value: 78,
- symbol: pathSymbols.train
- }, {
- value: 123,
- symbol: pathSymbols.car
- }]
+ data: [{
+ value: 184,
+ symbol: pathSymbols.reindeer
}, {
- name: '2016',
- id: 'bar2',
- type,
- barGap: '10%',
- label: labelSetting,
- symbolRepeat: true,
- symbolSize: ['80%', '60%'],
- universalAnimation: {
- enabled: true
- },
- data: [{
- value: 184,
- symbol: pathSymbols.reindeer
- }, {
- value: 29,
- symbol: pathSymbols.ship
- }, {
- value: 73,
- symbol: pathSymbols.plane
- }, {
- value: 91,
- symbol: pathSymbols.train
- }, {
- value: 95,
- symbol: pathSymbols.car
- }]
+ value: 29,
+ symbol: pathSymbols.ship
+ }, {
+ value: 73,
+ symbol: pathSymbols.plane
+ }, {
+ value: 91,
+ symbol: pathSymbols.train
+ }, {
+ value: 95,
+ symbol: pathSymbols.car
}]
- };
+ }]
+ };
+ }
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'Convert between bar, pictorialBar'
+ ],
+ height: 600,
+ buttons: [{
+ text: 'Bar',
+ onclick: function () {
+ chart.setOption(makeOption('bar'));
+ }
+ }, {
+ text: 'Pictorial Bar',
+ onclick: function () {
+ chart.setOption(makeOption('pictorialBar'));
+ }
+ }],
+ option: makeOption('bar')
+ });
+ });
+ </script>
+
+ <script>
+ require([
+ 'echarts',
+ 'data/usa.json'
+ ], function (echarts, geojson) {
+
+ echarts.registerMap('USA', geojson, {
+ Alaska: { // 把阿拉斯加移到美国主大陆左下方
+ left: -131,
+ top: 25,
+ width: 15
+ },
+ Hawaii: {
+ left: -110, // 夏威夷
+ top: 28,
+ width: 5
+ },
+ 'Puerto Rico': { // 波多黎各
+ left: -76,
+ top: 26,
+ width: 2
}
+ });
- var chart = testHelper.create(echarts, 'main2', {
- title: [
- 'Convert between bar, pictorialBar'
- ],
- height: 600,
- buttons: [{
- text: 'Bar',
- onclick: function () {
- chart.setOption(makeOption('bar'));
+ const data = [
+ {name: 'Alabama', value: 4822023},
+ {name: 'Alaska', value: 731449},
+ {name: 'Arizona', value: 6553255},
+ {name: 'Arkansas', value: 2949131},
+ {name: 'California', value: 38041430},
+ {name: 'Colorado', value: 5187582},
+ {name: 'Connecticut', value: 3590347},
+ {name: 'Delaware', value: 917092},
+ {name: 'District of Columbia', value: 632323},
+ {name: 'Florida', value: 19317568},
+ {name: 'Georgia', value: 9919945},
+ {name: 'Hawaii', value: 1392313},
+ {name: 'Idaho', value: 1595728},
+ {name: 'Illinois', value: 12875255},
+ {name: 'Indiana', value: 6537334},
+ {name: 'Iowa', value: 3074186},
+ {name: 'Kansas', value: 2885905},
+ {name: 'Kentucky', value: 4380415},
+ {name: 'Louisiana', value: 4601893},
+ {name: 'Maine', value: 1329192},
+ {name: 'Maryland', value: 5884563},
+ {name: 'Massachusetts', value: 6646144},
+ {name: 'Michigan', value: 9883360},
+ {name: 'Minnesota', value: 5379139},
+ {name: 'Mississippi', value: 2984926},
+ {name: 'Missouri', value: 6021988},
+ {name: 'Montana', value: 1005141},
+ {name: 'Nebraska', value: 1855525},
+ {name: 'Nevada', value: 2758931},
+ {name: 'New Hampshire', value: 1320718},
+ {name: 'New Jersey', value: 8864590},
+ {name: 'New Mexico', value: 2085538},
+ {name: 'New York', value: 19570261},
+ {name: 'North Carolina', value: 9752073},
+ {name: 'North Dakota', value: 699628},
+ {name: 'Ohio', value: 11544225},
+ {name: 'Oklahoma', value: 3814820},
+ {name: 'Oregon', value: 3899353},
+ {name: 'Pennsylvania', value: 12763536},
+ {name: 'Rhode Island', value: 1050292},
+ {name: 'South Carolina', value: 4723723},
+ {name: 'South Dakota', value: 833354},
+ {name: 'Tennessee', value: 6456243},
+ {name: 'Texas', value: 26059203},
+ {name: 'Utah', value: 2855287},
+ {name: 'Vermont', value: 626011},
+ {name: 'Virginia', value: 8185867},
+ {name: 'Washington', value: 6897012},
+ {name: 'West Virginia', value: 1855413},
+ {name: 'Wisconsin', value: 5726398},
+ {name: 'Wyoming', value: 576412},
+ {name: 'Puerto Rico', value: 3667084}
+ ];
+ function makeMapOption() {
+ return {
+ visualMap: {
+ min: 500000,
+ max: 38000000,
+ inRange: {
+ color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+ },
+ text: ['High', 'Low'], // 文本，默认为数值文本
+ calculable: true
+ },
+ animationDurationUpdate: 1000,
+ series: {
+ type: 'map',
+ id: 'main',
+ map: 'USA',
+ data,
+ universalAnimation: {
+ enabled: true
}
- }, {
- text: 'Pictorial Bar',
- onclick: function () {
- chart.setOption(makeOption('pictorialBar'));
+ }
+ }
+ }
+
+ function makeBarOption() {
+ return {
+ xAxis: {
+ type: 'category',
+ axisLabel: {
+ rotate: 30
+ },
+ data: data.map(item => item.name)
+ },
+ yAxis: {
+ },
+ animationDurationUpdate: 1000,
+ series: {
+ type: 'bar',
+ id: 'main',
+ data: data.map(item => item.value),
+ universalAnimation: {
+ enabled: true
}
- }],
- option: makeOption('bar')
- });
+ }
+ }
+ }
+ var chart = testHelper.create(echarts, 'main3', {
+ title: [
+ 'Convert between bar, map'
+ ],
+ height: 600,
+ buttons: [{
+ text: 'Map',
+ onclick: function () {
+ chart.setOption(makeMapOption(), true);
+ }
+ }, {
+ text: 'Bar',
+ onclick: function () {
+ chart.setOption(makeBarOption(), true);
+ }
+ }],
+ option: makeBarOption()
});
- </script>
-
+ });
+ </script>
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org