dev-chiefworks
1107 lines
40 KiB
JavaScript
1107 lines
40 KiB
JavaScript
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # Echarts - funnels and chords
|
|
*
|
|
* Funnels and chords 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/funnel',
|
|
'echarts/chart/pie',
|
|
'echarts/chart/chord'
|
|
],
|
|
|
|
|
|
// Charts setup
|
|
function (ec, limitless) {
|
|
|
|
|
|
// Initialize charts
|
|
// ------------------------------
|
|
|
|
var funnel_asc = ec.init(document.getElementById('funnel_asc'), limitless);
|
|
var funnel_desc = ec.init(document.getElementById('funnel_desc'), limitless);
|
|
var funnel_left = ec.init(document.getElementById('funnel_left'), limitless);
|
|
var funnel_right = ec.init(document.getElementById('funnel_right'), limitless);
|
|
var funnel_multiple_overlay = ec.init(document.getElementById('funnel_multiple_overlay'), limitless);
|
|
var funnel_multiple_separate = ec.init(document.getElementById('funnel_multiple_separate'), limitless);
|
|
|
|
var chord_basic = ec.init(document.getElementById('chord_basic'), limitless);
|
|
var chord_sorting = ec.init(document.getElementById('chord_sorting'), limitless);
|
|
var chord_non_ribbon = ec.init(document.getElementById('chord_non_ribbon'), limitless);
|
|
var chord_scale = ec.init(document.getElementById('chord_scale'), limitless);
|
|
|
|
|
|
|
|
// Charts setup
|
|
// ------------------------------
|
|
|
|
//
|
|
// Basic funnel options
|
|
//
|
|
|
|
funnel_desc_options = {
|
|
|
|
// Add title
|
|
title: {
|
|
text: 'Browser popularity',
|
|
subtext: 'Open source information',
|
|
x: 'center'
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c}%"
|
|
},
|
|
|
|
// Display toolbox
|
|
toolbox: {
|
|
show: true,
|
|
y: 75,
|
|
orient: 'vertical',
|
|
feature: {
|
|
mark: {
|
|
show: true,
|
|
title: {
|
|
mark: 'Markline switch',
|
|
markUndo: 'Undo markline',
|
|
markClear: 'Clear markline'
|
|
}
|
|
},
|
|
dataView: {
|
|
show: true,
|
|
readOnly: false,
|
|
title: 'View data',
|
|
lang: ['View chart data', 'Close', 'Update']
|
|
},
|
|
magicType: {
|
|
show: true,
|
|
title: {
|
|
pie: 'Switch to pies',
|
|
funnel: 'Switch to funnel',
|
|
},
|
|
type: ['pie', 'funnel'],
|
|
option: {
|
|
pie: {
|
|
radius: '75%',
|
|
center: ['50%', '55%']
|
|
}
|
|
}
|
|
},
|
|
restore: {
|
|
show: true,
|
|
title: 'Restore'
|
|
},
|
|
saveAsImage: {
|
|
show: true,
|
|
title: 'Same as image',
|
|
lang: ['Save']
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
x: 'left',
|
|
y: 75,
|
|
orient: 'vertical',
|
|
data: ['Internet Explorer','Opera','Safari','Firefox','Chrome']
|
|
},
|
|
|
|
// Enable drag recalculate
|
|
calculable: true,
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
name: 'Statistics',
|
|
type: 'funnel',
|
|
x: '25%',
|
|
x2: '25%',
|
|
y: '17.5%',
|
|
height: '80%',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
position: 'left'
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{value: 60, name: 'Safari'},
|
|
{value: 40, name: 'Firefox'},
|
|
{value: 20, name: 'Chrome'},
|
|
{value: 80, name: 'Opera'},
|
|
{value: 100, name: 'Internet Explorer'}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Funnel sorting options
|
|
//
|
|
|
|
funnel_asc_options = {
|
|
|
|
// Add title
|
|
title: {
|
|
text: 'Browser popularity',
|
|
subtext: 'Open source information',
|
|
x: 'center'
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c}%"
|
|
},
|
|
|
|
// Display toolbox
|
|
toolbox: {
|
|
show: true,
|
|
orient: 'vertical',
|
|
y: 75,
|
|
feature: {
|
|
mark: {
|
|
show: true,
|
|
title: {
|
|
mark: 'Markline switch',
|
|
markUndo: 'Undo markline',
|
|
markClear: 'Clear markline'
|
|
}
|
|
},
|
|
dataView: {
|
|
show: true,
|
|
readOnly: false,
|
|
title: 'View data',
|
|
lang: ['View chart data', 'Close', 'Update']
|
|
},
|
|
magicType: {
|
|
show: true,
|
|
title: {
|
|
pie: 'Switch to pies',
|
|
funnel: 'Switch to funnel',
|
|
},
|
|
type: ['pie', 'funnel'],
|
|
option: {
|
|
pie: {
|
|
radius: '75%',
|
|
center: ['50%', '55%']
|
|
}
|
|
}
|
|
},
|
|
restore: {
|
|
show: true,
|
|
title: 'Restore'
|
|
},
|
|
saveAsImage: {
|
|
show: true,
|
|
title: 'Same as image',
|
|
lang: ['Save']
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
x: 'left',
|
|
y: 75,
|
|
orient: 'vertical',
|
|
data: ['Internet Explorer','Opera','Safari','Firefox','Chrome']
|
|
},
|
|
|
|
// Enable drag recalculate
|
|
calculable: true,
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
name: 'Statistics',
|
|
type: 'funnel',
|
|
x: '25%',
|
|
x2: '25%',
|
|
y: '17.5%',
|
|
height: '80%',
|
|
sort: 'ascending',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
position: 'left'
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{value: 60, name: 'Safari'},
|
|
{value: 40, name: 'Firefox'},
|
|
{value: 20, name: 'Chrome'},
|
|
{value: 80, name: 'Opera'},
|
|
{value: 100, name: 'Internet Explorer'}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Left funnel options
|
|
//
|
|
|
|
funnel_left_options = {
|
|
|
|
// Add title
|
|
title: {
|
|
text: 'Browser popularity',
|
|
subtext: 'Open source information',
|
|
x: 'center'
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c}%"
|
|
},
|
|
|
|
// Display toolbox
|
|
toolbox: {
|
|
show: true,
|
|
orient: 'vertical',
|
|
y: 75,
|
|
feature: {
|
|
mark: {
|
|
show: true,
|
|
title: {
|
|
mark: 'Markline switch',
|
|
markUndo: 'Undo markline',
|
|
markClear: 'Clear markline'
|
|
}
|
|
},
|
|
dataView: {
|
|
show: true,
|
|
readOnly: false,
|
|
title: 'View data',
|
|
lang: ['View chart data', 'Close', 'Update']
|
|
},
|
|
magicType: {
|
|
show: true,
|
|
title: {
|
|
pie: 'Switch to pies',
|
|
funnel: 'Switch to funnel',
|
|
},
|
|
type: ['pie', 'funnel'],
|
|
option: {
|
|
pie: {
|
|
radius: '75%',
|
|
center: ['50%', '55%']
|
|
}
|
|
}
|
|
},
|
|
restore: {
|
|
show: true,
|
|
title: 'Restore'
|
|
},
|
|
saveAsImage: {
|
|
show: true,
|
|
title: 'Same as image',
|
|
lang: ['Save']
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
orient: 'vertical',
|
|
x: 'left',
|
|
y: 75,
|
|
data: ['Internet Explorer','Opera','Safari','Firefox','Chrome']
|
|
},
|
|
|
|
// Enable drag recalculate
|
|
calculable: true,
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
name: 'Statistics',
|
|
type: 'funnel',
|
|
funnelAlign: 'left',
|
|
x: '25%',
|
|
x2: '25%',
|
|
y: '17.5%',
|
|
width: '50%',
|
|
height: '80%',
|
|
data: [
|
|
{value: 60, name: 'Safari'},
|
|
{value: 30, name: 'Firefox'},
|
|
{value: 10, name: 'Chrome'},
|
|
{value: 80, name: 'Opera'},
|
|
{value: 100, name: 'Internet Explorer'}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Right funnel options
|
|
//
|
|
|
|
funnel_right_options = {
|
|
|
|
// Add title
|
|
title: {
|
|
text: 'Browser popularity',
|
|
subtext: 'Open source information',
|
|
x: 'center'
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c}%"
|
|
},
|
|
|
|
// Display toolbox
|
|
toolbox: {
|
|
show: true,
|
|
orient: 'vertical',
|
|
y: 75,
|
|
feature: {
|
|
mark: {
|
|
show: true,
|
|
title: {
|
|
mark: 'Markline switch',
|
|
markUndo: 'Undo markline',
|
|
markClear: 'Clear markline'
|
|
}
|
|
},
|
|
dataView: {
|
|
show: true,
|
|
readOnly: false,
|
|
title: 'View data',
|
|
lang: ['View chart data', 'Close', 'Update']
|
|
},
|
|
magicType: {
|
|
show: true,
|
|
title: {
|
|
pie: 'Switch to pies',
|
|
funnel: 'Switch to funnel',
|
|
},
|
|
type: ['pie', 'funnel'],
|
|
option: {
|
|
pie: {
|
|
radius: '75%',
|
|
center: ['50%', '55%']
|
|
}
|
|
}
|
|
},
|
|
restore: {
|
|
show: true,
|
|
title: 'Restore'
|
|
},
|
|
saveAsImage: {
|
|
show: true,
|
|
title: 'Same as image',
|
|
lang: ['Save']
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
orient: 'vertical',
|
|
x: 'left',
|
|
y: 75,
|
|
data: ['Internet Explorer','Opera','Safari','Firefox','Chrome']
|
|
},
|
|
|
|
// Enable drag recalculate
|
|
calculable: true,
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
name: 'Statistics',
|
|
type: 'funnel',
|
|
funnelAlign: 'right',
|
|
x: '25%',
|
|
x2: '25%',
|
|
y: '17.5%',
|
|
width: '50%',
|
|
height: '80%',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
position: 'left'
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{value: 60, name: 'Safari'},
|
|
{value: 30, name: 'Firefox'},
|
|
{value: 10, name: 'Chrome'},
|
|
{value: 80, name: 'Opera'},
|
|
{value: 100, name: 'Internet Explorer'}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Multiple funnels (overlay) options
|
|
//
|
|
|
|
funnel_multiple_overlay_options = {
|
|
|
|
// Add colors
|
|
color: [
|
|
'rgba(255, 69, 0, 0.5)',
|
|
'rgba(255, 150, 0, 0.5)',
|
|
'rgba(255, 200, 0, 0.5)',
|
|
'rgba(155, 200, 50, 0.5)',
|
|
'rgba(55, 200, 100, 0.5)'
|
|
],
|
|
|
|
// Add title
|
|
title: {
|
|
text: 'Browser popularity',
|
|
subtext: 'Open source information',
|
|
x: 'center'
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c}%"
|
|
},
|
|
|
|
// Display toolbox
|
|
toolbox: {
|
|
show: true,
|
|
orient: 'vertical',
|
|
y: 75,
|
|
feature: {
|
|
mark: {
|
|
show: true,
|
|
title: {
|
|
mark: 'Markline switch',
|
|
markUndo: 'Undo markline',
|
|
markClear: 'Clear markline'
|
|
}
|
|
},
|
|
dataView: {
|
|
show: true,
|
|
readOnly: false,
|
|
title: 'View data',
|
|
lang: ['View chart data', 'Close', 'Update']
|
|
},
|
|
restore: {
|
|
show: true,
|
|
title: 'Restore'
|
|
},
|
|
saveAsImage: {
|
|
show: true,
|
|
title: 'Same as image',
|
|
lang: ['Save']
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
data: ['Chrome','Opera','Safari','Firefox','IE'],
|
|
orient: 'vertical',
|
|
x: 'left',
|
|
y: 75
|
|
},
|
|
|
|
// Enable drag recalculate
|
|
calculable: true,
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
name: 'Expected',
|
|
type: 'funnel',
|
|
y: '17.5%',
|
|
x: '25%',
|
|
x2: '25%',
|
|
width: '50%',
|
|
height: '80%',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
formatter: '{b}'
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
}
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
position: 'inside',
|
|
formatter: '{b}: {c}%'
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{value: 45, name: 'IE'},
|
|
{value: 60, name: 'Firefox'},
|
|
{value: 70, name: 'Safari'},
|
|
{value: 80, name: 'Opera'},
|
|
{value: 100, name: 'Chrome'}
|
|
]
|
|
},
|
|
{
|
|
name: 'Result',
|
|
type: 'funnel',
|
|
y: '17.5%',
|
|
x: '25%',
|
|
x2: '25%',
|
|
width: '50%',
|
|
height: '80%',
|
|
maxSize: '80%',
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: '#fff',
|
|
borderWidth: 2,
|
|
label: {
|
|
position: 'inside',
|
|
formatter: '{c}%',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
position: 'inside',
|
|
formatter: '{b}: {c}%'
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{value: 30, name: 'IE'},
|
|
{value: 48, name: 'Firefox'},
|
|
{value: 66, name: 'Safari'},
|
|
{value: 69, name: 'Opera'},
|
|
{value: 80, name: 'Chrome'}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Multiple funnels (separate) options
|
|
//
|
|
|
|
funnel_multiple_separate_options = {
|
|
|
|
// Add title
|
|
title: {
|
|
text: 'Browser popularity',
|
|
subtext: 'Open source information',
|
|
y: 100
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c}%"
|
|
},
|
|
|
|
// Display toolbox
|
|
toolbox: {
|
|
show: true,
|
|
orient: 'vertical',
|
|
y: 'center',
|
|
feature: {
|
|
mark: {
|
|
show: true,
|
|
title: {
|
|
mark: 'Markline switch',
|
|
markUndo: 'Undo markline',
|
|
markClear: 'Clear markline'
|
|
}
|
|
},
|
|
dataView: {
|
|
show: true,
|
|
readOnly: false,
|
|
title: 'View data',
|
|
lang: ['View chart data', 'Close', 'Update']
|
|
},
|
|
restore: {
|
|
show: true,
|
|
title: 'Restore'
|
|
},
|
|
saveAsImage: {
|
|
show: true,
|
|
title: 'Same as image',
|
|
lang: ['Save']
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
orient: 'vertical',
|
|
x: 'left',
|
|
y: '40%',
|
|
data: ['Chrome','Opera','Safari','Firefox','IE','','Android','Windows','OS X','BlackBerry','Others']
|
|
},
|
|
|
|
// Enable drag recalculate
|
|
calculable: true,
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
name: 'Browser',
|
|
type: 'funnel',
|
|
x: '35%',
|
|
width: '40%',
|
|
height: '43%',
|
|
y: '3%',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
position: 'left'
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{value: 60, name: 'Safari'},
|
|
{value: 30, name: 'Firefox'},
|
|
{value: 10, name: 'IE'},
|
|
{value: 80, name: 'Opera'},
|
|
{value: 100, name: 'Chrome'}
|
|
]
|
|
},
|
|
{
|
|
name: 'Operating system',
|
|
type: 'funnel',
|
|
x: '35%',
|
|
width: '40%',
|
|
height: '43%',
|
|
y: '55%',
|
|
sort: 'ascending',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
position: 'right'
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{value: 60, name: 'Android'},
|
|
{value: 30, name: 'Windows'},
|
|
{value: 10, name: 'OS X'},
|
|
{value: 80, name: 'BlackBerry'},
|
|
{value: 100, name: 'Others'}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Basic chord options
|
|
//
|
|
|
|
chord_basic_options = {
|
|
|
|
// Add title
|
|
title: {
|
|
text: 'Webkit dependencies',
|
|
subtext: 'Demo stuff taken from d3.js',
|
|
x: 'right'
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (params) {
|
|
if (params.indicator2) { // is edge
|
|
return params.value.weight;
|
|
} else { // is node
|
|
return params.name
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
x: 'left',
|
|
orient: 'vertical',
|
|
data: ['Group1','Group2', 'Group3', 'Group4']
|
|
},
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
type: 'chord',
|
|
data: [
|
|
{name: 'Group1'},
|
|
{name: 'Group2'},
|
|
{name: 'Group3'},
|
|
{name: 'Group4'}
|
|
],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
matrix: [
|
|
[11975, 5871, 8916, 2868],
|
|
[ 1951, 10048, 2060, 6171],
|
|
[ 8010, 16145, 8090, 8045],
|
|
[ 1013, 990, 940, 6907]
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Funnel scales options
|
|
//
|
|
|
|
chord_scale_options = {
|
|
|
|
// Add title
|
|
title: {
|
|
text: 'Webkit dependencies',
|
|
subtext: 'Demo stuff taken from d3.js',
|
|
x: 'right'
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (params) {
|
|
if (params.indicator2) { // is edge
|
|
return params.value.weight;
|
|
} else { // is node
|
|
return params.name
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
x: 'left',
|
|
orient: 'vertical',
|
|
data: ['Group1','Group2', 'Group3', 'Group4']
|
|
},
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
type: 'chord',
|
|
showScale: true,
|
|
showScaleText: true,
|
|
clockWise: true,
|
|
data: [
|
|
{name: 'Group1'},
|
|
{name: 'Group2'},
|
|
{name: 'Group3'},
|
|
{name: 'Group4'}
|
|
],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
matrix: [
|
|
[11975, 5871, 8916, 2868],
|
|
[ 1951, 10048, 2060, 6171],
|
|
[ 8010, 16145, 8090, 8045],
|
|
[ 1013, 990, 940, 6907]
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Chord sorting options
|
|
//
|
|
|
|
chord_sorting_options = {
|
|
|
|
// Add title
|
|
title: {
|
|
text: 'Fußball Bundesliga',
|
|
subtext: 'Players effectiveness',
|
|
x: 'right'
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (params) {
|
|
if (params.indicator2) { // is edge
|
|
return params.indicator2 + ': ' + params.indicator;
|
|
}
|
|
else { // is node
|
|
return params.name
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
orient: 'vertical',
|
|
x: 'left',
|
|
data: ['Arsenal', 'Bayern', 'Dortmund']
|
|
},
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
type: 'chord',
|
|
sort: 'ascending',
|
|
sortSub: 'descending',
|
|
showScale: false,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
rotate: true
|
|
}
|
|
}
|
|
},
|
|
nodes: [
|
|
{name: 'Gibbs'},
|
|
{name: 'Ozil'},
|
|
{name: 'Podolski'},
|
|
{name: 'Neuer'},
|
|
{name: 'Boateng'},
|
|
{name: 'Schweinsteiger'},
|
|
{name: 'Ram'},
|
|
{name: 'Cross'},
|
|
{name: 'Muller'},
|
|
{name: 'Goetze'},
|
|
{name: 'Hummels'},
|
|
{name: 'Reus'},
|
|
{name: 'Durm'},
|
|
{name: 'Sahin'},
|
|
{name: 'Arsenal'},
|
|
{name: 'Bayern'},
|
|
{name: 'Dortmund'}
|
|
],
|
|
links: [
|
|
{source: 'Arsenal', target: 'Gibbs', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Arsenal', target: 'Ozil', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Arsenal', target: 'Podolski', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Neuer', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Boateng', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Schweinsteiger', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Ram', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Cross', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Muller', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Goetze', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Dortmund', target: 'Hummels', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Dortmund', target: 'Reus', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Dortmund', target: 'Durm', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Dortmund', target: 'Sahin', weight: 0.9, name: 'Effectiveness'},
|
|
|
|
// Ribbon Type
|
|
{target: 'Arsenal', source: 'Gibbs', weight: 1},
|
|
{target: 'Arsenal', source: 'Ozil', weight: 1},
|
|
{target: 'Arsenal', source: 'Podolski', weight: 1},
|
|
{target: 'Bayern', source: 'Neuer', weight: 1},
|
|
{target: 'Bayern', source: 'Boateng', weight: 1},
|
|
{target: 'Bayern', source: 'Schweinsteiger', weight: 1},
|
|
{target: 'Bayern', source: 'Ram', weight: 1},
|
|
{target: 'Bayern', source: 'Cross', weight: 1},
|
|
{target: 'Bayern', source: 'Muller', weight: 1},
|
|
{target: 'Bayern', source: 'Goetze', weight: 1},
|
|
{target: 'Dortmund', source: 'Hummels', weight: 1},
|
|
{target: 'Dortmund', source: 'Reus', weight: 1},
|
|
{target: 'Dortmund', source: 'Durm', weight: 1},
|
|
{target: 'Dortmund', source: 'Sahin', weight: 1}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Non-ribbon chord options
|
|
//
|
|
|
|
chord_non_ribbon_options = {
|
|
|
|
// Add title
|
|
title: {
|
|
text: 'Fußball Bundesliga',
|
|
subtext: 'Players effectiveness',
|
|
x: 'right'
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (params) {
|
|
if (params.indicator2) { // is edge
|
|
return params.indicator2 + ': ' + params.indicator;
|
|
}
|
|
else { // is node
|
|
return params.name
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
orient: 'vertical',
|
|
x: 'left',
|
|
data: ['Arsenal', 'Bayern', 'Dortmund']
|
|
},
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
type: 'chord',
|
|
sort: 'ascending',
|
|
sortSub: 'descending',
|
|
showScale: false,
|
|
ribbonType: false,
|
|
radius: '68%',
|
|
minRadius: 7,
|
|
maxRadius: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
chordStyle: {
|
|
color: '#999'
|
|
},
|
|
label: {
|
|
rotate: true
|
|
}
|
|
}
|
|
},
|
|
nodes: [
|
|
{name: 'Gibbs'},
|
|
{name: 'Ozil'},
|
|
{name: 'Podolski'},
|
|
{name: 'Neuer'},
|
|
{name: 'Boateng'},
|
|
{name: 'Schweinsteiger'},
|
|
{name: 'Ram'},
|
|
{name: 'Cross'},
|
|
{name: 'Muller'},
|
|
{name: 'Goetze'},
|
|
{name: 'Hummels'},
|
|
{name: 'Reus'},
|
|
{name: 'Durm'},
|
|
{name: 'Sahin'},
|
|
{name: 'Arsenal'},
|
|
{name: 'Bayern'},
|
|
{name: 'Dortmund'}
|
|
],
|
|
links: [
|
|
{source: 'Arsenal', target: 'Gibbs', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Arsenal', target: 'Ozil', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Arsenal', target: 'Podolski', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Neuer', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Boateng', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Schweinsteiger', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Ram', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Cross', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Muller', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Bayern', target: 'Goetze', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Dortmund', target: 'Hummels', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Dortmund', target: 'Reus', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Dortmund', target: 'Durm', weight: 0.9, name: 'Effectiveness'},
|
|
{source: 'Dortmund', target: 'Sahin', weight: 0.9, name: 'Effectiveness'},
|
|
|
|
// Ribbon Type
|
|
{target: 'Arsenal', source: 'Gibbs', weight: 1},
|
|
{target: 'Arsenal', source: 'Ozil', weight: 1},
|
|
{target: 'Arsenal', source: 'Podolski', weight: 1},
|
|
{target: 'Bayern', source: 'Neuer', weight: 1},
|
|
{target: 'Bayern', source: 'Boateng', weight: 1},
|
|
{target: 'Bayern', source: 'Schweinsteiger', weight: 1},
|
|
{target: 'Bayern', source: 'Ram', weight: 1},
|
|
{target: 'Bayern', source: 'Cross', weight: 1},
|
|
{target: 'Bayern', source: 'Muller', weight: 1},
|
|
{target: 'Bayern', source: 'Goetze', weight: 1},
|
|
{target: 'Dortmund', source: 'Hummels', weight: 1},
|
|
{target: 'Dortmund', source: 'Reus', weight: 1},
|
|
{target: 'Dortmund', source: 'Durm', weight: 1},
|
|
{target: 'Dortmund', source: 'Sahin', weight: 1}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
|
|
// Apply options
|
|
// ------------------------------
|
|
|
|
funnel_asc.setOption(funnel_asc_options);
|
|
funnel_desc.setOption(funnel_desc_options);
|
|
funnel_left.setOption(funnel_left_options);
|
|
funnel_right.setOption(funnel_right_options);
|
|
funnel_multiple_overlay.setOption(funnel_multiple_overlay_options);
|
|
funnel_multiple_separate.setOption(funnel_multiple_separate_options);
|
|
|
|
chord_basic.setOption(chord_basic_options);
|
|
chord_sorting.setOption(chord_sorting_options);
|
|
chord_non_ribbon.setOption(chord_non_ribbon_options);
|
|
chord_scale.setOption(chord_scale_options);
|
|
|
|
|
|
|
|
// Resize charts
|
|
// ------------------------------
|
|
|
|
window.onresize = function () {
|
|
setTimeout(function (){
|
|
funnel_asc.resize();
|
|
funnel_desc.resize();
|
|
funnel_left.resize();
|
|
funnel_right.resize();
|
|
funnel_multiple_overlay.resize();
|
|
funnel_multiple_separate.resize();
|
|
chord_basic.resize();
|
|
chord_sorting.resize();
|
|
chord_non_ribbon.resize();
|
|
chord_scale.resize();
|
|
}, 200);
|
|
}
|
|
}
|
|
);
|
|
});
|