dev-chiefworks
1281 lines
47 KiB
JavaScript
1281 lines
47 KiB
JavaScript
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # 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);
|
|
}
|
|
}
|
|
);
|
|
});
|