%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: your-top-expenses.js
Description: echarts your-top-expenses chart
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: GeeksLabs
Author URL: http://www.themeforest.net/user/geekslabs
==========================================================================================*/
// Doughnut 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('your-top-expenses'));
// Chart Options
// ------------------------------
chartOptions = {
// Add legend
legend: {
orient: 'vertical',
x: 'left',
data: ['Internet','Infrastructure','Party','Assets','Electricity']
},
// Add custom colors
color: ['#FECEA8', '#FF847C', '#E84A5F','#2A363B', '#99B898'],
// Display toolbox
toolbox: {
show: true,
orient: 'vertical',
},
// 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'},
{value: 1548, name: 'Infrastructure'},
{value: 135, name: 'Party'},
{value: 234, name: 'Assets'},
{value: 650, name: 'Electricity'}
]
}
]
};
// 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);
}
});
}
);
});
Zerion Mini Shell 1.0