423 lines
14 KiB
HTML
Generated
423 lines
14 KiB
HTML
Generated
|
|
<!--
|
|
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">
|
|
<script src="lib/simpleRequire.js"></script>
|
|
<script src="lib/config.js"></script>
|
|
<script src="lib/testHelper.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.test-title {
|
|
background: rgb(0, 112, 6);
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="layout0"></div>
|
|
<div id="layout1"></div>
|
|
<div id="layout2"></div>
|
|
<div id="layout3"></div>
|
|
<div id="layout4"></div>
|
|
<div id="layout5"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
var arrayRows0 = [
|
|
['product', '2015', '2016', '2017'],
|
|
['Matcha Latte', 43.3, 85.8, 93.7],
|
|
['Milk Tea', 83.1, 73.4, 55.1],
|
|
['Cheese Cocoa', 86.4, 65.2, 82.5],
|
|
['Walnut Brownie', 72.4, 53.9, 39.1]
|
|
];
|
|
|
|
var arrayRows1 = [
|
|
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
|
|
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
|
|
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
|
|
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
|
|
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
|
|
];
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {},
|
|
dataset: {
|
|
source: arrayRows0
|
|
},
|
|
series: [
|
|
{type: 'bar'},
|
|
{type: 'bar'},
|
|
{type: 'bar'}
|
|
]
|
|
};
|
|
|
|
testHelper.create(echarts, 'layout0', {
|
|
title: '[Default] seriesLayoutBy, enocde, name, head, legend',
|
|
option: option,
|
|
dataTable: arrayRows0
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: arrayRows0
|
|
},
|
|
xAxis: [
|
|
{type: 'category', gridIndex: 0},
|
|
{type: 'category', gridIndex: 1}
|
|
],
|
|
yAxis: [
|
|
{gridIndex: 0},
|
|
{gridIndex: 1}
|
|
],
|
|
grid: [
|
|
{bottom: '55%'},
|
|
{top: '55%'}
|
|
],
|
|
series: [
|
|
{type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}},
|
|
{type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}},
|
|
{type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}},
|
|
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
|
|
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
|
|
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
|
|
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
|
|
]
|
|
};
|
|
|
|
testHelper.create(echarts, 'layout1', {
|
|
title: 'seriesLayoutBy: "row" and "column" \n[Default] enocde, name, head, legend',
|
|
option: option,
|
|
dataTable: arrayRows0,
|
|
height: 500,
|
|
info: {
|
|
grid: option.grid,
|
|
series: option.series
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showContent: false
|
|
},
|
|
dataset: {
|
|
source: arrayRows1
|
|
},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {gridIndex: 0},
|
|
grid: {top: '55%'},
|
|
series: [
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
{
|
|
type: 'pie',
|
|
id: 'pie',
|
|
radius: '30%',
|
|
center: ['50%', '25%'],
|
|
label: {
|
|
formatter: '{b}: {@2012} ({d}%)'
|
|
},
|
|
encode: {
|
|
itemName: 'product',
|
|
value: '2012',
|
|
tooltip: '2012'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'layout2', {
|
|
title: 'seriesLayoutBy: row and column, setOption, pie \n [Default] enocde, name, head, legend',
|
|
option: option,
|
|
dataTable: arrayRows1,
|
|
height: 500
|
|
});
|
|
|
|
var curDimension = 0;
|
|
chart && chart.on('updateAxisPointer', function (event) {
|
|
var xAxisInfo = event.axesInfo[0];
|
|
if (xAxisInfo) {
|
|
var dimension = xAxisInfo.value + 1;
|
|
if (curDimension !== dimension) {
|
|
curDimension = dimension;
|
|
chart.setOption({
|
|
series: {
|
|
id: 'pie',
|
|
label: {
|
|
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
|
|
},
|
|
encode: {
|
|
value: dimension,
|
|
tooltip: dimension
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
// Thanks to: https://github.com/lzp4ever
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
toolbox: {
|
|
top: 25,
|
|
// right: 20,
|
|
feature: {
|
|
magicType: {
|
|
type: ['stack', 'tiled']
|
|
}
|
|
}
|
|
},
|
|
dataset: {
|
|
source: [
|
|
['series', '1', '2', '3', '4', '5', '6'],
|
|
['a', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
|
|
['b', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
|
|
['c', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
|
|
['d', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
|
|
],
|
|
},
|
|
xAxis: { type: 'category' },
|
|
yAxis: { gridIndex: 0 },
|
|
series: [
|
|
{ type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} },
|
|
{ type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} },
|
|
{ type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} },
|
|
{ type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} },
|
|
|
|
],
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'layout3', {
|
|
title: 'stack',
|
|
option: option,
|
|
dataTable: option.dataset.source
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = {
|
|
dataset: [{
|
|
source: [
|
|
['2012-12-12', 323, 11.2],
|
|
['2012-12-13', 167, 8.3],
|
|
['2012-12-14', 284, 12],
|
|
['2012-12-18', 413, 4.1],
|
|
['2012-12-19', 287, 13.5]
|
|
]
|
|
}, {
|
|
source: [
|
|
[new Date(2012, 11, 12), 323 + 100, 11.2 + 100],
|
|
[new Date(2012, 11, 13), 167 + 100, 8.3 + 100],
|
|
[new Date(2012, 11, 14), 284 + 100, 12 + 100],
|
|
[new Date(2012, 11, 18), 413 + 100, 4.1 + 100],
|
|
[new Date(2012, 11, 19), 287 + 100, 13.5 + 100]
|
|
]
|
|
}],
|
|
legend: {},
|
|
xAxis: {
|
|
type: 'time'
|
|
},
|
|
yAxis: {},
|
|
dataZoom: [{
|
|
type: 'slider',
|
|
}, {
|
|
type: 'inside'
|
|
}],
|
|
grid: {
|
|
bottom: 80
|
|
},
|
|
series: [{
|
|
name: 'A1',
|
|
encode: {x: 0, y: 1},
|
|
type: 'line'
|
|
}, {
|
|
name: 'A2',
|
|
encode: {x: 0, y: 2},
|
|
type: 'line'
|
|
}, {
|
|
name: 'B1',
|
|
encode: {x: 0, y: 1},
|
|
datasetIndex: 1,
|
|
type: 'line'
|
|
}, {
|
|
name: 'B2',
|
|
encode: {x: 0, y: 2},
|
|
datasetIndex: 1,
|
|
type: 'line'
|
|
}]
|
|
};
|
|
|
|
testHelper.create(echarts, 'layout4', {
|
|
title: 'time axis',
|
|
option: option,
|
|
dataTables: [
|
|
option.dataset[0].source,
|
|
option.dataset[1].source
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
dataset: {
|
|
source: [
|
|
['2012-12-12 15:18:09.321', 323, 11.2],
|
|
['2012-12-12 15:18:10.432', 167, 8.3],
|
|
['2012-12-12 15:18:11.543', 284, 12],
|
|
['2012-12-12 15:18:12.654', 413, 4.1],
|
|
['2012-12-12 15:18:13.765', 287, 13.5]
|
|
]
|
|
},
|
|
legend: {},
|
|
xAxis: {
|
|
type: 'time',
|
|
axisLabel: {
|
|
formatter: function (val) {
|
|
return echarts.format.formatTime('hh:mm:ss.SSS\nyyyy-MM-dd', val)
|
|
}
|
|
}
|
|
},
|
|
yAxis: {},
|
|
dataZoom: [{
|
|
type: 'slider',
|
|
}, {
|
|
type: 'inside'
|
|
}],
|
|
grid: {
|
|
bottom: 80
|
|
},
|
|
series: [{
|
|
name: 'A1',
|
|
encode: {x: 0, y: 1},
|
|
label: {
|
|
show: true,
|
|
formatter: function (param) {
|
|
return echarts.format.formatTime('hh:mm:ss.SSS', param.value[0])
|
|
},
|
|
textBorderColor: '#fff',
|
|
textBorderWidth: 3
|
|
},
|
|
type: 'line'
|
|
}, {
|
|
name: 'A2',
|
|
encode: {x: 0, y: 2},
|
|
type: 'line'
|
|
}]
|
|
};
|
|
|
|
testHelper.create(echarts, 'layout5', {
|
|
title: 'time axis2',
|
|
option: option,
|
|
dataTable: option.dataset.source
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|