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.
1280 lines
47 KiB
1280 lines
47 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Echarts - pies and donuts |
|
* |
|
* Pies and donuts 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/pie', |
|
'echarts/chart/funnel' |
|
], |
|
|
|
|
|
// Charts setup |
|
function (ec, limitless) { |
|
|
|
|
|
// Initialize charts |
|
// ------------------------------ |
|
|
|
var basic_pie = ec.init(document.getElementById('basic_pie'), limitless); |
|
var basic_donut = ec.init(document.getElementById('basic_donut'), limitless); |
|
var nested_pie = ec.init(document.getElementById('nested_pie'), limitless); |
|
var infographic_donut = ec.init(document.getElementById('infographic_donut'), limitless); |
|
var rose_diagram_hidden = ec.init(document.getElementById('rose_diagram_hidden'), limitless); |
|
var rose_diagram_visible = ec.init(document.getElementById('rose_diagram_visible'), limitless); |
|
var lasagna_donut = ec.init(document.getElementById('lasagna_donut'), limitless); |
|
var pie_timeline = ec.init(document.getElementById('pie_timeline'), limitless); |
|
var multiple_donuts = ec.init(document.getElementById('multiple_donuts'), limitless); |
|
|
|
|
|
// Charts setup |
|
// ------------------------------ |
|
|
|
// |
|
// Basic pie options |
|
// |
|
|
|
basic_pie_options = { |
|
|
|
// Add title |
|
title: { |
|
text: 'Browser popularity', |
|
subtext: 'Open source information', |
|
x: 'center' |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: "{a} <br/>{b}: {c} ({d}%)" |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
orient: 'vertical', |
|
x: 'left', |
|
data: ['IE', 'Opera', 'Safari', 'Firefox', 'Chrome'] |
|
}, |
|
|
|
// Display toolbox |
|
toolbox: { |
|
show: true, |
|
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: { |
|
funnel: { |
|
x: '25%', |
|
y: '20%', |
|
width: '50%', |
|
height: '70%', |
|
funnelAlign: 'left', |
|
max: 1548 |
|
} |
|
} |
|
}, |
|
restore: { |
|
show: true, |
|
title: 'Restore' |
|
}, |
|
saveAsImage: { |
|
show: true, |
|
title: 'Same as image', |
|
lang: ['Save'] |
|
} |
|
} |
|
}, |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Add series |
|
series: [{ |
|
name: 'Browsers', |
|
type: 'pie', |
|
radius: '70%', |
|
center: ['50%', '57.5%'], |
|
data: [ |
|
{value: 335, name: 'IE'}, |
|
{value: 310, name: 'Opera'}, |
|
{value: 234, name: 'Safari'}, |
|
{value: 135, name: 'Firefox'}, |
|
{value: 1548, name: 'Chrome'} |
|
] |
|
}] |
|
}; |
|
|
|
|
|
// |
|
// Basic donut options |
|
// |
|
|
|
basic_donut_options = { |
|
|
|
// Add title |
|
title: { |
|
text: 'Browser popularity', |
|
subtext: 'Open source information', |
|
x: 'center' |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
orient: 'vertical', |
|
x: 'left', |
|
data: ['Internet Explorer','Opera','Safari','Firefox','Chrome'] |
|
}, |
|
|
|
// Display toolbox |
|
toolbox: { |
|
show: true, |
|
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: { |
|
funnel: { |
|
x: '25%', |
|
y: '20%', |
|
width: '50%', |
|
height: '70%', |
|
funnelAlign: 'left', |
|
max: 1548 |
|
} |
|
} |
|
}, |
|
restore: { |
|
show: true, |
|
title: 'Restore' |
|
}, |
|
saveAsImage: { |
|
show: true, |
|
title: 'Same as image', |
|
lang: ['Save'] |
|
} |
|
} |
|
}, |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Add series |
|
series: [ |
|
{ |
|
name: 'Browsers', |
|
type: 'pie', |
|
radius: ['50%', '70%'], |
|
center: ['50%', '57.5%'], |
|
itemStyle: { |
|
normal: { |
|
label: { |
|
show: true |
|
}, |
|
labelLine: { |
|
show: true |
|
} |
|
}, |
|
emphasis: { |
|
label: { |
|
show: true, |
|
formatter: '{b}' + '\n\n' + '{c} ({d}%)', |
|
position: 'center', |
|
textStyle: { |
|
fontSize: '17', |
|
fontWeight: '500' |
|
} |
|
} |
|
} |
|
}, |
|
|
|
data: [ |
|
{value: 335, name: 'Internet Explorer'}, |
|
{value: 310, name: 'Opera'}, |
|
{value: 234, name: 'Safari'}, |
|
{value: 135, name: 'Firefox'}, |
|
{value: 1548, name: 'Chrome'} |
|
] |
|
} |
|
] |
|
}; |
|
|
|
|
|
// |
|
// Nested pie charts options |
|
// |
|
|
|
nested_pie_options = { |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: "{a} <br/>{b}: {c} ({d}%)" |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
orient: 'vertical', |
|
x: 'left', |
|
data: ['Italy','Spain','Austria','Germany','Poland','Denmark','Hungary','Portugal','France','Netherlands'] |
|
}, |
|
|
|
// Display toolbox |
|
toolbox: { |
|
show: true, |
|
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'] |
|
}, |
|
restore: { |
|
show: true, |
|
title: 'Restore' |
|
}, |
|
saveAsImage: { |
|
show: true, |
|
title: 'Same as image', |
|
lang: ['Save'] |
|
} |
|
} |
|
}, |
|
|
|
// Enable drag recalculate |
|
calculable: false, |
|
|
|
// Add series |
|
series: [ |
|
|
|
// Inner |
|
{ |
|
name: 'Countries', |
|
type: 'pie', |
|
selectedMode: 'single', |
|
radius: [0, '40%'], |
|
|
|
// for funnel |
|
x: '15%', |
|
y: '7.5%', |
|
width: '40%', |
|
height: '85%', |
|
funnelAlign: 'right', |
|
max: 1548, |
|
|
|
itemStyle: { |
|
normal: { |
|
label: { |
|
position: 'inner' |
|
}, |
|
labelLine: { |
|
show: false |
|
} |
|
}, |
|
emphasis: { |
|
label: { |
|
show: true |
|
} |
|
} |
|
}, |
|
|
|
data: [ |
|
{value: 535, name: 'Italy'}, |
|
{value: 679, name: 'Spain'}, |
|
{value: 1548, name: 'Austria'} |
|
] |
|
}, |
|
|
|
// Outer |
|
{ |
|
name: 'Countries', |
|
type: 'pie', |
|
radius: ['60%', '85%'], |
|
|
|
// for funnel |
|
x: '55%', |
|
y: '7.5%', |
|
width: '35%', |
|
height: '85%', |
|
funnelAlign: 'left', |
|
max: 1048, |
|
|
|
data: [ |
|
{value: 535, name: 'Italy'}, |
|
{value: 310, name: 'Germany'}, |
|
{value: 234, name: 'Poland'}, |
|
{value: 135, name: 'Denmark'}, |
|
{value: 948, name: 'Hungary'}, |
|
{value: 251, name: 'Portugal'}, |
|
{value: 147, name: 'France'}, |
|
{value: 202, name: 'Netherlands'} |
|
] |
|
} |
|
] |
|
}; |
|
|
|
|
|
// |
|
// Infographic donut options |
|
// |
|
|
|
// Data style |
|
var dataStyle = { |
|
normal: { |
|
label: {show: false}, |
|
labelLine: {show: false} |
|
} |
|
}; |
|
|
|
// Placeholder style |
|
var placeHolderStyle = { |
|
normal: { |
|
color: 'rgba(0,0,0,0)', |
|
label: {show: false}, |
|
labelLine: {show: false} |
|
}, |
|
emphasis: { |
|
color: 'rgba(0,0,0,0)' |
|
} |
|
}; |
|
|
|
// Set options |
|
infographic_donut_options = { |
|
|
|
// Add title |
|
title: { |
|
text: 'Are you happy?', |
|
subtext: 'Utrecht, Netherlands', |
|
x: 'center', |
|
y: 'center', |
|
itemGap: 10, |
|
textStyle: { |
|
color: 'rgba(30,144,255,0.8)', |
|
fontSize: 19, |
|
fontWeight: '500' |
|
} |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
show: true, |
|
formatter: "{a} <br/>{b}: {c} ({d}%)" |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
orient: 'vertical', |
|
x: document.getElementById('infographic_donut').offsetWidth / 2, |
|
y: 30, |
|
x: '55%', |
|
itemGap: 15, |
|
data: ['60% Definitely yes','30% Could be better','10% Not at the moment'] |
|
}, |
|
|
|
// Add series |
|
series: [ |
|
{ |
|
name: '1', |
|
type: 'pie', |
|
clockWise: false, |
|
radius: ['75%', '90%'], |
|
itemStyle: dataStyle, |
|
data: [ |
|
{ |
|
value: 60, |
|
name: '60% Definitely yes' |
|
}, |
|
{ |
|
value: 40, |
|
name: 'invisible', |
|
itemStyle: placeHolderStyle |
|
} |
|
] |
|
}, |
|
|
|
{ |
|
name: '2', |
|
type:'pie', |
|
clockWise: false, |
|
radius: ['60%', '75%'], |
|
itemStyle: dataStyle, |
|
data: [ |
|
{ |
|
value: 30, |
|
name: '30% Could be better' |
|
}, |
|
{ |
|
value: 70, |
|
name: 'invisible', |
|
itemStyle: placeHolderStyle |
|
} |
|
] |
|
}, |
|
|
|
{ |
|
name: '3', |
|
type: 'pie', |
|
clockWise: false, |
|
radius: ['45%', '60%'], |
|
itemStyle: dataStyle, |
|
data: [ |
|
{ |
|
value: 10, |
|
name: '10% Not at the moment' |
|
}, |
|
{ |
|
value: 90, |
|
name: 'invisible', |
|
itemStyle: placeHolderStyle |
|
} |
|
] |
|
} |
|
] |
|
}; |
|
|
|
|
|
// |
|
// Nightingale roses with hidden labels options |
|
// |
|
|
|
rose_diagram_hidden_options = { |
|
|
|
// Add title |
|
title: { |
|
text: 'Employee\'s salary review', |
|
subtext: 'Senior front end developer', |
|
x: 'center' |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: "{a} <br/>{b}: +{c}$ ({d}%)" |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
x: 'left', |
|
y: 'top', |
|
orient: 'vertical', |
|
data: ['January','February','March','April','May','June','July','August','September','October','November','December'] |
|
}, |
|
|
|
// Display toolbox |
|
toolbox: { |
|
show: true, |
|
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'] |
|
}, |
|
restore: { |
|
show: true, |
|
title: 'Restore' |
|
}, |
|
saveAsImage: { |
|
show: true, |
|
title: 'Same as image', |
|
lang: ['Save'] |
|
} |
|
} |
|
}, |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Add series |
|
series: [ |
|
{ |
|
name: 'Increase (brutto)', |
|
type: 'pie', |
|
radius: ['15%', '73%'], |
|
center: ['50%', '57%'], |
|
roseType: 'radius', |
|
|
|
// Funnel |
|
width: '40%', |
|
height: '78%', |
|
x: '30%', |
|
y: '17.5%', |
|
max: 450, |
|
|
|
itemStyle: { |
|
normal: { |
|
label: { |
|
show: false |
|
}, |
|
labelLine: { |
|
show: false |
|
} |
|
}, |
|
emphasis: { |
|
label: { |
|
show: true |
|
}, |
|
labelLine: { |
|
show: true |
|
} |
|
} |
|
}, |
|
data: [ |
|
{value: 440, name: 'January'}, |
|
{value: 260, name: 'February'}, |
|
{value: 350, name: 'March'}, |
|
{value: 250, name: 'April'}, |
|
{value: 210, name: 'May'}, |
|
{value: 350, name: 'June'}, |
|
{value: 300, name: 'July'}, |
|
{value: 430, name: 'August'}, |
|
{value: 400, name: 'September'}, |
|
{value: 450, name: 'October'}, |
|
{value: 330, name: 'November'}, |
|
{value: 200, name: 'December'} |
|
] |
|
} |
|
] |
|
}; |
|
|
|
|
|
// |
|
// Nightingale roses with visible labels options |
|
// |
|
|
|
rose_diagram_visible_options = { |
|
|
|
// Add title |
|
title: { |
|
text: 'Employee\'s salary review', |
|
subtext: 'Senior front end developer', |
|
x: 'center' |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: "{a} <br/>{b}: +{c}$ ({d}%)" |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
x: 'left', |
|
y: 'top', |
|
orient: 'vertical', |
|
data: ['January','February','March','April','May','June','July','August','September','October','November','December'] |
|
}, |
|
|
|
// Display toolbox |
|
toolbox: { |
|
show: true, |
|
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'] |
|
}, |
|
restore: { |
|
show: true, |
|
title: 'Restore' |
|
}, |
|
saveAsImage: { |
|
show: true, |
|
title: 'Same as image', |
|
lang: ['Save'] |
|
} |
|
} |
|
}, |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Add series |
|
series: [ |
|
{ |
|
name: 'Increase (brutto)', |
|
type: 'pie', |
|
radius: ['15%', '73%'], |
|
center: ['50%', '57%'], |
|
roseType: 'area', |
|
|
|
// Funnel |
|
width: '40%', |
|
height: '78%', |
|
x: '30%', |
|
y: '17.5%', |
|
max: 450, |
|
sort: 'ascending', |
|
|
|
data: [ |
|
{value: 440, name: 'January'}, |
|
{value: 260, name: 'February'}, |
|
{value: 350, name: 'March'}, |
|
{value: 250, name: 'April'}, |
|
{value: 210, name: 'May'}, |
|
{value: 350, name: 'June'}, |
|
{value: 300, name: 'July'}, |
|
{value: 430, name: 'August'}, |
|
{value: 400, name: 'September'}, |
|
{value: 450, name: 'October'}, |
|
{value: 330, name: 'November'}, |
|
{value: 200, name: 'December'} |
|
] |
|
} |
|
] |
|
}; |
|
|
|
|
|
// |
|
// Lasagna options |
|
// |
|
|
|
lasagna_donut_options = { |
|
|
|
// Add title |
|
title: { |
|
text: 'Browser statistics', |
|
subtext: 'Based on shared research', |
|
x: 'center' |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: '{a} <br/>{b}: {c} ({d}%)' |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
x: 'left', |
|
orient: 'vertical', |
|
data: ['Chrome','Firefox','Safari','IE9+','IE8-'] |
|
}, |
|
|
|
// Enable drag recalculate |
|
calculable: false, |
|
|
|
// Add series |
|
series: (function () { |
|
var series = []; |
|
for (var i = 0; i < 30; i++) { |
|
series.push({ |
|
name: 'Browser', |
|
type: 'pie', |
|
itemStyle: { |
|
normal: { |
|
label: { |
|
show: i > 28 |
|
}, |
|
labelLine: { |
|
show: i > 28, |
|
length: 20 |
|
} |
|
} |
|
}, |
|
|
|
radius: [i * 3.6 + 40, i * 3.6 + 43], |
|
center: ['50%', '55%'], |
|
data: [ |
|
{value: i * 128 + 80, name: 'Chrome'}, |
|
{value: i * 64 + 160, name: 'Firefox'}, |
|
{value: i * 32 + 320, name: 'Safari'}, |
|
{value: i * 16 + 640, name: 'IE9+'}, |
|
{value: i * 8 + 1280, name: 'IE8-'} |
|
] |
|
}) |
|
} |
|
return series; |
|
})() |
|
}; |
|
|
|
|
|
// |
|
// Pie timeline options |
|
// |
|
|
|
var idx = 1; |
|
pie_timeline_options = { |
|
|
|
// Add timeline |
|
timeline: { |
|
x: 10, |
|
x2: 10, |
|
data: [ |
|
'2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', |
|
{ name:'2014-06-01', symbol: 'emptyStar2', symbolSize: 8 }, |
|
'2014-07-01', '2014-08-01', '2014-09-01', '2014-10-01', '2014-11-01', |
|
{ name:'2014-12-01', symbol: 'star2', symbolSize: 8 } |
|
], |
|
label: { |
|
formatter: function(s) { |
|
return s.slice(0, 7); |
|
} |
|
}, |
|
autoPlay: true, |
|
playInterval: 3000 |
|
}, |
|
|
|
// Set options |
|
options: [ |
|
{ |
|
|
|
// Add title |
|
title: { |
|
text: 'Browser statistics', |
|
subtext: 'Based on shared research', |
|
x: 'center' |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: "{a} <br/>{b}: {c} ({d}%)" |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
x: 'left', |
|
orient: 'vertical', |
|
data: ['Chrome','Firefox','Safari','IE9+','IE8-'] |
|
}, |
|
|
|
// Display toolbox |
|
toolbox: { |
|
show: true, |
|
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: { |
|
funnel: { |
|
x: '25%', |
|
width: '50%', |
|
funnelAlign: 'left', |
|
max: 1700 |
|
} |
|
} |
|
}, |
|
restore: { |
|
show: true, |
|
title: 'Restore' |
|
}, |
|
saveAsImage: { |
|
show: true, |
|
title: 'Same as image', |
|
lang: ['Save'] |
|
} |
|
} |
|
}, |
|
|
|
// Add series |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
center: ['50%', '50%'], |
|
radius: '60%', |
|
data: [ |
|
{value: idx * 128 + 80, name: 'Chrome'}, |
|
{value: idx * 64 + 160, name: 'Firefox'}, |
|
{value: idx * 32 + 320, name: 'Safari'}, |
|
{value: idx * 16 + 640, name: 'IE9+'}, |
|
{value: idx++ * 8 + 1280, name: 'IE8-'} |
|
] |
|
}] |
|
}, |
|
|
|
{ |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
data: [ |
|
{value: idx * 128 + 80, name:'Chrome'}, |
|
{value: idx * 64 + 160, name:'Firefox'}, |
|
{value: idx * 32 + 320, name:'Safari'}, |
|
{value: idx * 16 + 640, name:'IE9+'}, |
|
{value: idx++ * 8 + 1280, name:'IE8-'} |
|
] |
|
}] |
|
}, |
|
{ |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
data: [ |
|
{value: idx * 128 + 80, name:'Chrome'}, |
|
{value: idx * 64 + 160, name:'Firefox'}, |
|
{value: idx * 32 + 320, name:'Safari'}, |
|
{value: idx * 16 + 640, name:'IE9+'}, |
|
{value: idx++ * 8 + 1280, name:'IE8-'} |
|
] |
|
}] |
|
}, |
|
{ |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
data: [ |
|
{value: idx * 128 + 80, name:'Chrome'}, |
|
{value: idx * 64 + 160, name:'Firefox'}, |
|
{value: idx * 32 + 320, name:'Safari'}, |
|
{value: idx * 16 + 640, name:'IE9+'}, |
|
{value: idx++ * 8 + 1280, name:'IE8-'} |
|
] |
|
}] |
|
}, |
|
{ |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
data: [ |
|
{value: idx * 128 + 80, name:'Chrome'}, |
|
{value: idx * 64 + 160, name:'Firefox'}, |
|
{value: idx * 32 + 320, name:'Safari'}, |
|
{value: idx * 16 + 640, name:'IE9+'}, |
|
{value: idx++ * 8 + 1280, name:'IE8-'} |
|
] |
|
}] |
|
}, |
|
{ |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
data: [ |
|
{value: idx * 128 + 80, name:'Chrome'}, |
|
{value: idx * 64 + 160, name:'Firefox'}, |
|
{value: idx * 32 + 320, name:'Safari'}, |
|
{value: idx * 16 + 640, name:'IE9+'}, |
|
{value: idx++ * 8 + 1280, name:'IE8-'} |
|
] |
|
}] |
|
}, |
|
{ |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
data: [ |
|
{value: idx * 128 + 80, name:'Chrome'}, |
|
{value: idx * 64 + 160, name:'Firefox'}, |
|
{value: idx * 32 + 320, name:'Safari'}, |
|
{value: idx * 16 + 640, name:'IE9+'}, |
|
{value: idx++ * 8 + 1280, name:'IE8-'} |
|
] |
|
}] |
|
}, |
|
{ |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
data: [ |
|
{value: idx * 128 + 80, name:'Chrome'}, |
|
{value: idx * 64 + 160, name:'Firefox'}, |
|
{value: idx * 32 + 320, name:'Safari'}, |
|
{value: idx * 16 + 640, name:'IE9+'}, |
|
{value: idx++ * 8 + 1280, name:'IE8-'} |
|
] |
|
}] |
|
}, |
|
{ |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
data: [ |
|
{value: idx * 128 + 80, name:'Chrome'}, |
|
{value: idx * 64 + 160, name:'Firefox'}, |
|
{value: idx * 32 + 320, name:'Safari'}, |
|
{value: idx * 16 + 640, name:'IE9+'}, |
|
{value: idx++ * 8 + 1280, name:'IE8-'} |
|
] |
|
}] |
|
}, |
|
{ |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
data: [ |
|
{value: idx * 128 + 80, name:'Chrome'}, |
|
{value: idx * 64 + 160, name:'Firefox'}, |
|
{value: idx * 32 + 320, name:'Safari'}, |
|
{value: idx * 16 + 640, name:'IE9+'}, |
|
{value: idx++ * 8 + 1280, name:'IE8-'} |
|
] |
|
}] |
|
}, |
|
{ |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
data: [ |
|
{value: idx * 128 + 80, name:'Chrome'}, |
|
{value: idx * 64 + 160, name:'Firefox'}, |
|
{value: idx * 32 + 320, name:'Safari'}, |
|
{value: idx * 16 + 640, name:'IE9+'}, |
|
{value: idx++ * 8 + 1280, name:'IE8-'} |
|
] |
|
}] |
|
}, |
|
{ |
|
series: [{ |
|
name: 'Browser', |
|
type: 'pie', |
|
data: [ |
|
{value: idx * 128 + 80, name:'Chrome'}, |
|
{value: idx * 64 + 160, name:'Firefox'}, |
|
{value: idx * 32 + 320, name:'Safari'}, |
|
{value: idx * 16 + 640, name:'IE9+'}, |
|
{value: idx++ * 8 + 1280, name:'IE8-'} |
|
] |
|
}] |
|
} |
|
] |
|
}; |
|
|
|
|
|
// |
|
// Multiple donuts options |
|
// |
|
|
|
// Top text label |
|
var labelTop = { |
|
normal: { |
|
label: { |
|
show: true, |
|
position: 'center', |
|
formatter: '{b}\n', |
|
textStyle: { |
|
baseline: 'middle', |
|
fontWeight: 300, |
|
fontSize: 15 |
|
} |
|
}, |
|
labelLine: { |
|
show: false |
|
} |
|
} |
|
}; |
|
|
|
// Format bottom label |
|
var labelFromatter = { |
|
normal: { |
|
label: { |
|
formatter: function (params) { |
|
return '\n\n' + (100 - params.value) + '%' |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Bottom text label |
|
var labelBottom = { |
|
normal: { |
|
color: '#eee', |
|
label: { |
|
show: true, |
|
position: 'center', |
|
textStyle: { |
|
baseline: 'middle' |
|
} |
|
}, |
|
labelLine: { |
|
show: false |
|
} |
|
}, |
|
emphasis: { |
|
color: 'rgba(0,0,0,0)' |
|
} |
|
}; |
|
|
|
// Set inner and outer radius |
|
var radius = [60, 75]; |
|
|
|
// Add options |
|
multiple_donuts_options = { |
|
|
|
// Add title |
|
title: { |
|
text: 'The Application World', |
|
subtext: 'from global web index', |
|
x: 'center' |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
x: 'center', |
|
y: '56%', |
|
data: ['GoogleMaps', 'Facebook', 'Youtube', 'Google+', 'Weixin', 'Twitter', 'Skype', 'Messenger', 'Whatsapp', 'Instagram'] |
|
}, |
|
|
|
// Add series |
|
series: [ |
|
{ |
|
type: 'pie', |
|
center: ['10%', '32.5%'], |
|
radius: radius, |
|
itemStyle: labelFromatter, |
|
data: [ |
|
{name: 'other', value: 46, itemStyle: labelBottom}, |
|
{name: 'GoogleMaps', value: 54,itemStyle: labelTop} |
|
] |
|
}, |
|
{ |
|
type: 'pie', |
|
center: ['30%', '32.5%'], |
|
radius: radius, |
|
itemStyle: labelFromatter, |
|
data: [ |
|
{name: 'other', value: 56, itemStyle: labelBottom}, |
|
{name: 'Facebook', value: 44,itemStyle: labelTop} |
|
] |
|
}, |
|
{ |
|
type: 'pie', |
|
center: ['50%', '32.5%'], |
|
radius: radius, |
|
itemStyle: labelFromatter, |
|
data: [ |
|
{name: 'other', value: 65, itemStyle: labelBottom}, |
|
{name: 'Youtube', value: 35,itemStyle: labelTop} |
|
] |
|
}, |
|
{ |
|
type: 'pie', |
|
center: ['70%', '32.5%'], |
|
radius: radius, |
|
itemStyle: labelFromatter, |
|
data: [ |
|
{name: 'other', value: 70, itemStyle: labelBottom}, |
|
{name: 'Google+', value: 30,itemStyle: labelTop} |
|
] |
|
}, |
|
{ |
|
type: 'pie', |
|
center: ['90%', '32.5%'], |
|
radius: radius, |
|
itemStyle: labelFromatter, |
|
data: [ |
|
{name:'other', value:73, itemStyle: labelBottom}, |
|
{name:'Weixin', value:27,itemStyle: labelTop} |
|
] |
|
}, |
|
{ |
|
type: 'pie', |
|
center: ['10%', '82.5%'], |
|
radius: radius, |
|
itemStyle: labelFromatter, |
|
data: [ |
|
{name: 'other', value: 78, itemStyle: labelBottom}, |
|
{name: 'Twitter', value: 22,itemStyle: labelTop} |
|
] |
|
}, |
|
{ |
|
type: 'pie', |
|
center: ['30%', '82.5%'], |
|
radius: radius, |
|
itemStyle: labelFromatter, |
|
data: [ |
|
{name: 'other', value: 78, itemStyle: labelBottom}, |
|
{name: 'Skype', value: 22,itemStyle: labelTop} |
|
] |
|
}, |
|
{ |
|
type: 'pie', |
|
center: ['50%', '82.5%'], |
|
radius: radius, |
|
itemStyle: labelFromatter, |
|
data: [ |
|
{name: 'other', value: 78, itemStyle: labelBottom}, |
|
{name: 'Messenger', value: 22,itemStyle: labelTop} |
|
] |
|
}, |
|
{ |
|
type: 'pie', |
|
center: ['70%', '82.5%'], |
|
radius: radius, |
|
itemStyle: labelFromatter, |
|
data: [ |
|
{name: 'other', value: 83, itemStyle: labelBottom}, |
|
{name: 'Whatsapp', value: 17,itemStyle: labelTop} |
|
] |
|
}, |
|
{ |
|
type: 'pie', |
|
center: ['90%', '82.5%'], |
|
radius: radius, |
|
itemStyle: labelFromatter, |
|
data: [ |
|
{name:'other', value:89, itemStyle: labelBottom}, |
|
{name:'Instagram', value:11,itemStyle: labelTop} |
|
] |
|
} |
|
] |
|
}; |
|
|
|
|
|
|
|
// Apply options |
|
// ------------------------------ |
|
|
|
basic_pie.setOption(basic_pie_options); |
|
basic_donut.setOption(basic_donut_options); |
|
nested_pie.setOption(nested_pie_options); |
|
infographic_donut.setOption(infographic_donut_options); |
|
rose_diagram_hidden.setOption(rose_diagram_hidden_options); |
|
rose_diagram_visible.setOption(rose_diagram_visible_options); |
|
lasagna_donut.setOption(lasagna_donut_options); |
|
pie_timeline.setOption(pie_timeline_options); |
|
multiple_donuts.setOption(multiple_donuts_options); |
|
|
|
|
|
|
|
// Resize charts |
|
// ------------------------------ |
|
|
|
window.onresize = function () { |
|
setTimeout(function (){ |
|
basic_pie.resize(); |
|
basic_donut.resize(); |
|
nested_pie.resize(); |
|
infographic_donut.resize(); |
|
rose_diagram_hidden.resize(); |
|
rose_diagram_visible.resize(); |
|
lasagna_donut.resize(); |
|
pie_timeline.resize(); |
|
multiple_donuts.resize(); |
|
}, 200); |
|
} |
|
} |
|
); |
|
});
|
|
|