| <!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> |
