%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: change-waterfall.js
Description: echarts change waterfall chart
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
// Change Waterfall chart
// ------------------------------
$(window).on("load", function(){
// Set paths
// ------------------------------
require.config({
paths: {
echarts: '../../../app-assets/vendors/js/charts/echarts'
}
});
// Configuration
// ------------------------------
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
// Charts setup
function (ec) {
// Initialize chart
// ------------------------------
var myChart = ec.init(document.getElementById('change-waterfall'));
// Chart Options
// ------------------------------
chartOptions = {
// Setup grid
grid: {
x: 45,
x2: 10,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var tar;
if (params[1].value != '-') {
tar = params[1];
}
else {
tar = params[0];
}
return tar.name + '<br/>' + tar.seriesName + ': ' + tar.value;
}
},
// Add legend
legend: {
data: ['Expenses','Income']
},
// Add custom colors
color: ['#666EE8', '#FF4961'],
// Horizontal axis
xAxis: [{
type: 'category',
data: ['January','February','March','April','May','June','July','August','September','October','November','December']
}],
// Vertical axis
yAxis: [{
type: 'value'
}],
// Add series
series: [
{
name: 'Aid',
type: 'bar',
stack: 'Total',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292, 992]
},
{
name: 'Income',
type: 'bar',
stack: 'Total',
itemStyle: { normal: {label: {show: true, position: 'top'}}},
data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
},
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
itemStyle: { normal: {label: {show: true, position: 'bottom'}}},
data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203,300]
}
]
};
// 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