696 lines
19 KiB
HTML
Generated
696 lines
19 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>
|
|
<!-- <script src="ut/lib/canteen.js"></script> -->
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
</style>
|
|
|
|
|
|
|
|
<div id="main0"></div>
|
|
<div id="main1"></div>
|
|
<div id="main2"></div>
|
|
<div id="main3"></div>
|
|
<div id="main4"></div>
|
|
<div id="main5"></div>
|
|
<div id="main6"></div>
|
|
<div id="main7"></div>
|
|
<div id="main8"></div>
|
|
<div id="main9"></div>
|
|
<div id="main10"></div>
|
|
<div id="main11"></div>
|
|
<div id="main12"></div>
|
|
<div id="main13"></div>
|
|
<div id="main14"></div>
|
|
<div id="main15"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['分类', '平均消费金额'],
|
|
['a007', 100],
|
|
['008', 100],
|
|
['123', 100],
|
|
['333', 100],
|
|
['444', 100],
|
|
['Test', 100]
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'pie', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main0', {
|
|
title: [
|
|
'**6 equivalent sectors** should be rendered with **labels different**'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['分类', '平均消费金额'],
|
|
// number-like as category
|
|
['7', 100],
|
|
['008', 100],
|
|
['123', 100],
|
|
['333', 100],
|
|
['444', 100],
|
|
['Test', 100]
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'pie', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main1', {
|
|
title: [
|
|
'**6 equivalent sectors** should be rendered with **labels different**'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['分类', '平均消费金额'],
|
|
// [value, label]
|
|
[100, '7'],
|
|
[90, '008'],
|
|
[80, '123'],
|
|
[70, '333'],
|
|
[60, '444'],
|
|
[50, 'Test']
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'funnel', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main2', {
|
|
title: [
|
|
'**6 decreased bars** should be rendered with **labels different**'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['分类', 'V100', 'V200', 'V300'],
|
|
// number-like as category
|
|
['7', 100, 200, 300],
|
|
['008', 100, 200, 300],
|
|
['123', 100, 200, 300],
|
|
['333', 100, 200, 300],
|
|
['444', 100, 200, 300],
|
|
['Test', 100, 200, 300]
|
|
]
|
|
},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {},
|
|
series: [
|
|
{type: 'bar'},
|
|
{type: 'bar'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main3', {
|
|
title: [
|
|
'share category xAxis (number-like) and **series0: V100, series1: 200** bars'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['分类', 'V100', 'V200', 'V300'],
|
|
// number-like as category
|
|
['7', 100, 200, 300],
|
|
['008', 100, 200, 300],
|
|
['123', 100, 200, 300],
|
|
['333', 100, 200, 300],
|
|
['444', 100, 200, 300],
|
|
['Test', 100, 200, 300]
|
|
]
|
|
},
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [
|
|
{type: 'scatter'},
|
|
{type: 'scatter'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main4', {
|
|
title: [
|
|
'both x y value axis. Should be **series0: "分类 V100", series1: "V200 V300"** '
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['分类', 'O', 'C', 'L', 'H', 'Column'],
|
|
['7', 190, 250, 50, 490, 500],
|
|
['008', 180, 240, 60, 480, 510],
|
|
['123', 170, 230, 70, 470, 520],
|
|
['333', 160, 220, 80, 460, 530],
|
|
['444', 150, 210, 90, 450, 540],
|
|
['Test', 140, 200, 100, 440, 550]
|
|
]
|
|
},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {},
|
|
series: [
|
|
{type: 'candlestick'},
|
|
{type: 'line'},
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main5', {
|
|
title: [
|
|
'candlestick series should be "O C L H"',
|
|
'line series should be "Column"'
|
|
],
|
|
option: option,
|
|
height: 300
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['A', 'B'],
|
|
// all-number like
|
|
['74', '100'],
|
|
['008', '101'],
|
|
['123', '102'],
|
|
['333', '103'],
|
|
['444', '104'],
|
|
['555', '105']
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'pie', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main6', {
|
|
title: [
|
|
'all number-like. Should **6 different sectors** and **labels 100-105**'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['A', 'B'],
|
|
// all-number like
|
|
[74, 100],
|
|
[8, 101],
|
|
[123, 102],
|
|
[333, 103],
|
|
[444, 104],
|
|
[555, 105]
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'pie', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main7', {
|
|
title: [
|
|
'all pure number. Should **6 different size** sectors with **labels 100-105**.'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['A', 'B'],
|
|
// all-number like
|
|
['23', '-'],
|
|
['8', 100],
|
|
['123', 100],
|
|
['333', 100],
|
|
['444', 100],
|
|
['555', 100]
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'pie', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main8', {
|
|
title: [
|
|
'Has empty "-". Should have **5 equivalent** sectors with **labels different**.'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['A', 'B'],
|
|
// all-number like
|
|
['23', null],
|
|
['8', 100],
|
|
['123', 100],
|
|
['333', 100],
|
|
['444', 100],
|
|
['555', 100]
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'pie', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main9', {
|
|
title: [
|
|
'Has empty null. Should have **5 equivalent** sectors with **labels different**.'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
{what: '007', name: 100},
|
|
{what: '008', name: 101},
|
|
{what: '123', name: 102},
|
|
{what: '333', name: 103},
|
|
{what: '444', name: 104},
|
|
{what: 'Test', name: 105}
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'pie', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main10', {
|
|
title: [
|
|
'dimension is named as "name" in Array.<Object>',
|
|
'**5 different size** sectors should be rendered with **labels 100-105**'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
{what: 212, name: 100},
|
|
{what: 312, name: 101},
|
|
{what: 456, name: 102},
|
|
{what: 123, name: 103},
|
|
{what: 344, name: 104},
|
|
{what: 123, name: 105}
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'pie', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main11', {
|
|
title: [
|
|
'dimension is named as "name" in Array.<Object>',
|
|
'**6 different size** sectors should be rendered with **labels 100-105**'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
[212],
|
|
[312],
|
|
[456],
|
|
[123],
|
|
[344],
|
|
[254]
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'pie', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main12', {
|
|
title: [
|
|
'Only one column of pure number, **6 different size** sectors with labels.'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['212'],
|
|
['312'],
|
|
['456'],
|
|
['123'],
|
|
['344'],
|
|
['254']
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'pie', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main13', {
|
|
title: [
|
|
'Only one column of number-like str, **5 different size** sectors with labels.'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
dimensions: [null, {type: 'ordinal'}],
|
|
source: [
|
|
['212', 100],
|
|
['312', 101],
|
|
['456', 102],
|
|
['123', 103],
|
|
['344', 104],
|
|
['123', 105]
|
|
]
|
|
},
|
|
series: [
|
|
{type: 'pie', radius: '50%'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main14', {
|
|
title: [
|
|
'dataset.dimensions type defined, **6 different size** sectors with **labels 100-105**.'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
animation: false,
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['212', 100],
|
|
['312', 101],
|
|
['456', 102],
|
|
['123', 103],
|
|
['344', 104],
|
|
['123', 105]
|
|
]
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '50%',
|
|
dimensions: [null, {type: 'ordinal'}]
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main15', {
|
|
title: [
|
|
'series.dimensions type defined, **6 different size** sectors with **labels 100-105**.'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|