mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-13 15:31:38 +08:00
添加Metronic(作为LFS)
This commit is contained in:
242
frontend/static/assets/admin/pages/scripts/ecommerce-index.js
Normal file
242
frontend/static/assets/admin/pages/scripts/ecommerce-index.js
Normal file
@@ -0,0 +1,242 @@
|
||||
var EcommerceIndex = function () {
|
||||
|
||||
function showTooltip(x, y, labelX, labelY) {
|
||||
$('<div id="tooltip" class="chart-tooltip">' + (labelY.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')) + 'USD<\/div>').css({
|
||||
position: 'absolute',
|
||||
display: 'none',
|
||||
top: y - 40,
|
||||
left: x - 60,
|
||||
border: '0px solid #ccc',
|
||||
padding: '2px 6px',
|
||||
'background-color': '#fff',
|
||||
}).appendTo("body").fadeIn(200);
|
||||
}
|
||||
|
||||
var initChart1 = function () {
|
||||
|
||||
var data = [
|
||||
['01/2013', 4],
|
||||
['02/2013', 8],
|
||||
['03/2013', 10],
|
||||
['04/2013', 12],
|
||||
['05/2013', 2125],
|
||||
['06/2013', 324],
|
||||
['07/2013', 1223],
|
||||
['08/2013', 1365],
|
||||
['09/2013', 250],
|
||||
['10/2013', 999],
|
||||
['11/2013', 390],
|
||||
];
|
||||
|
||||
var plot_statistics = $.plot(
|
||||
$("#statistics_1"),
|
||||
[
|
||||
{
|
||||
data:data,
|
||||
lines: {
|
||||
fill: 0.6,
|
||||
lineWidth: 0,
|
||||
},
|
||||
color: ['#f89f9f']
|
||||
},
|
||||
{
|
||||
data: data,
|
||||
points: {
|
||||
show: true,
|
||||
fill: true,
|
||||
radius: 5,
|
||||
fillColor: "#f89f9f",
|
||||
lineWidth: 3
|
||||
},
|
||||
color: '#fff',
|
||||
shadowSize: 0
|
||||
},
|
||||
],
|
||||
{
|
||||
|
||||
xaxis: {
|
||||
tickLength: 0,
|
||||
tickDecimals: 0,
|
||||
mode: "categories",
|
||||
min: 2,
|
||||
font: {
|
||||
lineHeight: 15,
|
||||
style: "normal",
|
||||
variant: "small-caps",
|
||||
color: "#6F7B8A"
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
ticks: 3,
|
||||
tickDecimals: 0,
|
||||
tickColor: "#f0f0f0",
|
||||
font: {
|
||||
lineHeight: 15,
|
||||
style: "normal",
|
||||
variant: "small-caps",
|
||||
color: "#6F7B8A"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
backgroundColor: {
|
||||
colors: ["#fff", "#fff"]
|
||||
},
|
||||
borderWidth: 1,
|
||||
borderColor: "#f0f0f0",
|
||||
margin: 0,
|
||||
minBorderMargin: 0,
|
||||
labelMargin: 20,
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
mouseActiveRadius: 6
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
var previousPoint = null;
|
||||
|
||||
$("#statistics_1").bind("plothover", function (event, pos, item) {
|
||||
$("#x").text(pos.x.toFixed(2));
|
||||
$("#y").text(pos.y.toFixed(2));
|
||||
if (item) {
|
||||
if (previousPoint != item.dataIndex) {
|
||||
previousPoint = item.dataIndex;
|
||||
|
||||
$("#tooltip").remove();
|
||||
var x = item.datapoint[0].toFixed(2),
|
||||
y = item.datapoint[1].toFixed(2);
|
||||
|
||||
showTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1]);
|
||||
}
|
||||
} else {
|
||||
$("#tooltip").remove();
|
||||
previousPoint = null;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
var initChart2 = function() {
|
||||
|
||||
var data = [
|
||||
['01/2013', 10],
|
||||
['02/2013', 0],
|
||||
['03/2013', 10],
|
||||
['04/2013', 12],
|
||||
['05/2013', 212],
|
||||
['06/2013', 324],
|
||||
['07/2013', 122],
|
||||
['08/2013', 136],
|
||||
['09/2013', 250],
|
||||
['10/2013', 99],
|
||||
['11/2013', 190],
|
||||
];
|
||||
|
||||
var plot_statistics = $.plot(
|
||||
$("#statistics_2"),
|
||||
[
|
||||
{
|
||||
data:data,
|
||||
lines: {
|
||||
fill: 0.6,
|
||||
lineWidth: 0,
|
||||
},
|
||||
color: ['#BAD9F5']
|
||||
},
|
||||
{
|
||||
data: data,
|
||||
points: {
|
||||
show: true,
|
||||
fill: true,
|
||||
radius: 5,
|
||||
fillColor: "#BAD9F5",
|
||||
lineWidth: 3
|
||||
},
|
||||
color: '#fff',
|
||||
shadowSize: 0
|
||||
},
|
||||
],
|
||||
{
|
||||
|
||||
xaxis: {
|
||||
tickLength: 0,
|
||||
tickDecimals: 0,
|
||||
mode: "categories",
|
||||
min: 2,
|
||||
font: {
|
||||
lineHeight: 14,
|
||||
style: "normal",
|
||||
variant: "small-caps",
|
||||
color: "#6F7B8A"
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
ticks: 3,
|
||||
tickDecimals: 0,
|
||||
tickColor: "#f0f0f0",
|
||||
font: {
|
||||
lineHeight: 14,
|
||||
style: "normal",
|
||||
variant: "small-caps",
|
||||
color: "#6F7B8A"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
backgroundColor: {
|
||||
colors: ["#fff", "#fff"]
|
||||
},
|
||||
borderWidth: 1,
|
||||
borderColor: "#f0f0f0",
|
||||
margin: 0,
|
||||
minBorderMargin: 0,
|
||||
labelMargin: 20,
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
mouseActiveRadius: 6
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
var previousPoint = null;
|
||||
|
||||
$("#statistics_2").bind("plothover", function (event, pos, item) {
|
||||
$("#x").text(pos.x.toFixed(2));
|
||||
$("#y").text(pos.y.toFixed(2));
|
||||
if (item) {
|
||||
if (previousPoint != item.dataIndex) {
|
||||
previousPoint = item.dataIndex;
|
||||
|
||||
$("#tooltip").remove();
|
||||
var x = item.datapoint[0].toFixed(2),
|
||||
y = item.datapoint[1].toFixed(2);
|
||||
|
||||
showTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1]);
|
||||
}
|
||||
} else {
|
||||
$("#tooltip").remove();
|
||||
previousPoint = null;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
//main function
|
||||
init: function () {
|
||||
initChart1();
|
||||
|
||||
$('#statistics_amounts_tab').on('shown.bs.tab', function (e) {
|
||||
initChart2();
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
}();
|
Reference in New Issue
Block a user