You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
548 lines
11 KiB
548 lines
11 KiB
$(function () { |
|
"use strict"; |
|
// ------------------------------ |
|
// Basic line chart |
|
// ------------------------------ |
|
// based on prepared DOM, initialize echarts instance |
|
var myChart = echarts.init(document.getElementById("basic-line")); |
|
|
|
// specify chart configuration item and data |
|
var option = { |
|
// Setup grid |
|
grid: { |
|
left: "1%", |
|
right: "2%", |
|
bottom: "3%", |
|
containLabel: true, |
|
}, |
|
|
|
// Add Tooltip |
|
tooltip: { |
|
trigger: "axis", |
|
}, |
|
|
|
// Add Legend |
|
legend: { |
|
data: ["Max temp", "Min temp"], |
|
}, |
|
|
|
// Add custom colors |
|
color: ["#1e88e5", "#f62d51"], |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Horizontal Axiz |
|
xAxis: [ |
|
{ |
|
type: "category", |
|
boundaryGap: false, |
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], |
|
color: "#efefef", |
|
}, |
|
], |
|
|
|
// Vertical Axis |
|
yAxis: [ |
|
{ |
|
type: "value", |
|
axisLabel: { |
|
formatter: "{value} °C", |
|
}, |
|
}, |
|
], |
|
|
|
// Add Series |
|
series: [ |
|
{ |
|
name: "Max temp", |
|
type: "line", |
|
data: [5, 15, 11, 15, 12, 13, 10], |
|
markPoint: { |
|
data: [ |
|
{ type: "max", name: "Max" }, |
|
{ type: "min", name: "Min" }, |
|
], |
|
}, |
|
markLine: { |
|
data: [{ type: "average", name: "Average" }], |
|
}, |
|
lineStyle: { |
|
normal: { |
|
width: 3, |
|
shadowColor: "rgba(0,0,0,0.1)", |
|
shadowBlur: 10, |
|
shadowOffsetY: 10, |
|
}, |
|
}, |
|
}, |
|
{ |
|
name: "Min temp", |
|
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" }], |
|
}, |
|
lineStyle: { |
|
normal: { |
|
width: 3, |
|
shadowColor: "rgba(0,0,0,0.1)", |
|
shadowBlur: 10, |
|
shadowOffsetY: 10, |
|
}, |
|
}, |
|
}, |
|
], |
|
}; |
|
// use configuration item and data specified to show chart |
|
myChart.setOption(option); |
|
|
|
// ------------------------------ |
|
// Basic line chart |
|
// ------------------------------ |
|
// based on prepared DOM, initialize echarts instance |
|
var bareaChart = echarts.init(document.getElementById("basic-area")); |
|
|
|
// specify chart configuration item and data |
|
var option = { |
|
// Setup grid |
|
grid: { |
|
left: "1%", |
|
right: "2%", |
|
bottom: "3%", |
|
containLabel: true, |
|
}, |
|
|
|
// Add Tooltip |
|
tooltip: { |
|
trigger: "axis", |
|
}, |
|
|
|
// Add Legend |
|
legend: { |
|
data: ["Max temp", "Min temp"], |
|
}, |
|
|
|
// Add custom colors |
|
color: ["#1e88e5", "#00acc1"], |
|
|
|
// 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: "Max temp", |
|
type: "line", |
|
areaStyle: {}, |
|
data: [5, 15, 11, 15, 12, 13, 10], |
|
markPoint: { |
|
data: [ |
|
{ type: "max", name: "Max" }, |
|
{ type: "min", name: "Min" }, |
|
], |
|
}, |
|
markLine: { |
|
data: [{ type: "average", name: "Average" }], |
|
}, |
|
}, |
|
{ |
|
name: "Min temp", |
|
type: "line", |
|
areaStyle: {}, |
|
data: [1, 8, 2, 5, 3, 2, 0], |
|
markPoint: { |
|
data: [{ name: "Week low", value: -2, xAxis: 1, yAxis: -1.5 }], |
|
}, |
|
markLine: { |
|
data: [{ type: "average", name: "Average" }], |
|
}, |
|
}, |
|
], |
|
}; |
|
// use configuration item and data specified to show chart |
|
bareaChart.setOption(option); |
|
|
|
//*************************** |
|
// Stacked chart |
|
//*************************** |
|
var stackedChart = echarts.init(document.getElementById("stacked-line")); |
|
var option = { |
|
grid: { |
|
left: "1%", |
|
right: "2%", |
|
bottom: "3%", |
|
containLabel: true, |
|
}, |
|
tooltip: { |
|
trigger: "axis", |
|
}, |
|
// Add legend |
|
legend: { |
|
data: [ |
|
"Elite admin", |
|
"Monster admin", |
|
"Ample admin", |
|
"Material admin", |
|
"Angular admin", |
|
], |
|
}, |
|
|
|
// Add custom colors |
|
color: ["#1e88e5", "#7460ee", "#f62d51", "#36bea6", "#212529"], |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Hirozontal axis |
|
xAxis: [ |
|
{ |
|
type: "category", |
|
boundaryGap: false, |
|
data: [ |
|
"Monday", |
|
"Tuesday", |
|
"Wednesday", |
|
"Thursday", |
|
"Friday", |
|
"Saturday", |
|
"Sunday", |
|
], |
|
}, |
|
], |
|
|
|
// Vertical axis |
|
yAxis: [ |
|
{ |
|
type: "value", |
|
}, |
|
], |
|
|
|
// Add series |
|
series: [ |
|
{ |
|
name: "Elite admin", |
|
type: "line", |
|
stack: "Total", |
|
data: [120, 132, 101, 134, 90, 230, 210], |
|
}, |
|
{ |
|
name: "Monster admin", |
|
type: "line", |
|
stack: "Total", |
|
data: [220, 182, 191, 234, 290, 330, 310], |
|
}, |
|
{ |
|
name: "Ample admin", |
|
type: "line", |
|
stack: "Total", |
|
data: [150, 232, 201, 154, 190, 330, 410], |
|
}, |
|
{ |
|
name: "Material admin", |
|
type: "line", |
|
stack: "Total", |
|
data: [320, 332, 301, 334, 390, 330, 320], |
|
}, |
|
{ |
|
name: "Angular admin", |
|
type: "line", |
|
stack: "Total", |
|
data: [820, 932, 901, 934, 1290, 1330, 1320], |
|
}, |
|
], |
|
// Add series |
|
}; |
|
stackedChart.setOption(option); |
|
|
|
//*************************** |
|
// Stacked Area chart |
|
//*************************** |
|
var stackedareaChart = echarts.init(document.getElementById("stacked-area")); |
|
var option = { |
|
grid: { |
|
left: "1%", |
|
right: "2%", |
|
bottom: "3%", |
|
containLabel: true, |
|
}, |
|
tooltip: { |
|
trigger: "axis", |
|
}, |
|
// Add legend |
|
legend: { |
|
data: [ |
|
"Elite admin", |
|
"Monster admin", |
|
"Ample admin", |
|
"Material admin", |
|
"Angular admin", |
|
], |
|
}, |
|
|
|
// Add custom colors |
|
color: ["#212529", "#7460ee", "#f62d51", "#36bea6", "#1e88e5"], |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Hirozontal axis |
|
xAxis: [ |
|
{ |
|
type: "category", |
|
boundaryGap: false, |
|
data: [ |
|
"Monday", |
|
"Tuesday", |
|
"Wednesday", |
|
"Thursday", |
|
"Friday", |
|
"Saturday", |
|
"Sunday", |
|
], |
|
}, |
|
], |
|
|
|
// Vertical axis |
|
yAxis: [ |
|
{ |
|
type: "value", |
|
}, |
|
], |
|
|
|
// Add series |
|
series: [ |
|
{ |
|
name: "Elite admin", |
|
type: "line", |
|
stack: "Total", |
|
areaStyle: {}, |
|
data: [120, 132, 101, 134, 90, 230, 210], |
|
}, |
|
{ |
|
name: "Monster admin", |
|
type: "line", |
|
stack: "Total", |
|
areaStyle: {}, |
|
data: [220, 182, 191, 234, 290, 330, 310], |
|
}, |
|
{ |
|
name: "Ample admin", |
|
type: "line", |
|
stack: "Total", |
|
areaStyle: {}, |
|
data: [150, 232, 201, 154, 190, 330, 410], |
|
}, |
|
{ |
|
name: "Material admin", |
|
type: "line", |
|
stack: "Total", |
|
areaStyle: {}, |
|
data: [320, 332, 301, 334, 390, 330, 320], |
|
}, |
|
{ |
|
name: "Angular admin", |
|
type: "line", |
|
stack: "Total", |
|
areaStyle: {}, |
|
data: [820, 932, 901, 934, 1290, 1330, 1320], |
|
}, |
|
], |
|
// Add series |
|
}; |
|
stackedareaChart.setOption(option); |
|
|
|
// ------------------------------ |
|
// Basic line chart |
|
// ------------------------------ |
|
// based on prepared DOM, initialize echarts instance |
|
var gradiantChart = echarts.init(document.getElementById("g-line")); |
|
|
|
// specify chart configuration item and data |
|
var data = [ |
|
["2000-06-05", 116], |
|
["2000-06-06", 129], |
|
["2000-06-07", 135], |
|
["2000-06-08", 86], |
|
["2000-06-09", 73], |
|
["2000-06-10", 85], |
|
["2000-06-11", 73], |
|
["2000-06-12", 68], |
|
["2000-06-13", 92], |
|
["2000-06-14", 130], |
|
["2000-06-15", 245], |
|
["2000-06-16", 139], |
|
["2000-06-17", 115], |
|
["2000-06-18", 111], |
|
["2000-06-19", 309], |
|
["2000-06-20", 206], |
|
["2000-06-21", 137], |
|
["2000-06-22", 128], |
|
["2000-06-23", 85], |
|
["2000-06-24", 94], |
|
["2000-06-25", 71], |
|
["2000-06-26", 106], |
|
["2000-06-27", 84], |
|
["2000-06-28", 93], |
|
["2000-06-29", 85], |
|
["2000-06-30", 73], |
|
["2000-07-01", 83], |
|
["2000-07-02", 125], |
|
["2000-07-03", 107], |
|
["2000-07-04", 82], |
|
["2000-07-05", 44], |
|
["2000-07-06", 72], |
|
["2000-07-07", 106], |
|
["2000-07-08", 107], |
|
["2000-07-09", 66], |
|
["2000-07-10", 91], |
|
["2000-07-11", 92], |
|
["2000-07-12", 113], |
|
["2000-07-13", 107], |
|
["2000-07-14", 131], |
|
["2000-07-15", 111], |
|
["2000-07-16", 64], |
|
["2000-07-17", 69], |
|
["2000-07-18", 88], |
|
["2000-07-19", 77], |
|
["2000-07-20", 83], |
|
["2000-07-21", 111], |
|
["2000-07-22", 57], |
|
["2000-07-23", 55], |
|
["2000-07-24", 60], |
|
]; |
|
|
|
var dateList = data.map(function (item) { |
|
return item[0]; |
|
}); |
|
var valueList = data.map(function (item) { |
|
return item[1]; |
|
}); |
|
|
|
var option = { |
|
// Make gradient line here |
|
visualMap: [ |
|
{ |
|
show: false, |
|
type: "continuous", |
|
seriesIndex: 0, |
|
min: 0, |
|
max: 400, |
|
}, |
|
{ |
|
show: false, |
|
type: "continuous", |
|
seriesIndex: 1, |
|
dimension: 0, |
|
min: 0, |
|
max: dateList.length - 1, |
|
}, |
|
], |
|
|
|
title: [ |
|
{ |
|
left: "center", |
|
text: "Gradient along the y axis", |
|
}, |
|
{ |
|
top: "55%", |
|
left: "center", |
|
text: "Gradient along the x axis", |
|
}, |
|
], |
|
tooltip: { |
|
trigger: "axis", |
|
}, |
|
|
|
xAxis: [ |
|
{ |
|
data: dateList, |
|
}, |
|
{ |
|
data: dateList, |
|
gridIndex: 1, |
|
}, |
|
], |
|
yAxis: [ |
|
{ |
|
splitLine: { show: false }, |
|
}, |
|
{ |
|
splitLine: { show: false }, |
|
gridIndex: 1, |
|
}, |
|
], |
|
grid: [ |
|
{ |
|
bottom: "60%", |
|
left: "3%", |
|
right: "3%", |
|
}, |
|
{ |
|
top: "60%", |
|
left: "3%", |
|
right: "3%", |
|
}, |
|
], |
|
|
|
series: [ |
|
{ |
|
type: "line", |
|
showSymbol: false, |
|
data: valueList, |
|
}, |
|
{ |
|
type: "line", |
|
showSymbol: false, |
|
data: valueList, |
|
xAxisIndex: 1, |
|
yAxisIndex: 1, |
|
}, |
|
], |
|
}; |
|
// use configuration item and data specified to show chart |
|
gradiantChart.setOption(option); |
|
|
|
//------------------------------------------------------ |
|
// Resize chart on menu width change and window resize |
|
//------------------------------------------------------ |
|
$(function () { |
|
// Resize chart on menu width change and window resize |
|
$(window).on("resize", resize); |
|
$(".sidebartoggler").on("click", resize); |
|
|
|
// Resize function |
|
function resize() { |
|
setTimeout(function () { |
|
// Resize chart |
|
myChart.resize(); |
|
bareaChart.resize(); |
|
stackedChart.resize(); |
|
stackedareaChart.resize(); |
|
gradiantChart.resize(); |
|
}, 200); |
|
} |
|
}); |
|
});
|
|
|