/* ------------------------------------------------------------------------------
*
* # Echarts - Pie and Donut charts
*
* Demo JS code for echarts_pies_donuts.html page
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var EchartsPiesDonuts = function() {
//
// Setup module components
//
// Pie and donut charts
var _piesDonutsExamples = function() {
if (typeof echarts == 'undefined') {
console.warn('Warning - echarts.min.js is not loaded.');
return;
}
// Define elements
var pie_basic_element = document.getElementById('pie_basic');
var pie_donut_element = document.getElementById('pie_donut');
var pie_nested_element = document.getElementById('pie_nested');
var pie_infographic_element = document.getElementById('pie_infographic');
var pie_rose_element = document.getElementById('pie_rose');
var pie_rose_labels_element = document.getElementById('pie_rose_labels');
var pie_levels_element = document.getElementById('pie_levels');
var pie_timeline_element = document.getElementById('pie_timeline');
var pie_multiples_element = document.getElementById('pie_multiples');
//
// Charts configuration
//
// Basic pie chart
if (pie_basic_element) {
// Initialize chart
var pie_basic = echarts.init(pie_basic_element);
//
// Chart config
//
// Options
pie_basic.setOption({
// Colors
color: [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Add title
title: {
text: 'Browser popularity',
subtext: 'Open source information',
left: 'center',
textStyle: {
fontSize: 17,
fontWeight: 500
},
subtextStyle: {
fontSize: 12
}
},
// Add tooltip
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
formatter: "{a}
{b}: {c} ({d}%)"
},
// Add legend
legend: {
orient: 'vertical',
top: 'center',
left: 0,
data: ['IE', 'Opera', 'Safari', 'Firefox', 'Chrome'],
itemHeight: 8,
itemWidth: 8
},
// Add series
series: [{
name: 'Browsers',
type: 'pie',
radius: '70%',
center: ['50%', '57.5%'],
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#fff'
}
},
data: [
{value: 335, name: 'IE'},
{value: 310, name: 'Opera'},
{value: 234, name: 'Safari'},
{value: 135, name: 'Firefox'},
{value: 1548, name: 'Chrome'}
]
}]
});
}
// Basic donut chart
if (pie_donut_element) {
// Initialize chart
var pie_donut = echarts.init(pie_donut_element);
//
// Chart config
//
// Options
pie_donut.setOption({
// Colors
color: [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Add title
title: {
text: 'Browser popularity',
subtext: 'Open source information',
left: 'center',
textStyle: {
fontSize: 17,
fontWeight: 500
},
subtextStyle: {
fontSize: 12
}
},
// Add tooltip
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
formatter: "{a}
{b}: {c} ({d}%)"
},
// Add legend
legend: {
orient: 'vertical',
top: 'center',
left: 0,
data: ['IE', 'Opera', 'Safari', 'Firefox', 'Chrome'],
itemHeight: 8,
itemWidth: 8
},
// Add series
series: [{
name: 'Browsers',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '57.5%'],
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#fff'
}
},
data: [
{value: 335, name: 'IE'},
{value: 310, name: 'Opera'},
{value: 234, name: 'Safari'},
{value: 135, name: 'Firefox'},
{value: 1548, name: 'Chrome'}
]
}]
});
}
// Nested
if (pie_nested_element) {
// Initialize chart
var pie_nested = echarts.init(pie_nested_element);
//
// Chart config
//
// Options
pie_nested.setOption({
// Colors
color: [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Add tooltip
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
formatter: '{a}
{b}: {c} ({d}%)'
},
// Add legend
legend: {
orient: 'vertical',
top: 'center',
left: 0,
data: ['Italy','Spain','Austria','Germany','Poland','Denmark','Hungary','Portugal','France','Netherlands'],
itemHeight: 8,
itemWidth: 8
},
// Add series
series: [
// Inner
{
name: 'Countries',
type: 'pie',
selectedMode: 'single',
radius: [0, '50%'],
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#fff',
label: {
position: 'inner'
},
labelLine: {
show: false
}
}
},
data: [
{value: 535, name: 'Italy'},
{value: 679, name: 'Spain'},
{value: 1548, name: 'Austria'}
]
},
// Outer
{
name: 'Countries',
type: 'pie',
radius: ['60%', '85%'],
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#fff'
}
},
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 style
if (pie_infographic_element) {
// Initialize chart
var pie_infographic = echarts.init(pie_infographic_element);
//
// Chart config
//
// Common styles
var dataStyle = {
normal: {
borderWidth: 1,
borderColor: '#fff',
label: {show: false},
labelLine: {show: false}
}
};
var placeHolderStyle = {
normal: {
color: 'transparent',
borderWidth: 0
}
};
// Options
pie_infographic.setOption({
// Colors
color: [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Add title
title: {
text: 'Are you happy?',
subtext: 'Utrecht, Netherlands',
left: 'center',
top: '45%',
textStyle: {
color: 'rgba(30,144,255,0.8)',
fontSize: 19,
fontWeight: 500
},
subtextStyle: {
fontSize: 12
}
},
// Add tooltip
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
formatter: function (params) {
if(params.color == "transparent")return;
return params.percent + '%' + ' - ' + params.seriesName;
}
},
// Add legend
legend: {
orient: 'vertical',
top: '5%',
left: (pie_infographic_element.offsetWidth / 2) + 20,
data: ['60% Definitely yes','30% Could be better','10% Not at the moment'],
itemHeight: 8,
itemWidth: 8,
itemGap: 15
},
// Add series
series: [
{
name: 'Definitely yes',
type: 'pie',
cursor: 'default',
clockWise: false,
radius: ['75%', '90%'],
hoverOffset: 0,
itemStyle: dataStyle,
data: [
{
value: 60,
name: '60% Definitely yes'
},
{
value: 40,
name: '',
itemStyle: placeHolderStyle
}
]
},
{
name: 'Could be better',
type:'pie',
cursor: 'default',
clockWise: false,
radius: ['60%', '75%'],
hoverOffset: 0,
itemStyle: dataStyle,
data: [
{
value: 30,
name: '30% Could be better'
},
{
value: 70,
name: 'invisible',
silent: false,
itemStyle: placeHolderStyle
}
]
},
{
name: 'Not at the moment',
type: 'pie',
cursor: 'default',
clockWise: false,
radius: ['45%', '60%'],
hoverOffset: 0,
itemStyle: dataStyle,
data: [
{
value: 10,
name: '10% Not at the moment'
},
{
value: 90,
name: 'invisible',
itemStyle: placeHolderStyle
}
]
}
]
});
}
// Rose without labels
if (pie_rose_element) {
// Initialize chart
var pie_rose = echarts.init(pie_rose_element);
//
// Chart config
//
// Options
pie_rose.setOption({
// Colors
color: [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Add title
title: {
text: 'Employee\'s salary review',
subtext: 'Senior front end developer',
left: 'center',
textStyle: {
fontSize: 17,
fontWeight: 500
},
subtextStyle: {
fontSize: 12
}
},
// Add tooltip
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
formatter: '{a}
{b}: +{c}$ ({d}%)'
},
// Add legend
legend: {
orient: 'vertical',
top: 'center',
left: 0,
data: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
itemHeight: 8,
itemWidth: 8
},
// Add series
series: [
{
name: 'Increase (brutto)',
type: 'pie',
radius: ['15%', '80%'],
center: ['50%', '57.5%'],
roseType: 'radius',
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#fff',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: true
},
labelLine: {
show: true
}
}
},
data: [
{value: 440, name: 'Jan'},
{value: 260, name: 'Feb'},
{value: 350, name: 'Mar'},
{value: 250, name: 'Apr'},
{value: 210, name: 'May'},
{value: 350, name: 'Jun'},
{value: 300, name: 'Jul'},
{value: 430, name: 'Aug'},
{value: 400, name: 'Sep'},
{value: 450, name: 'Oct'},
{value: 330, name: 'Nov'},
{value: 200, name: 'Dec'}
]
}
]
});
}
// Rose with labels
if (pie_rose_labels_element) {
// Initialize chart
var pie_rose_labels = echarts.init(pie_rose_labels_element);
//
// Chart config
//
// Options
pie_rose_labels.setOption({
// Colors
color: [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Add title
title: {
text: 'Employee\'s salary review',
subtext: 'Senior front end developer',
left: 'center',
textStyle: {
fontSize: 17,
fontWeight: 500
},
subtextStyle: {
fontSize: 12
}
},
// Add tooltip
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
formatter: '{a}
{b}: +{c}$ ({d}%)'
},
// Add legend
legend: {
orient: 'vertical',
top: 'center',
left: 0,
data: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
itemHeight: 8,
itemWidth: 8
},
// Add series
series: [
{
name: 'Increase (brutto)',
type: 'pie',
radius: ['15%', '80%'],
center: ['50%', '57.5%'],
roseType: 'radius',
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#fff'
}
},
data: [
{value: 440, name: 'Jan'},
{value: 260, name: 'Feb'},
{value: 350, name: 'Mar'},
{value: 250, name: 'Apr'},
{value: 210, name: 'May'},
{value: 350, name: 'Jun'},
{value: 300, name: 'Jul'},
{value: 430, name: 'Aug'},
{value: 400, name: 'Sep'},
{value: 450, name: 'Oct'},
{value: 330, name: 'Nov'},
{value: 200, name: 'Dec'}
]
}
]
});
}
// Multiple levels
if (pie_levels_element) {
// Initialize chart
var pie_levels = echarts.init(pie_levels_element);
//
// Chart config
//
// Options
pie_levels.setOption({
// Colors
color: [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Add title
title: {
text: 'Browser statistics',
subtext: 'Based on shared research',
left: 'center',
textStyle: {
fontSize: 17,
fontWeight: 500
},
subtextStyle: {
fontSize: 12
}
},
// Add tooltip
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
formatter: '{a}
{b}: {c} ({d}%)'
},
// Add legend
legend: {
orient: 'vertical',
top: 'center',
left: 0,
data: ['Chrome','Firefox','Safari','IE9+','IE8-'],
itemHeight: 8,
itemWidth: 8
},
// Add series
series: (function () {
var series = [];
for (var i = 0; i < 30; i++) {
series.push({
name: 'Browser',
type: 'pie',
hoverOffset: 0,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#fff',
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;
})()
});
}
// Timeline
if (pie_timeline_element) {
// Initialize chart
var pie_timeline = echarts.init(pie_timeline_element);
//
// Chart config
//
var idx = 1;
// Options
pie_timeline.setOption({
// Add timeline
timeline: {
axisType: 'category',
left: 0,
right: 0,
bottom: 0,
label: {
normal: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 11
}
},
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 }
],
autoPlay: true,
playInterval: 3000
},
options: [
{
// Colors
color: [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Add title
title: {
text: 'Browser statistics',
subtext: 'Based on shared research',
left: 'center',
textStyle: {
fontSize: 17,
fontWeight: 500
},
subtextStyle: {
fontSize: 12
}
},
// Add tooltip
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
formatter: '{a}
{b}: {c} ({d}%)'
},
// Add legend
legend: {
orient: 'vertical',
top: 'center',
left: 0,
data: ['Chrome','Firefox','Safari','IE9+','IE8-'],
itemHeight: 8,
itemWidth: 8
},
// Add series
series: [{
name: 'Browser',
type: 'pie',
center: ['50%', '50%'],
radius: '60%',
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#fff'
}
},
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-'}
]
}]
}
]
});
}
// Donut multiples
if (pie_multiples_element) {
// Initialize chart
var pie_multiples = echarts.init(pie_multiples_element);
//
// Chart config
//
// Top text label
var labelTop = {
show: true,
position: 'center',
formatter: '{b}\n',
fontSize: 15,
lineHeight: 50,
rich: {
a: {}
}
};
// Background item style
var backStyle = {
color: '#eee',
emphasis: {
color: '#eee'
}
};
// Bottom text label
var labelBottom = {
color: '#333',
show: true,
position: 'center',
formatter: function (params) {
return '\n\n' + (100 - params.value) + '%'
},
fontWeight: 500,
lineHeight: 35,
rich: {
a: {}
},
emphasis: {
color: '#333'
}
};
// Set inner and outer radius
var radius = [52, 65];
// Options
pie_multiples.setOption({
// Colors
color: [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Add title
title: {
text: 'The Application World',
subtext: 'from global web index',
left: 'center',
textStyle: {
fontSize: 17,
fontWeight: 500
},
subtextStyle: {
fontSize: 12
}
},
// Add legend
legend: {
bottom: 0,
left: 'center',
data: ['GMaps', 'Facebook', 'Youtube', 'Google+', 'Weixin', 'Twitter', 'Skype', 'Messenger', 'Whatsapp', 'Instagram'],
itemHeight: 8,
itemWidth: 8,
selectedMode: false
},
// Add series
series: [
{
type: 'pie',
center: ['10%', '33%'],
radius: radius,
hoverAnimation: false,
data: [
{name: 'other', value: 46, label: labelBottom, itemStyle: backStyle},
{name: 'GMaps', value: 54, label: labelTop}
]
},
{
type: 'pie',
center: ['30%', '33%'],
radius: radius,
hoverAnimation: false,
data: [
{name: 'other', value: 56, label: labelBottom, itemStyle: backStyle},
{name: 'Facebook', value: 44, label: labelTop}
]
},
{
type: 'pie',
center: ['50%', '33%'],
radius: radius,
hoverAnimation: false,
data: [
{name: 'other', value: 65, label: labelBottom, itemStyle: backStyle},
{name: 'Youtube', value: 35, label: labelTop}
]
},
{
type: 'pie',
center: ['70%', '33%'],
radius: radius,
hoverAnimation: false,
data: [
{name: 'other', value: 70, label: labelBottom, itemStyle: backStyle},
{name: 'Google+', value: 30, label: labelTop}
]
},
{
type: 'pie',
center: ['90%', '33%'],
radius: radius,
hoverAnimation: false,
data: [
{name: 'other', value: 73, label: labelBottom, itemStyle: backStyle},
{name: 'Weixin', value: 27, label: labelTop}
]
},
{
type: 'pie',
center: ['10%', '73%'],
radius: radius,
hoverAnimation: false,
data: [
{name: 'other', value: 78, label: labelBottom, itemStyle: backStyle},
{name: 'Twitter', value: 22, label: labelTop}
]
},
{
type: 'pie',
center: ['30%', '73%'],
radius: radius,
hoverAnimation: false,
data: [
{name: 'other', value: 78, label: labelBottom, itemStyle: backStyle},
{name: 'Skype', value: 22, label: labelTop}
]
},
{
type: 'pie',
center: ['50%', '73%'],
radius: radius,
hoverAnimation: false,
data: [
{name: 'other', value: 78, label: labelBottom, itemStyle: backStyle},
{name: 'Messenger', value: 22, label: labelTop}
]
},
{
type: 'pie',
center: ['70%', '73%'],
radius: radius,
hoverAnimation: false,
data: [
{name: 'other', value: 83, label: labelBottom, itemStyle: backStyle},
{name: 'Whatsapp', value: 17, label: labelTop}
]
},
{
type: 'pie',
center: ['90%', '73%'],
radius: radius,
hoverAnimation: false,
data: [
{name: 'other', value: 89, label: labelBottom, itemStyle: backStyle},
{name: 'Instagram', value: 11, label: labelTop}
]
}
]
});
}
//
// Resize charts
//
// Resize function
var triggerChartResize = function() {
pie_basic_element && pie_basic.resize();
pie_donut_element && pie_donut.resize();
pie_nested_element && pie_nested.resize();
pie_infographic_element && pie_infographic.resize();
pie_rose_element && pie_rose.resize();
pie_rose_labels_element && pie_rose_labels.resize();
pie_levels_element && pie_levels.resize();
pie_timeline_element && pie_timeline.resize();
pie_multiples_element && pie_multiples.resize();
};
// On sidebar width change
$(document).on('click', '.sidebar-control', function() {
setTimeout(function () {
triggerChartResize();
}, 0);
});
// On window resize
var resizeCharts;
window.onresize = function () {
clearTimeout(resizeCharts);
resizeCharts = setTimeout(function () {
triggerChartResize();
}, 200);
};
};
//
// Return objects assigned to module
//
return {
init: function() {
_piesDonutsExamples();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
EchartsPiesDonuts.init();
});