%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: basic-line.js
Description: echarts basic 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
==========================================================================================*/
// Basic 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'
],
// Charts setup
function (ec) {
// Initialize chart
// ------------------------------
var myChart = ec.init(document.getElementById('basic-line'));
// Chart Options
// ------------------------------
chartOptions = {
// Setup grid
grid: {
x: 40,
x2: 40,
y: 45,
y2: 25
},
// Add Tooltip
tooltip : {
trigger: 'axis'
},
// Add Legend
legend: {
data:['Highest temperature','Minimum temperature']
},
// Add custom colors
color: ['#FF4961', '#666EE8'],
// Enable drag recalculate
calculable : true,
// Horizontal Axiz
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
}
],
// Vertical Axis
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}
],
// Add Series
series : [
{
name:'Highest temperature',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint : {
data : [
{type : 'max', name: 'Max'},
{type : 'min', name: 'Min'}
]
},
markLine : {
data : [
{type : 'average', name: 'Average'}
]
}
},
{
name:'Minimum temperature',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : 'Week low', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : 'Average'}
]
}
}
]
};
// 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