730 lines
26 KiB
HTML
Generated
730 lines
26 KiB
HTML
Generated
<!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> |