| <!DOCTYPE html> | |
| <!-- | |
| 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"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/config.js"></script> | |
| <script src="lib/jquery.min.js"></script> | |
| <script src="lib/facePrint.js"></script> | |
| <script src="lib/testHelper.js"></script> | |
| <link rel="stylesheet" href="lib/reset.css"> | |
| </head> | |
| <body> | |
| <style> | |
| </style> | |
| <div id="main1"></div> | |
| <div id="main2_source_format_original"></div> | |
| <div id="main2_dataset"></div> | |
| <div id="main3"></div> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var option = { | |
| "tooltip": { | |
| "trigger": "axis" | |
| }, | |
| "xAxis": { | |
| "data": [ | |
| "", | |
| "Good", | |
| "Slightly polluted", | |
| "Excellent", | |
| "Medially polluted", | |
| "Severely polluted" | |
| ] | |
| }, | |
| "yAxis": { | |
| }, | |
| grid: { | |
| right: 200 | |
| }, | |
| "series": [ | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Clear", | |
| "data": [ | |
| [ | |
| "", | |
| 48 | |
| ], | |
| [ | |
| "Good", | |
| 41.38805970149254 | |
| ], | |
| [ | |
| "Slightly polluted", | |
| 58.78378378378378 | |
| ], | |
| [ | |
| "Excellent", | |
| 21.5 | |
| ], | |
| [ | |
| "Medially polluted", | |
| 64.66666666666667 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Cloudy", | |
| "data": [ | |
| [ | |
| "Good", | |
| 41.49246231155779 | |
| ], | |
| [ | |
| "Slightly polluted", | |
| 62.5 | |
| ], | |
| [ | |
| "Excellent", | |
| 22.38888888888889 | |
| ], | |
| [ | |
| "Medially polluted", | |
| 63.25 | |
| ], | |
| [ | |
| "Severely polluted", | |
| 85.66666666666667 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Overcast", | |
| "data": [ | |
| [ | |
| "Good", | |
| 39.73170731707317 | |
| ], | |
| [ | |
| "Excellent", | |
| 22.93548387096774 | |
| ], | |
| [ | |
| "Slightly polluted", | |
| 64.75 | |
| ], | |
| [ | |
| "Medially polluted", | |
| 121.5 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Light rain", | |
| "data": [ | |
| [ | |
| "Slightly polluted", | |
| 60.09090909090909 | |
| ], | |
| [ | |
| "Good", | |
| 39.15277777777778 | |
| ], | |
| [ | |
| "Excellent", | |
| 19.822222222222223 | |
| ], | |
| [ | |
| "Severely polluted", | |
| 82 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Moderate to heavy rain", | |
| "data": [ | |
| [ | |
| "Excellent", | |
| 20.2 | |
| ], | |
| [ | |
| "Good", | |
| 33.875 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Fog", | |
| "data": [ | |
| [ | |
| "Medially polluted", | |
| 123.5 | |
| ], | |
| [ | |
| "Slightly polluted", | |
| 105.5 | |
| ], | |
| [ | |
| "Good", | |
| 71 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Moderate rain", | |
| "data": [ | |
| [ | |
| "Excellent", | |
| 19.125 | |
| ], | |
| [ | |
| "Good", | |
| 30.071428571428573 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Shower", | |
| "data": [ | |
| [ | |
| "Excellent", | |
| 21.571428571428573 | |
| ], | |
| [ | |
| "Good", | |
| 37.523809523809526 | |
| ], | |
| [ | |
| "Slightly polluted", | |
| 69.33333333333333 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Thundershower", | |
| "data": [ | |
| [ | |
| "Good", | |
| 31.17241379310345 | |
| ], | |
| [ | |
| "Excellent", | |
| 20.6 | |
| ], | |
| [ | |
| "Slightly polluted", | |
| 43.75 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Heavy rain", | |
| "data": [ | |
| [ | |
| "Excellent", | |
| 23.142857142857142 | |
| ], | |
| [ | |
| "Good", | |
| 30.285714285714285 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Rainstorm", | |
| "data": [ | |
| [ | |
| "Excellent", | |
| 19.142857142857142 | |
| ], | |
| [ | |
| "Good", | |
| 31.083333333333332 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Slight to moderate rain", | |
| "data": [ | |
| [ | |
| "Good", | |
| 33.23529411764706 | |
| ], | |
| [ | |
| "Excellent", | |
| 18.857142857142858 | |
| ], | |
| [ | |
| "Slightly polluted", | |
| 53 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "bar", | |
| "stack": "WEATHER1", | |
| "name": "Heavy rain to rainstorm", | |
| "data": [ | |
| [ | |
| "Excellent", | |
| 18 | |
| ] | |
| ], | |
| "encode": { | |
| "x": [ | |
| 0 | |
| ], | |
| "y": [ | |
| 1 | |
| ] | |
| } | |
| } | |
| ], | |
| "legend": { | |
| orient: 'vertical', | |
| right: 10 | |
| } | |
| } | |
| testHelper.create(echarts, 'main1', { | |
| title: 'Check bars should not be overflow the Y extent. (#9346)', | |
| option: option, | |
| height: 500 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var option = { | |
| xAxis: { | |
| type: 'category', | |
| data: ['a', 'b', 'c'] | |
| }, | |
| yAxis: { | |
| }, | |
| legend: { | |
| }, | |
| series: [{ | |
| name: 'a', | |
| type: 'bar', | |
| stack: 'all', | |
| data: [10, 20, 30], | |
| label: {show: true} | |
| }, { | |
| name: 'b', | |
| type: 'bar', | |
| stack: 'all', | |
| label: {show: true}, | |
| data: [7, 17, 27] | |
| }, { | |
| name: 'c', | |
| type: 'bar', | |
| label: {show: true}, | |
| data: [9, 19, 29] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main2_source_format_original', { | |
| title: 'data in series', | |
| option: option, | |
| height: 300, | |
| buttons: [{ | |
| text: 'stack: b+c', | |
| onclick: function () { | |
| var option2 = { | |
| series: [ | |
| {name: 'a', stack: undefined}, | |
| {name: 'b', stack: 'all'}, | |
| {name: 'c', stack: 'all'} | |
| ] | |
| }; | |
| chart.setOption(option2); | |
| commonAsserts(false, true, true); | |
| } | |
| }, { | |
| text: 'stack: a+b', | |
| onclick: function () { | |
| var option2 = { | |
| series: [ | |
| {name: 'a', stack: 'all'}, | |
| {name: 'b', stack: 'all'}, | |
| {name: 'c', stack: undefined} | |
| ] | |
| }; | |
| chart.setOption(option2); | |
| commonAsserts(true, true, false); | |
| } | |
| }] | |
| }); | |
| commonAsserts(true, true, false); | |
| // After click, chunks count should be the same. | |
| function commonAsserts(aIsStack, bIsStack, cIsStack) { | |
| testHelper.printAssert(chart, function (assert) { | |
| var ecModel = chart.getModel(); | |
| var storageA = ecModel.getSeriesByIndex(0).getData().getStore(); | |
| var storageB = ecModel.getSeriesByIndex(1).getData().getStore(); | |
| var storageC = ecModel.getSeriesByIndex(2).getData().getStore(); | |
| assert( | |
| storageA !== storageB | |
| && storageB !== storageC | |
| && storageC !== storageA | |
| ); | |
| // 2 more dimension for data stack calculation for each series. | |
| function getExpectedChunkCount(isStack) { | |
| var dimIndexMax = 1; | |
| if (isStack) { | |
| return dimIndexMax + 1 + 2; | |
| } | |
| else { | |
| return dimIndexMax + 1; | |
| } | |
| } | |
| assert(storageA._chunks.length === getExpectedChunkCount(aIsStack)); | |
| assert(storageB._chunks.length === getExpectedChunkCount(bIsStack)); | |
| assert(storageC._chunks.length === getExpectedChunkCount(cIsStack)); | |
| }); | |
| } | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var option = { | |
| dataset: { | |
| source: [ | |
| ['a', 'b', 'c'], | |
| [10, 20, 30], | |
| [7, 17, 27], | |
| [9, 19, 29] | |
| ] | |
| }, | |
| xAxis: { | |
| type: 'category' | |
| }, | |
| yAxis: { | |
| }, | |
| legend: { | |
| }, | |
| series: [{ | |
| name: 'a', | |
| type: 'bar', | |
| stack: 'all', | |
| seriesLayoutBy: 'row', | |
| encode: {x: 0, y: 1}, | |
| label: {show: true} | |
| }, { | |
| name: 'b', | |
| type: 'bar', | |
| stack: 'all', | |
| seriesLayoutBy: 'row', | |
| encode: {x: 0, y: 2}, | |
| label: {show: true}, | |
| }, { | |
| name: 'c', | |
| type: 'bar', | |
| seriesLayoutBy: 'row', | |
| encode: {x: 0, y: 3}, | |
| label: {show: true} | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main2_dataset', { | |
| title: 'data in dataset', | |
| option: option, | |
| height: 300, | |
| buttons: [{ | |
| text: 'stack: b+c', | |
| onclick: function () { | |
| var option2 = { | |
| series: [ | |
| {name: 'a', stack: undefined}, | |
| {name: 'b', stack: 'all'}, | |
| {name: 'c', stack: 'all'} | |
| ] | |
| }; | |
| chart.setOption(option2); | |
| commonAsserts([false, true, true]); | |
| } | |
| }, { | |
| text: 'stack: a+b', | |
| onclick: function () { | |
| var option2 = { | |
| series: [ | |
| {name: 'a', stack: 'all'}, | |
| {name: 'b', stack: 'all'}, | |
| {name: 'c', stack: undefined} | |
| ] | |
| }; | |
| chart.setOption(option2); | |
| commonAsserts([true, true, false]); | |
| } | |
| }] | |
| }); | |
| var sharedStoreStacks = []; | |
| commonAsserts([true, true, false]); | |
| // After click, chunks count should be the same. | |
| function commonAsserts(isStackArr) { | |
| for (var i = 0; i < isStackArr.length; i++) { | |
| sharedStoreStacks[i] |= isStackArr[i]; | |
| } | |
| testHelper.printAssert(chart, function (assert) { | |
| var ecModel = chart.getModel(); | |
| var storageA = ecModel.getSeriesByIndex(0).getData().getStore(); | |
| var storageB = ecModel.getSeriesByIndex(1).getData().getStore(); | |
| var storageC = ecModel.getSeriesByIndex(2).getData().getStore(); | |
| assert( | |
| storageA === storageB | |
| && storageB === storageC | |
| ); | |
| var stackSeriesCount = 0; | |
| for (var i = 0; i < sharedStoreStacks.length; i++) { | |
| if (sharedStoreStacks[i]) { | |
| stackSeriesCount++; | |
| } | |
| } | |
| var dimIndexMax = 3; | |
| console.log(storageA._chunks.length); | |
| // 2 more dimension for data stack calculation for each series. | |
| assert(storageA._chunks.length === dimIndexMax + 1 + 2 * stackSeriesCount); | |
| }); | |
| } | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var option = { | |
| xAxis: { | |
| type: 'category', | |
| data: ['a', 'b', 'c'] | |
| }, | |
| yAxis: { | |
| inverse: true | |
| }, | |
| legend: { | |
| }, | |
| series: [{ | |
| type: 'bar', | |
| stack: 'all', | |
| data: [ | |
| 10, 20, 30 | |
| ], | |
| label: { | |
| show: true, | |
| fontSize: 30 | |
| }, | |
| name: 'positive' | |
| }, { | |
| type: 'bar', | |
| stack: 'all', | |
| label: { | |
| show: true, | |
| fontSize: 30 | |
| }, | |
| data: [ | |
| -10, 0, -15 | |
| ], | |
| name: 'negative' | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main3', { | |
| title: 'Check 0 label should be at the correct place', | |
| option: option, | |
| height: 300 | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |