%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: lasagna.js
Description: echarts lasagna chart
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
// Lasagna 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('lasagna'));
// Chart Options
// ------------------------------
chartOptions = {
// Add title
title: {
text: 'Browser statistics',
subtext: 'Based on shared research',
x: 'center'
},
// Add tooltip
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
// Add legend
legend: {
x: 'left',
orient: 'vertical',
data: ['Chrome','Firefox','Safari','IE9+','IE8-']
},
// Add custom colors
color: ['#00A5A8', '#626E82', '#FF7D4D','#FF4558', '#28D094'],
// Enable drag recalculate
calculable: false,
// Add series
series: (function () {
var series = [];
for (var i = 0; i < 30; i++) {
series.push({
name: 'Browser',
type: 'pie',
itemStyle: {
normal: {
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;
})()
};
// 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