%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: funnel-pyramid.js
Description: echarts funnel pyramid chart
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
// Funnel pyramid chart
// ------------------------------
$(window).on("load", function(){
// Set paths
// ------------------------------
require.config({
paths: {
echarts: '../../../app-assets/vendors/js/charts/echarts'
}
});
// Configuration
// ------------------------------
require(
[
'echarts',
'echarts/chart/funnel',
'echarts/chart/gauge'
],
// Charts setup
function (ec) {
// Initialize chart
// ------------------------------
var myChart = ec.init(document.getElementById('funnel-pyramid'));
// Chart Options
// ------------------------------
chartOptions = {
// Add tooltip
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
// Add legend
legend: {
data : ['Work','Eat','Commute','Watch TV','Sleep']
},
// Add Custom Colors
color: ['#00A5A8', '#626E82', '#FF7D4D','#FF4558', '#28D094'],
// Enable drag recalculate
calculable: true,
// Add series
series : [
{
name:'Pyramid',
type:'funnel',
// x : '50%',
sort : 'ascending',
itemStyle: {
normal: {
// color: 各异,
label: {
position: 'left'
}
}
},
data:[
{value:60, name:'Work'},
{value:40, name:'Eat'},
{value:20, name:'Commute'},
{value:80, name:'Watch TV'},
{value:100, name:'Sleep'}
]
}
]
};
// 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