%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: column-line.js
Description: echarts column line chart
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
// Column line 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',
'echarts/chart/scatter',
'echarts/chart/pie'
],
// Charts setup
function (ec) {
// Initialize chart
// ------------------------------
var myChart = ec.init(document.getElementById('column-line'));
// Chart Options
// ------------------------------
chartOptions = {
// Setup grid
grid: {
x: 40,
x2: 40,
y: 45,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis'
},
// Add legend
legend: {
data: ['Evaporation', 'Precipitation', 'Average temperature']
},
// Add custom colors
color: ['#00A5A8', '#FF4558', '#FF7D4D'],
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
// Vertical axis
yAxis : [
{
type : 'value',
name : 'Water',
axisLabel : {
formatter: '{value} ml'
}
},
{
type : 'value',
name : 'Temperature',
axisLabel : {
formatter: '{value} °C'
}
}
],
// Add series
series : [
{
name:'Evaporation',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'Precipitation',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'Average temperature',
type:'line',
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
// 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