1048 lines
34 KiB
HTML
Generated
1048 lines
34 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">
|
|
<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(97, 17, 97);
|
|
}
|
|
.test-chart {
|
|
height: 400px;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div id="specify-dimensions"></div>
|
|
<div id="key-columns"></div>
|
|
<div id="category-no-encode-two-value-axis"></div>
|
|
<div id="category-no-axis-data-multi"></div>
|
|
<div id="category-no-encode-no-axis-data-single"></div>
|
|
<div id="category-no-encode-has-axis-data"></div>
|
|
<div id="category"></div>
|
|
<div id="two-value-axes"></div>
|
|
<div id="object-source"></div>
|
|
<div id="empty-data"></div>
|
|
<div id="empty-source"></div>
|
|
<div id="dynamic-category"></div>
|
|
<div id="dynamic-time"></div>
|
|
<div id="dimension-but-no-column1"></div>
|
|
<div id="dimension-but-no-column2"></div>
|
|
<div id="dimension-but-no-column3"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
var keyColumnsDrink = {
|
|
'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 source = [
|
|
[21, 120, 220, 150, 320, 820],
|
|
[31, 132, 182, 232, 332, 932],
|
|
[41, 101, 191, 201, 301, 901],
|
|
[51, 134, 234, 154, 334, 934],
|
|
[61, 90, 290, 190, 309, 1290],
|
|
[71, 230, 330, 330, 330, 1330],
|
|
[81, 210, 310, 410, 320, 1320]
|
|
];
|
|
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {trigger: 'axis'},
|
|
grid: {},
|
|
xAxis: {},
|
|
yAxis: {},
|
|
dataZoom: [{}, {type: 'inside'}],
|
|
dataset: [{
|
|
dimensions: ['G', 'H', 'I', 'Q', 'R'],
|
|
// sourceHeader: true,
|
|
source: source
|
|
}],
|
|
series: [
|
|
{type:'scatter', label: {show: true, position: 'top', textBorderWidth: 2, textBorderColor: '#fff'}, dimensions: ['cccccccccc', 'ddddddddddd']},
|
|
{type:'scatter', label: {show: true, position: 'top', textBorderWidth: 2, textBorderColor: '#fff'}},
|
|
{type:'scatter', label: {show: true, position: 'top', textBorderWidth: 2, textBorderColor: '#fff'}, sourceHeader: true}
|
|
]
|
|
};
|
|
testHelper.create(echarts, 'specify-dimensions', {
|
|
title: 'speify dimensions',
|
|
dataTable: source,
|
|
option: option,
|
|
info: {
|
|
dimensions: option.dataset[0].dimensions,
|
|
serise: option.series
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {trigger: 'axis'},
|
|
grid: {},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {},
|
|
dataset: [{
|
|
source: keyColumnsDrink
|
|
}],
|
|
series: [
|
|
{type:'line'},
|
|
{type:'line'},
|
|
{type:'line'}
|
|
]
|
|
};
|
|
testHelper.create(echarts, 'key-columns', {
|
|
title: 'category: no encode declared, two value axis',
|
|
dataTable: keyColumnsDrink,
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var source = [
|
|
[21, 120, 220, 150, 320, 820],
|
|
[21, 132, 182, 232, 332, 932],
|
|
[21, 101, 191, 201, 301, 901],
|
|
[21, 134, 234, 154, 334, 934],
|
|
[21, 90, 290, 190, 309, 1290],
|
|
[21, 230, 330, 330, 330, 1330],
|
|
[21, 210, 310, 410, 320, 1320]
|
|
];
|
|
var option = {
|
|
legend: {
|
|
data: ['A', 'B', 'C']
|
|
},
|
|
tooltip: {trigger: 'axis'},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {},
|
|
yAxis: {},
|
|
dataset: [{
|
|
source: source
|
|
}],
|
|
series: [
|
|
{
|
|
name:'A',
|
|
type:'line',
|
|
},
|
|
{
|
|
name:'B',
|
|
type:'line',
|
|
},
|
|
{
|
|
name:'C',
|
|
type:'line',
|
|
}
|
|
]
|
|
};
|
|
testHelper.create(echarts, 'category-no-encode-two-value-axis', {
|
|
title: 'category: no encode declared, two value axis',
|
|
option: option,
|
|
dataTable: source
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var source = [
|
|
['周一', 120, '苹果', 150, 320, 820],
|
|
['周二', 132, '狸猫', 232, 332, 932],
|
|
['周三', 101, '周一', 201, 301, 901],
|
|
['周四', 134, '周八', 154, 334, 934],
|
|
['周五', 90, '周六', 190, 309, 1290],
|
|
['周六', 230, '-', 330, 330, 1330],
|
|
['周日', 210, '周日', 410, 320, 1320]
|
|
];
|
|
var option = {
|
|
legend: {
|
|
data:[
|
|
'{x: 0, y: 1}',
|
|
'{x: 2, y: 3}',
|
|
'{x: 2, y: 4}',
|
|
'{x: 1, y: 2}',
|
|
'{x: 2, y: 0}'
|
|
]
|
|
},
|
|
tooltip: {trigger: 'axis'},
|
|
grid: {
|
|
bottom: 70
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false
|
|
}],
|
|
dataZoom: {
|
|
type: 'slider'
|
|
},
|
|
yAxis: [{
|
|
type: 'value'
|
|
}, {
|
|
type: 'category'
|
|
}],
|
|
dataset: [{
|
|
source: source
|
|
}, {
|
|
source: [
|
|
[122, '第二个 dataset', 44],
|
|
[56, '周六', 10],
|
|
[96, '狸猫', 112]
|
|
]
|
|
}],
|
|
series: [
|
|
{
|
|
name:'{x: 0, y: 1}',
|
|
type:'line',
|
|
encode: {x: 0, y: 1}
|
|
},
|
|
{
|
|
name:'{x: 2, y: 3}',
|
|
type:'line',
|
|
encode: {x: 2, y: 3}
|
|
},
|
|
{
|
|
name:'{x: 2, y: 4}',
|
|
type:'line',
|
|
encode: {x: 2, y: 4}
|
|
},
|
|
{
|
|
name:'{x: 1, y: 2}',
|
|
type:'line',
|
|
encode: {x: 1, y: 2},
|
|
datasetIndex: 1
|
|
},
|
|
{
|
|
name: '{x: 2, y: 0}',
|
|
type: 'scatter',
|
|
yAxisIndex: 1,
|
|
symbolSize: function (val) {
|
|
return val[5] / 30;
|
|
},
|
|
encode: {x: 2, y: 0}
|
|
}
|
|
]
|
|
};
|
|
|
|
testHelper.create(echarts, 'category-no-axis-data-multi', {
|
|
title: 'category: no axis.data, multi category',
|
|
dataTable: source,
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var source = [
|
|
['周一', 120, 220, 150, 320, 820],
|
|
['周二', 132, 182, 232, 332, 932],
|
|
['周三', 101, 191, 201, 301, 901],
|
|
['周四', 134, 234, 154, 334, 934],
|
|
['周五', 90, 290, 190, 309, 1290],
|
|
['周六', 230, 330, 330, 330, 1330],
|
|
['周日', 210, 310, 410, 320, 1320]
|
|
];
|
|
var option = {
|
|
legend: {
|
|
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
|
|
},
|
|
tooltip: {trigger: 'axis'},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
dataset: {
|
|
source: source
|
|
},
|
|
series: [
|
|
{
|
|
name:'邮件营销',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}}
|
|
},
|
|
{
|
|
name:'联盟广告',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}}
|
|
},
|
|
{
|
|
name:'视频广告',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}}
|
|
},
|
|
{
|
|
name:'直接访问',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}}
|
|
},
|
|
{
|
|
name:'搜索引擎',
|
|
type:'line',
|
|
stack: '总量',
|
|
label: {show: true},
|
|
areaStyle: {normal: {}}
|
|
}
|
|
]
|
|
};
|
|
|
|
testHelper.create(echarts, 'category-no-encode-no-axis-data-single', {
|
|
title: 'category: no encode declared, no axis.data, single category',
|
|
dataTable: source,
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var source = [
|
|
['周一', 120, 220, 150, 320, 820],
|
|
['周二', 132, 182, 232, 332, 932],
|
|
['周三', 101, 191, 201, 301, 901],
|
|
['周四', 134, 234, 154, 334, 934],
|
|
['周五', 90, 290, 190, 309, 1290],
|
|
['周六', 230, 330, 330, 330, 1330],
|
|
['周日', 210, 310, 410, 320, 1320]
|
|
];
|
|
var option = {
|
|
legend: {
|
|
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
|
|
},
|
|
tooltip: {trigger: 'axis'},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['周零', '周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
dataset: {
|
|
source: source
|
|
},
|
|
series: [
|
|
{
|
|
name:'邮件营销',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}}
|
|
},
|
|
{
|
|
name:'联盟广告',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}}
|
|
},
|
|
{
|
|
name:'视频广告',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}}
|
|
},
|
|
{
|
|
name:'直接访问',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}}
|
|
},
|
|
{
|
|
name:'搜索引擎',
|
|
type:'line',
|
|
stack: '总量',
|
|
label: {show: true},
|
|
areaStyle: {normal: {}}
|
|
}
|
|
]
|
|
};
|
|
testHelper.create(echarts, 'category-no-encode-has-axis-data', {
|
|
title: 'category: no encode declared, axis.data given',
|
|
dataTable: source,
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var source = [
|
|
['周一', 120, 220, 150, 320, 820],
|
|
['周二', 132, 182, 232, 332, 932],
|
|
['周三', 101, 191, 201, 301, 901],
|
|
['周四', 134, 234, 154, 334, 934],
|
|
['周五', 90, 290, 190, 309, 1290],
|
|
['周六', 230, 330, 330, 330, 1330],
|
|
['周日', 210, 310, 410, 320, 1320]
|
|
];
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
dataset: {
|
|
source: source
|
|
},
|
|
series: [
|
|
{
|
|
name:'邮件营销',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}},
|
|
encode: {x: 0, y: 1}
|
|
},
|
|
{
|
|
name:'联盟广告',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}},
|
|
encode: {x: 0, y: 2}
|
|
},
|
|
{
|
|
name:'视频广告',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}},
|
|
encode: {x: 0, y: 3}
|
|
},
|
|
{
|
|
name:'直接访问',
|
|
type:'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}},
|
|
encode: {x: 0, y: 4}
|
|
},
|
|
{
|
|
name:'搜索引擎',
|
|
type:'line',
|
|
stack: '总量',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
areaStyle: {normal: {}},
|
|
encode: {x: 0, y: 5}
|
|
}
|
|
]
|
|
};
|
|
testHelper.create(echarts, 'category', {
|
|
title: 'category: encode declared',
|
|
dataTable: source,
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var source = [
|
|
['周一', 120, 220, 150, 320, 820],
|
|
['周二', 132, 182, 232, 332, 932],
|
|
['周三', 101, 191, 201, 301, 901],
|
|
['周四', 134, 234, 154, 334, 934],
|
|
['周五', 90, 290, 190, 309, 1290],
|
|
['周六', 230, 330, 330, 330, 1330],
|
|
['周日', 210, 310, 410, 320, 1320]
|
|
];
|
|
var option = {
|
|
tooltip: {
|
|
},
|
|
legend: {
|
|
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {},
|
|
yAxis: {},
|
|
grid: {
|
|
right: 50,
|
|
bottom: 70
|
|
},
|
|
legend: {
|
|
left: 'center',
|
|
data: ['A Series', 'B Series']
|
|
},
|
|
dataZoom: [{
|
|
xAxisIndex: 0,
|
|
type: 'inside'
|
|
}, {
|
|
yAxisIndex: 0,
|
|
type: 'inside'
|
|
}, {
|
|
xAxisIndex: 0,
|
|
type: 'slider'
|
|
}, {
|
|
yAxisIndex: 0,
|
|
type: 'slider'
|
|
}],
|
|
dataset: {
|
|
source: source
|
|
},
|
|
series: [
|
|
{
|
|
name:'A Series',
|
|
type:'scatter',
|
|
areaStyle: {normal: {}},
|
|
encode: {x: 2, y: 1}
|
|
},
|
|
{
|
|
name:'B Series',
|
|
type:'scatter',
|
|
areaStyle: {normal: {}},
|
|
encode: {x: 4, y: 1}
|
|
}
|
|
]
|
|
};
|
|
testHelper.create(echarts, 'two-value-axes', {
|
|
title: 'two value axes (A: {x: 2, y: 1}, B: {x: 4, y: 1})',
|
|
dataTable: source,
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
"dataset": {
|
|
"source": [
|
|
{
|
|
"elevation_above_sea_level": 4,
|
|
"length": 1,
|
|
"width": 4
|
|
}
|
|
]
|
|
},
|
|
|
|
"xAxis": {
|
|
"type": "value"
|
|
},
|
|
"yAxis": {
|
|
"type": "value"
|
|
},
|
|
"series": [
|
|
{
|
|
"type": "line",
|
|
"encode": {
|
|
"x": "length",
|
|
"y": "elevation_above_sea_level"
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
testHelper.create(echarts, 'object-source', {
|
|
title: "object source that contains 'length' won't break render",
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [
|
|
{
|
|
type:'line'
|
|
}
|
|
]
|
|
};
|
|
|
|
testHelper.create(echarts, 'empty-data', {
|
|
title: 'data and dataset undefined, only axis shown.',
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [
|
|
{
|
|
type:'line'
|
|
}
|
|
],
|
|
dataset: {
|
|
source: []
|
|
}
|
|
};
|
|
|
|
testHelper.create(echarts, 'empty-source', {
|
|
title: 'data.source = [], only axis shown.',
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {trigger: 'axis'},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {},
|
|
series: [
|
|
{type:'line', encode: {x: 'date', y: 'Matcha Latte', itemId: 'date'}},
|
|
{type:'line', encode: {x: 'date', y: 'Milk Tea', itemId: 'date'}},
|
|
{type:'line', encode: {x: 'date', y: 'Cheese Cocoa', itemId: 'date'}},
|
|
{type:'line', encode: {x: 'date', y: 'Walnut Brownie', itemId: 'date'}}
|
|
]
|
|
};
|
|
|
|
var baseSource = [
|
|
['date', 'Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
|
|
['2012-03-01', 11.1, 40.4, 65.1, 13.3],
|
|
['2012-03-02', 36.5, 52.1, 85.7, 23.1],
|
|
['2012-03-03', 64.1, 17.2, 99.5, 16.4],
|
|
['2012-03-04', 15.2, 77.1, 29.2, 62.4],
|
|
['2012-03-05', 55.4, 73.1, 49.2, 22.9],
|
|
['2012-03-06', 35.2, 27.1, 24.6, 92.7],
|
|
['2012-03-07', 51.7, 57.1, 89.1, 69.2]
|
|
];
|
|
var lastDate = +echarts.number.parseDate('2012-03-07');
|
|
|
|
var chart = testHelper.create(echarts, 'dynamic-category', {
|
|
title: 'dynamic-category',
|
|
dataTable: keyColumnsDrink,
|
|
option: option,
|
|
info: baseSource
|
|
});
|
|
|
|
if (chart) {
|
|
setInterval(function () {
|
|
lastDate += 3600 * 24 * 1000;
|
|
|
|
baseSource.push([
|
|
echarts.format.formatTime('yyyy-MM-dd', lastDate),
|
|
+(Math.random() * 100).toFixed(1),
|
|
+(Math.random() * 100).toFixed(1),
|
|
+(Math.random() * 100).toFixed(1),
|
|
+(Math.random() * 100).toFixed(1)
|
|
]);
|
|
|
|
baseSource.splice(1, 1);
|
|
|
|
chart.setOption({
|
|
dataset: {
|
|
source: baseSource
|
|
}
|
|
});
|
|
}, 1000);
|
|
}
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {trigger: 'axis'},
|
|
xAxis: {type: 'time'},
|
|
yAxis: {},
|
|
series: [
|
|
{type:'line', encode: {x: 'date', y: 'Matcha Latte', itemId: 'date'}},
|
|
{type:'line', encode: {x: 'date', y: 'Milk Tea', itemId: 'date'}},
|
|
{type:'line', encode: {x: 'date', y: 'Cheese Cocoa', itemId: 'date'}},
|
|
{type:'line', encode: {x: 'date', y: 'Walnut Brownie', itemId: 'date'}}
|
|
]
|
|
};
|
|
|
|
var baseSource = [
|
|
['date', 'Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
|
|
['2012-03-01', 11.1, 40.4, 65.1, 13.3],
|
|
['2012-03-02', 36.5, 52.1, 85.7, 23.1],
|
|
['2012-03-03', 64.1, 17.2, 99.5, 16.4],
|
|
['2012-03-04', 15.2, 77.1, 29.2, 62.4],
|
|
['2012-03-05', 55.4, 73.1, 49.2, 22.9],
|
|
['2012-03-06', 35.2, 27.1, 24.6, 92.7],
|
|
['2012-03-07', 51.7, 57.1, 89.1, 69.2]
|
|
];
|
|
var lastDate = +echarts.number.parseDate('2012-03-07');
|
|
|
|
var chart = testHelper.create(echarts, 'dynamic-time', {
|
|
title: 'dynamic-time',
|
|
dataTable: keyColumnsDrink,
|
|
option: option,
|
|
info: baseSource
|
|
});
|
|
|
|
if (chart) {
|
|
setInterval(function () {
|
|
lastDate += 3600 * 24 * 1000;
|
|
|
|
baseSource.push([
|
|
echarts.format.formatTime('yyyy-MM-dd', lastDate),
|
|
+(Math.random() * 100).toFixed(1),
|
|
+(Math.random() * 100).toFixed(1),
|
|
+(Math.random() * 100).toFixed(1),
|
|
+(Math.random() * 100).toFixed(1)
|
|
]);
|
|
|
|
baseSource.splice(1, 1);
|
|
|
|
chart.setOption({
|
|
dataset: {
|
|
source: baseSource
|
|
}
|
|
});
|
|
}, 1000);
|
|
}
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
dimensions: ['product', '2015', '2016', '2017'],
|
|
source: [
|
|
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8},
|
|
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4},
|
|
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2},
|
|
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9}
|
|
]
|
|
},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {},
|
|
series: [
|
|
{type: 'bar'},
|
|
{type: 'bar'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'dimension-but-no-column1', {
|
|
title: '[obejct array] No 2017, but chart should be rendered',
|
|
dataTable: option.dataset.source,
|
|
option: option,
|
|
info: option.dataset.dimensions,
|
|
infoKey: 'dimensions'
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
dimensions: ['product', '2015', '2016', '2017'],
|
|
source: [
|
|
['Matcha Latte', 43.3, 85.8],
|
|
['Milk Tea', 83.1, 73.4],
|
|
['Cheese Cocoa', 86.4, 65.2],
|
|
['Walnut Brownie', 72.4, 53.9]
|
|
]
|
|
},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {},
|
|
series: [
|
|
{type: 'bar'},
|
|
{type: 'bar'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'dimension-but-no-column2', {
|
|
title: '[2d-array] No 2017, but chart should be rendered',
|
|
dataTable: option.dataset.source,
|
|
option: option,
|
|
info: option.dataset.dimensions,
|
|
infoKey: 'dimensions'
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
dimensions: ['product', '2015', '2016', '2017'],
|
|
source: {
|
|
'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
|
|
'2015': [43.3, 83.1, 86.4, 72.4],
|
|
'2016': [85.8, 73.4, 65.2, 53.9]
|
|
}
|
|
},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {},
|
|
series: [
|
|
{type: 'bar'},
|
|
{type: 'bar'}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'dimension-but-no-column3', {
|
|
title: '[key columns] No 2017, but chart should be rendered',
|
|
dataTable: option.dataset.source,
|
|
option: option,
|
|
info: option.dataset.dimensions,
|
|
infoKey: 'dimensions'
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |