Mini Shell
Mini Shell
| Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/echarts/pie-doughnut/ |
| Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/echarts/pie-doughnut/nested-pie.js |
/*=========================================================================================
File Name: nested-pie.js
Description: echarts nested pie chart
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
// Nested pie chart
// ------------------------------
$(window).on("load", function(){
// Set paths
// ------------------------------
require.config({
paths: {
echarts: '../../../app-assets/vendors/js/charts/echarts'
}
});
// Configuration
// ------------------------------
require(
[
'echarts',
'echarts/chart/pie',
'echarts/chart/funnel'
],
// Charts setup
function (ec) {
// Initialize chart
// ------------------------------
var myChart = ec.init(document.getElementById('nested-pie'));
// Chart Options
// ------------------------------
chartOptions = {
// 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']
},
// Add custom colors
color: ['#00A5A8', '#FF7D4D', '#FF4558','#626E82', '#28D094'],
// 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'}
]
}
]
};
// Apply options
// ------------------------------
myChart.setOption(chartOptions);
// Resize chart
// ------------------------------
$(function () {
// Resize chart on menu width change and window resize
$(window).on('resize', resize);
$(".menu-toggle").on('click', resize);
// Resize function
function resize() {
setTimeout(function() {
// Resize chart
myChart.resize();
}, 200);
}
});
}
);
});