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.
967 lines
32 KiB
967 lines
32 KiB
3 years ago
|
/* ------------------------------------------------------------------------------
|
||
|
|
*
|
||
|
|
* # Echarts - bars and tornados
|
||
|
|
*
|
||
|
|
* Bars and tornados 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_bars = ec.init(document.getElementById('basic_bars'), limitless);
|
||
|
|
var stacked_bars = ec.init(document.getElementById('stacked_bars'), limitless);
|
||
|
|
var stacked_clustered_bars = ec.init(document.getElementById('stacked_clustered_bars'), limitless);
|
||
|
|
var floating_bars = ec.init(document.getElementById('floating_bars'), limitless);
|
||
|
|
var irregular_bars = ec.init(document.getElementById('irregular_bars'), limitless);
|
||
|
|
var tornado_bars_negative = ec.init(document.getElementById('tornado_bars_negative'), limitless);
|
||
|
|
var tornado_bars_staggered = ec.init(document.getElementById('tornado_bars_staggered'), limitless);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Charts setup
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
//
|
||
|
|
// Basic bars options
|
||
|
|
//
|
||
|
|
|
||
|
|
basic_bars_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 75,
|
||
|
|
x2: 35,
|
||
|
|
y: 35,
|
||
|
|
y2: 25
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
legend: {
|
||
|
|
data: ['Year 2013', 'Year 2014']
|
||
|
|
},
|
||
|
|
|
||
|
|
// Enable drag recalculate
|
||
|
|
calculable: true,
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'value',
|
||
|
|
boundaryGap: [0, 0.01]
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Vertical axis
|
||
|
|
yAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
data: ['Germany','France','Spain','Netherlands','Belgium']
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Year 2013',
|
||
|
|
type: 'bar',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#EF5350'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [38203, 73489, 129034, 204970, 331744]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Year 2014',
|
||
|
|
type: 'bar',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#66BB6A'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [39325, 83438, 131000, 221594, 334141]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Stacked bars options
|
||
|
|
//
|
||
|
|
|
||
|
|
stacked_bars_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 75,
|
||
|
|
x2: 25,
|
||
|
|
y: 35,
|
||
|
|
y2: 25
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
legend: {
|
||
|
|
data:['Internet Explorer','Opera','Safari','Firefox','Chrome']
|
||
|
|
},
|
||
|
|
|
||
|
|
// Enable drag recalculate
|
||
|
|
calculable: true,
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'value'
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Vertical axis
|
||
|
|
yAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Internet Explorer',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#42A5F5',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'insideRight'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: '#42A5F5',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data:[320, 302, 301, 334, 390, 330, 320]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Opera',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#ef5350',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'insideRight'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: '#ef5350',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data:[120, 132, 101, 134, 90, 230, 210]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Safari',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#66bb6a',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'insideRight'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: '#66bb6a',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data:[220, 182, 191, 234, 290, 330, 310]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Firefox',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#ff7043',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'insideRight'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: '#ff7043',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data:[150, 212, 201, 154, 190, 330, 410]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Chrome',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#26a69a',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'insideRight'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: '#26a69a',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data:[820, 832, 901, 934, 1290, 1330, 1320]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Stacked clustered bars options
|
||
|
|
//
|
||
|
|
|
||
|
|
stacked_clustered_bars_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 45,
|
||
|
|
x2: 45,
|
||
|
|
y: 65,
|
||
|
|
y2: 25
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legends
|
||
|
|
legend: {
|
||
|
|
data: [
|
||
|
|
'Version 1.7 - 2k data','Version 1.7 - 2w data','Version 1.7 - 20w data','',
|
||
|
|
'Version 2.0 - 2k data','Version 2.0 - 2w data','Version 2.0 - 20w data'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
|
||
|
|
// Enable drag recalculate
|
||
|
|
calculable: true,
|
||
|
|
|
||
|
|
// Vertical axis
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
data: ['Line','Bar','Scatter','Pies']
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
axisLine: {show: false},
|
||
|
|
axisTick: {show: false},
|
||
|
|
axisLabel: {show: false},
|
||
|
|
splitArea: {show: false},
|
||
|
|
splitLine: {show: false},
|
||
|
|
data: ['Line','Bar','Scatter','Pies']
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: {formatter: '{value} ms'}
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Version 2.0 - 2k data',
|
||
|
|
type: 'bar',
|
||
|
|
yAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#F44336',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
textStyle:{
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: '#F44336',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [247, 187, 95, 175]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Version 2.0 - 2w data',
|
||
|
|
type: 'bar',
|
||
|
|
yAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#4CAF50',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: '#4CAF50',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [488, 415, 405, 340]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Version 2.0 - 20w data',
|
||
|
|
type: 'bar',
|
||
|
|
yAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#2196F3',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: '#2196F3',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [906, 911, 908, 778]
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
name: 'Version 1.7 - 2k data',
|
||
|
|
type: 'bar',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#E57373',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: '#E57373',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [680, 819, 564, 724]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Version 1.7 - 2w data',
|
||
|
|
type: 'bar',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#81C784',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: '#81C784',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [1212, 2035, 1620, 955]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Version 1.7 - 20w data',
|
||
|
|
type: 'bar',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#64B5F6',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
formatter: function(p) {return p.value > 0 ? (p.value +'+'):'';}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: '#64B5F6',
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [2200, 3000, 2500, 3000]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Floating bars options
|
||
|
|
//
|
||
|
|
|
||
|
|
var placeHoledStyle = {
|
||
|
|
normal: {
|
||
|
|
barBorderColor: 'rgba(0,0,0,0)',
|
||
|
|
color: 'rgba(0,0,0,0)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
barBorderColor: 'rgba(0,0,0,0)',
|
||
|
|
color: 'rgba(0,0,0,0)'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var dataStyle = {
|
||
|
|
normal: {
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'insideLeft',
|
||
|
|
formatter: '{c}%'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
floating_bars_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 75,
|
||
|
|
x2: 10,
|
||
|
|
y: 35,
|
||
|
|
y2: 10
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
},
|
||
|
|
formatter: '{b}<br/>{a0}: {c0}%<br/>{a2}: {c2}%<br/>{a4}: {c4}%<br/>{a6}: {c6}%'
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
legend: {
|
||
|
|
itemGap: document.getElementById('floating_bars').offsetWidth / 8,
|
||
|
|
data: ['GML', 'PYP','WTC', 'ZTW']
|
||
|
|
},
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'value',
|
||
|
|
position: 'top',
|
||
|
|
splitLine: {show: false},
|
||
|
|
axisLabel: {show: false}
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Vertical axis
|
||
|
|
yAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
data: ['Paris', 'Berlin', 'Amsterdam', 'Madrid']
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'GML',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: dataStyle,
|
||
|
|
data: [38, 50, 33, 72]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'GML',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: placeHoledStyle,
|
||
|
|
data: [62, 50, 67, 28]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'PYP',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: dataStyle,
|
||
|
|
data: [61, 41, 42, 30]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'PYP',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: placeHoledStyle,
|
||
|
|
data: [39, 59, 58, 70]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'WTC',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: dataStyle,
|
||
|
|
data: [37, 35, 44, 60]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'WTC',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: placeHoledStyle,
|
||
|
|
data: [63, 65, 56, 40]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'ZTW',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: dataStyle,
|
||
|
|
data: [71, 50, 31, 39]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'ZTW',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: placeHoledStyle,
|
||
|
|
data: [29, 50, 69, 61]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Irregular bars options
|
||
|
|
//
|
||
|
|
|
||
|
|
irregular_bars_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 25,
|
||
|
|
x2: 70,
|
||
|
|
y: 35,
|
||
|
|
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: {
|
||
|
|
data: ['Data set 1','Data set 2']
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add toolbox
|
||
|
|
toolbox: {
|
||
|
|
show: true,
|
||
|
|
x: 'right',
|
||
|
|
y: 'center',
|
||
|
|
orient: 'vertical',
|
||
|
|
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'
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Data set 1',
|
||
|
|
type: 'bar',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#29B6F6'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
[1.5, 10], [5, 7], [8, 8], [12, 6], [11, 12], [16, 9], [14, 6], [17, 4], [19, 9]
|
||
|
|
],
|
||
|
|
markPoint: {
|
||
|
|
data: [
|
||
|
|
|
||
|
|
// Default vertical axis
|
||
|
|
{type: 'max', name: 'Maximum', symbol: 'emptyCircle', itemStyle: {normal: {color: '#FF7043',label: {position: 'top'}}}},
|
||
|
|
{type: 'min', name: 'Minimum', symbol: 'emptyCircle', itemStyle: {normal: {color: '#FF7043',label: {position: 'top'}}}},
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
{type: 'max', name: 'Maximum', valueIndex: 0, symbol: 'emptyCircle', itemStyle: {normal: {color: '#29B6F6',label: {position: 'right'}}}},
|
||
|
|
{type: 'min', name: 'Minimum', valueIndex: 0, symbol: 'emptyCircle', itemStyle: {normal: {color: '#29B6F6',label: {position: 'left'}}}}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
markLine: {
|
||
|
|
data: [
|
||
|
|
|
||
|
|
// Default vertical axis
|
||
|
|
{type: 'max', name: 'Maximum', itemStyle: {normal: {color: '#FF7043'}}},
|
||
|
|
{type: 'min', name: 'Minimum', itemStyle: {normal: {color: '#FF7043'}}},
|
||
|
|
{type: 'average', name: 'Average', itemStyle: {normal: {color: '#FF7043'}}},
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
{type: 'max', name: 'Maximum', valueIndex: 0, itemStyle: {normal: {color: '#29B6F6'}}},
|
||
|
|
{type: 'min', name: 'Minimum', valueIndex: 0, itemStyle: {normal: {color: '#29B6F6'}}},
|
||
|
|
{type: 'average', name: 'Average', valueIndex: 0, itemStyle: {normal: {color: '#29B6F6'}}}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Data set 2',
|
||
|
|
type: 'bar',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#FF7043'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
barHeight: 10,
|
||
|
|
data: [
|
||
|
|
[1, 2], [2, 3], [4, 4], [7, 5], [11, 11], [18, 15]
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Tornado with negative stacks options
|
||
|
|
//
|
||
|
|
|
||
|
|
tornado_bars_negative_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 75,
|
||
|
|
x2: 25,
|
||
|
|
y: 35,
|
||
|
|
y2: 25
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
legend: {
|
||
|
|
data: ['Profit', 'Expenses', 'Income']
|
||
|
|
},
|
||
|
|
|
||
|
|
// Enable drag recalculate
|
||
|
|
calculable: true,
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'value'
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Vertical axis
|
||
|
|
yAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Profit',
|
||
|
|
type: 'bar',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'inside'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [200, 170, 240, 244, 200, 220, 210]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Income',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
barWidth: 5,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [320, 302, 341, 374, 390, 450, 420]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Expenses',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'left'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [-120, -132, -101, -134, -190, -230, -210]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Tornado with staggered labels options
|
||
|
|
//
|
||
|
|
|
||
|
|
var labelRight = {
|
||
|
|
normal: {
|
||
|
|
color: '#FF7043',
|
||
|
|
label: {
|
||
|
|
position: 'right'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
tornado_bars_staggered_options = {
|
||
|
|
|
||
|
|
// Setup grid
|
||
|
|
grid: {
|
||
|
|
x: 25,
|
||
|
|
x2: 25,
|
||
|
|
y: 25,
|
||
|
|
y2: 10
|
||
|
|
},
|
||
|
|
|
||
|
|
// Add tooltip
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
},
|
||
|
|
formatter: function(params) {
|
||
|
|
return params[0].seriesName + ': ' + params[0].value + ' €';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// Horizontal axis
|
||
|
|
xAxis: [{
|
||
|
|
type: 'value',
|
||
|
|
position: 'top',
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Vertical axis
|
||
|
|
yAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
axisLine: {show: false},
|
||
|
|
axisLabel: {show: false},
|
||
|
|
axisTick: {show: false},
|
||
|
|
splitLine: {show: false},
|
||
|
|
data: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
|
||
|
|
}],
|
||
|
|
|
||
|
|
// Add series
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Cost of living',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#66BB6A',
|
||
|
|
barBorderRadius: 3,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'left',
|
||
|
|
formatter: '{b}'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
barBorderRadius: 3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{value: -680, itemStyle: labelRight},
|
||
|
|
{value: -300, itemStyle: labelRight},
|
||
|
|
690,
|
||
|
|
900,
|
||
|
|
{value: -390, itemStyle: labelRight},
|
||
|
|
600,
|
||
|
|
{value: -120, itemStyle: labelRight},
|
||
|
|
700,
|
||
|
|
{value: -120, itemStyle: labelRight},
|
||
|
|
900,
|
||
|
|
580,
|
||
|
|
{value: -720, itemStyle: labelRight}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Apply options
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
basic_bars.setOption(basic_bars_options);
|
||
|
|
stacked_bars.setOption(stacked_bars_options);
|
||
|
|
stacked_clustered_bars.setOption(stacked_clustered_bars_options);
|
||
|
|
floating_bars.setOption(floating_bars_options);
|
||
|
|
irregular_bars.setOption(irregular_bars_options);
|
||
|
|
tornado_bars_negative.setOption(tornado_bars_negative_options);
|
||
|
|
tornado_bars_staggered.setOption(tornado_bars_staggered_options);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Resize charts
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
window.onresize = function () {
|
||
|
|
setTimeout(function (){
|
||
|
|
basic_bars.resize();
|
||
|
|
stacked_bars.resize();
|
||
|
|
stacked_clustered_bars.resize();
|
||
|
|
floating_bars.resize();
|
||
|
|
irregular_bars.resize();
|
||
|
|
tornado_bars_negative.resize();
|
||
|
|
tornado_bars_staggered.resize();
|
||
|
|
}, 200);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
});
|