You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
687 lines
22 KiB
687 lines
22 KiB
3 years ago
|
/* ------------------------------------------------------------------------------
|
||
|
|
*
|
||
|
|
* # Echarts - lines and areas
|
||
|
|
*
|
||
|
|
* Lines and areas chart configurations
|
||
|
|
*
|
||
|
|
* Version: 1.0
|
||
|
|
* Latest update: August 1, 2015
|
||
|
|
*
|
||
|
|
* ---------------------------------------------------------------------------- */
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
|
||
|
|
// Set paths
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
require.config({
|
||
|
|
paths: {
|
||
|
|
echarts: 'assets/js/plugins/visualization/echarts'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// Configuration
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
require(
|
||
|
|
[
|
||
|
|
'echarts',
|
||
|
|
'echarts/theme/limitless',
|
||
|
|
'echarts/chart/bar',
|
||
|
|
'echarts/chart/line'
|
||
|
|
],
|
||
|
|
|
||
|
|
|
||
|
|
// Charts setup
|
||
|
|
function (ec, limitless) {
|
||
|
|
|
||
|
|
|
||
|
|
// Initialize charts
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
var basic_lines = ec.init(document.getElementById('basic_lines'), limitless);
|
||
|
|
var stacked_lines = ec.init(document.getElementById('stacked_lines'), limitless);
|
||
|
|
var inverted_axes = ec.init(document.getElementById('inverted_axes'), limitless);
|
||
|
|
var line_point = ec.init(document.getElementById('line_point'), limitless);
|
||
|
|
var basic_area = ec.init(document.getElementById('basic_area'), limitless);
|
||
|
|
var stacked_area = ec.init(document.getElementById('stacked_area'), limitless);
|
||
|
|
var reversed_value = ec.init(document.getElementById('reversed_value'), limitless);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Charts setup
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
//
|
||
|
|
// Basic lines options
|
||
|
|
//
|
||
|
|
|
||
|
|
basic_lines_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 40,
|
||
|
|
x2: 40,
|
||
|
|
y: 35,
|
||
|
|
y2: 25
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
legend: {
|
||
|
|
data: ['Maximum', 'Minimum']
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add custom colors
|
||
|
|
color: ['#EF5350', '#66BB6A'],
|
||
|
|
|
||
|
|
// Enable drag recalculate
|
||
|
|
calculable: true,
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Vertical axis
|
||
|
|
yAxis: [{
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value} °C'
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Maximum',
|
||
|
|
type: 'line',
|
||
|
|
data: [11, 11, 15, 13, 12, 13, 10],
|
||
|
|
markLine: {
|
||
|
|
data: [{
|
||
|
|
type: 'average',
|
||
|
|
name: 'Average'
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Minimum',
|
||
|
|
type: 'line',
|
||
|
|
data: [1, -2, 2, 5, 3, 2, 0],
|
||
|
|
markLine: {
|
||
|
|
data: [{
|
||
|
|
type: 'average',
|
||
|
|
name: 'Average'
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Stacked lines options
|
||
|
|
//
|
||
|
|
|
||
|
|
stacked_lines_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 40,
|
||
|
|
x2: 20,
|
||
|
|
y: 35,
|
||
|
|
y2: 25
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
legend: {
|
||
|
|
data: ['Internet Explorer', 'Opera', 'Safari', 'Firefox', 'Chrome']
|
||
|
|
},
|
||
|
|
|
||
|
|
// Enable drag recalculate
|
||
|
|
calculable: true,
|
||
|
|
|
||
|
|
// Hirozontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: [
|
||
|
|
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
|
||
|
|
]
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Vertical axis
|
||
|
|
yAxis: [{
|
||
|
|
type: 'value'
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Internet Explorer',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Opera',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Safari',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [150, 232, 201, 154, 190, 330, 410]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Firefox',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [320, 332, 301, 334, 390, 330, 320]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Chrome',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Inverted axes options
|
||
|
|
//
|
||
|
|
|
||
|
|
inverted_axes_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 40,
|
||
|
|
x2: 20,
|
||
|
|
y: 35,
|
||
|
|
y2: 25
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
legend: {
|
||
|
|
data: ['Altitude(km) and temperature(°C)']
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
// Enable drag recalculate
|
||
|
|
calculable: true,
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
formatter: 'Temperature: <br/>{b}km: {c}°C'
|
||
|
|
},
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value} °C'
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Vertical axis
|
||
|
|
yAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
axisLine: {
|
||
|
|
onZero: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value} km'
|
||
|
|
},
|
||
|
|
boundaryGap: false,
|
||
|
|
data: [
|
||
|
|
0, 10, 20, 30, 40, 50, 60, 70, 80
|
||
|
|
]
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Altitude(km) and temperature(°C)',
|
||
|
|
type: 'line',
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
lineStyle: {
|
||
|
|
shadowColor: 'rgba(0,0,0,0.4)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Line and point options
|
||
|
|
//
|
||
|
|
|
||
|
|
line_point_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 35,
|
||
|
|
x2: 35,
|
||
|
|
y: 60,
|
||
|
|
y2: 25
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
show: true,
|
||
|
|
type: 'cross',
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed',
|
||
|
|
width: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
formatter: function (params) {
|
||
|
|
return params.seriesName + ': [ '
|
||
|
|
+ params.value[0] + ', '
|
||
|
|
+ params.value[1] + ' ]';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
legend: {
|
||
|
|
x: 'left',
|
||
|
|
data: ['Data set 1', 'Data set 2']
|
||
|
|
},
|
||
|
|
|
||
|
|
// Display toolbox
|
||
|
|
toolbox: {
|
||
|
|
show: true,
|
||
|
|
feature: {
|
||
|
|
mark: {
|
||
|
|
show: true,
|
||
|
|
title: {
|
||
|
|
mark: 'Markline switch',
|
||
|
|
markUndo: 'Undo markline',
|
||
|
|
markClear: 'Clear markline'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataZoom: {
|
||
|
|
show: true,
|
||
|
|
title: {
|
||
|
|
dataZoom: 'Data zoom',
|
||
|
|
dataZoomReset: 'Reset zoom'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataView: {
|
||
|
|
show: true,
|
||
|
|
readOnly: false,
|
||
|
|
title: 'View data',
|
||
|
|
lang: ['View chart data', 'Close', 'Update']
|
||
|
|
},
|
||
|
|
magicType: {
|
||
|
|
show: true,
|
||
|
|
title: {
|
||
|
|
line: 'Switch to line chart',
|
||
|
|
bar: 'Switch to bar chart',
|
||
|
|
},
|
||
|
|
type: ['line', 'bar']
|
||
|
|
},
|
||
|
|
restore: {
|
||
|
|
show: true,
|
||
|
|
title: 'Restore'
|
||
|
|
},
|
||
|
|
saveAsImage: {
|
||
|
|
show: true,
|
||
|
|
title: 'Same as image',
|
||
|
|
lang: ['Save']
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// Enable drag recalculate
|
||
|
|
calculable: true,
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'value'
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Vertical axis
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#dc143c'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Data set 1',
|
||
|
|
type: 'line',
|
||
|
|
data: [
|
||
|
|
[1.5, 10], [5, 7], [8, 8], [12, 6], [11, 12], [16, 9], [14, 6], [17, 4], [19, 9]
|
||
|
|
],
|
||
|
|
markPoint: {
|
||
|
|
data: [
|
||
|
|
|
||
|
|
// Vertical
|
||
|
|
{type: 'max', name: 'Maximum',symbol: 'emptyCircle', itemStyle: {normal: {color: '#EF5350',label: {position: 'top'}}}},
|
||
|
|
{type: 'min', name: 'Minimum',symbol: 'emptyCircle', itemStyle: {normal: {color: '#EF5350',label: {position: 'bottom'}}}},
|
||
|
|
|
||
|
|
// Horizontal
|
||
|
|
{type: 'max', name: 'Maximum', valueIndex: 0, symbol: 'emptyCircle', itemStyle: {normal: {color: '#42A5F5',label: {position: 'right'}}}},
|
||
|
|
{type: 'min', name: 'Minimum', valueIndex: 0, symbol: 'emptyCircle', itemStyle: {normal: {color: '#42A5F5',label: {position: 'left'}}}}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
markLine: {
|
||
|
|
data: [
|
||
|
|
|
||
|
|
// Vertical
|
||
|
|
{type: 'max', name: 'Maximum', itemStyle: {normal: {color: '#EF5350'}}},
|
||
|
|
{type: 'min', name: 'Minimum', itemStyle: {normal: {color: '#EF5350'}}},
|
||
|
|
{type: 'average', name: 'Average', itemStyle: {normal: {color: '#EF5350'}}},
|
||
|
|
|
||
|
|
// Horizontal
|
||
|
|
{type: 'max', name: 'Maximum', valueIndex: 0, itemStyle: {normal: {color: '#42A5F5'}}},
|
||
|
|
{type: 'min', name: 'Minimum', valueIndex: 0, itemStyle: {normal: {color: '#42A5F5'}}},
|
||
|
|
{type: 'average', name: 'Average', valueIndex: 0, itemStyle: {normal: {color: '#42A5F5'}}}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Data set 2',
|
||
|
|
type: 'line',
|
||
|
|
data: [
|
||
|
|
[1, 2], [2, 3], [4, 2], [7, 5], [11, 2], [18, 3]
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Basic area options
|
||
|
|
//
|
||
|
|
|
||
|
|
basic_area_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 40,
|
||
|
|
x2: 20,
|
||
|
|
y: 35,
|
||
|
|
y2: 25
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
legend: {
|
||
|
|
data: ['New orders', 'In progress', 'Closed deals']
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
// Enable drag recalculate
|
||
|
|
calculable: true,
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: [
|
||
|
|
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
|
||
|
|
]
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Vertical axis
|
||
|
|
yAxis: [{
|
||
|
|
type: 'value'
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Closed deals',
|
||
|
|
type: 'line',
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||
|
|
data: [10, 12, 21, 54, 260, 830, 710]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'In progress',
|
||
|
|
type: 'line',
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||
|
|
data: [30, 182, 434, 791, 390, 30, 10]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'New orders',
|
||
|
|
type: 'line',
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||
|
|
data: [1320, 1132, 601, 234, 120, 90, 20]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Stacked area options
|
||
|
|
//
|
||
|
|
|
||
|
|
stacked_area_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 40,
|
||
|
|
x2: 20,
|
||
|
|
y: 35,
|
||
|
|
y2: 25
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
legend: {
|
||
|
|
data: ['Internet Explorer', 'Safari', 'Firefox', 'Chrome']
|
||
|
|
},
|
||
|
|
|
||
|
|
// Enable drag recalculate
|
||
|
|
calculable: true,
|
||
|
|
|
||
|
|
// Add horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add vertical axis
|
||
|
|
yAxis: [{
|
||
|
|
type: 'value'
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Internet Explorer',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||
|
|
data: [120, 132, 101, 134, 490, 230, 210]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Safari',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||
|
|
data: [150, 1232, 901, 154, 190, 330, 810]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Firefox',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||
|
|
data: [320, 1332, 1801, 1334, 590, 830, 1220]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Chrome',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||
|
|
data: [820, 1632, 1901, 2234, 1290, 1330, 1320]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Reversed value axis options
|
||
|
|
//
|
||
|
|
|
||
|
|
reversed_value_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 40,
|
||
|
|
x2: 40,
|
||
|
|
y: 35,
|
||
|
|
y2: 25
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
formatter: function(params) {
|
||
|
|
return params[0].name + '<br/>'
|
||
|
|
+ params[0].seriesName + ': ' + params[0].value + ' (m^3/s)<br/>'
|
||
|
|
+ params[1].seriesName + ': ' + -params[1].value + ' (mm)';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
legend: {
|
||
|
|
data: ['Flow', 'Rainfall']
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
axisLine: {
|
||
|
|
onZero: false
|
||
|
|
},
|
||
|
|
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add vertical axis
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
name: 'Flow(m^3/s)',
|
||
|
|
type: 'value',
|
||
|
|
max: 500
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Rainfall(mm)',
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: {
|
||
|
|
formatter: function(v) {
|
||
|
|
return - v;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Flow',
|
||
|
|
type: 'line',
|
||
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||
|
|
data:[100, 200, 240, 180, 90, 200, 130]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Rainfall',
|
||
|
|
type: 'line',
|
||
|
|
yAxisIndex: 1,
|
||
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||
|
|
data: (function() {
|
||
|
|
var oriData = [
|
||
|
|
1, 2, 1.5, 7.4, 3.1, 4, 2
|
||
|
|
];
|
||
|
|
var len = oriData.length;
|
||
|
|
while(len--) {
|
||
|
|
oriData[len] *= -1;
|
||
|
|
}
|
||
|
|
return oriData;
|
||
|
|
})()
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Apply options
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
basic_lines.setOption(basic_lines_options);
|
||
|
|
stacked_lines.setOption(stacked_lines_options);
|
||
|
|
inverted_axes.setOption(inverted_axes_options);
|
||
|
|
line_point.setOption(line_point_options);
|
||
|
|
basic_area.setOption(basic_area_options);
|
||
|
|
stacked_area.setOption(stacked_area_options);
|
||
|
|
reversed_value.setOption(reversed_value_options);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Resize charts
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
window.onresize = function () {
|
||
|
|
setTimeout(function () {
|
||
|
|
basic_lines.resize();
|
||
|
|
stacked_lines.resize();
|
||
|
|
inverted_axes.resize();
|
||
|
|
line_point.resize();
|
||
|
|
basic_area.resize();
|
||
|
|
stacked_area.resize();
|
||
|
|
reversed_value.resize();
|
||
|
|
}, 200);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
});
|