kicap/store_keeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added admin interface

Browse Source
This commit is contained in:
kicap1992
2021-12-21 00:25:43 +08:00
parent 9adf18c7b9
commit a25104fadc
3496 changed files with 280326 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

651
admin/assets/js/pages/charts/echart.js Normal file
View File

@ -0,0 +1,651 @@
// Bar Area
$(function() {
"use strict";
var barArea = getChart("echart-bar_area")
var app = {};
var option = {};
var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push('bar' + i);
data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
}
option = {
legend: {
data: ['bar', 'bar2'],
align: 'right',
bottom: '0',
},
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'15%',
},
tooltip: {},
xAxis: {
data: xAxisData,
silent: true,
splitLine: {
show: false
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
yAxis: {
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
series: [{
name: 'bar',
type: 'bar',
data: data1,
color: '#a27ce6',
animationDelay: function (idx) {
return idx * 10;
}
}, {
name: 'bar2',
type: 'bar',
data: data2,
color: '#1ab1e3',
animationDelay: function (idx) {
return idx * 5 + 100;
}
}],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
if (option && typeof option === "object") {
barArea.setOption(option, true);
}
$(window).on('resize', function(){
barArea.resize();
});
});
// Rainfall and Evaporation
$(function() {
"use strict";
var app = {};
var option = {};
var rainFall = getChart("echart-rainfall");
option = {
legend: {
data:['data1','data2'],
bottom: '0',
},
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'15%',
},
tooltip : {
trigger: 'axis'
},
calculable : true,
xAxis : {
type : 'category',
data : ['Jan','Feb','Mar','Apr','May','Jun','July','Aug','Sept','Oct','Nov','Dec'],
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
yAxis : {
type : 'value',
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
series : [
{
name:'data1',
type:'bar',
color: '#45e5c3',
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],
markPoint : {
data : [
{type : 'max', name: 'Max'},
{type : 'min', name: 'Min'}
]
},
markLine : {
data : [
{type : 'average', name: 'Average'}
]
}
},
{
name:'data2',
type:'bar',
color: '#288cff',
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],
markPoint : {
data : [
{name : 'Highest', value : 182.2, xAxis: 7, yAxis: 183},
{name : 'Minimum', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : 'Average'}
]
}
}
]
};
if (option && typeof option === "object") {
rainFall.setOption(option, true);
}
$(window).on('resize', function(){
rainFall.resize();
});
});
// Dynamic Data
$(function() {
"use strict";
var dynamicData = getChart("echart-dynamic_data");
var app = {};
var option = {};
option = {
legend: {
data:['Latest transaction price', 'Pre-order queue']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
}
return res;
})(),
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
},
{
type: 'category',
boundaryGap: true,
data: (function (){
var res = [];
var len = 10;
while (len--) {
res.push(10 - len - 1);
}
return res;
})(),
},
],
yAxis: [
{
type: 'value',
scale: true,
name: 'price',
max: 30,
min: 0,
boundaryGap: [0.2, 0.2],
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
{
type: 'value',
scale: true,
max: 1200,
min: 0,
boundaryGap: [0.2, 0.2],
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
}
],
series: [
{
color: '#5b39b1',
name:'queue',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
})()
},
{
color: '#45e5c3',
name:'Latest transaction',
type:'line',
data:(function (){
var res = [];
var len = 0;
while (len < 10) {
res.push((Math.random()*10 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}
]
};
if (option && typeof option === "object") {
dynamicData.setOption(option, true);
}
$(window).on('resize', function(){
dynamicData.resize();
});
});
// Basic Candlestick
$(function() {
"use strict";
var candleStick = getChart("echart-candlestick");
var app = {};
var option = {};
option = {
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'8%',
},
xAxis: {
data: ['2018-10-24', '2018-10-25', '2018-10-26', '2018-10-27'],
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
},
yAxis: {
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
series: [{
type: 'k',
data: [
{
itemStyle:{
color: '#1ab1e3',
borderColor: '#1ab1e3',
},
value: [20, 30, 10, 35]
},
{
itemStyle:{
color: '#a27ce6',
color0: '#a27ce6',
borderColor: '#a27ce6',
borderColor0: '#a27ce6',
},
value: [40, 35, 30, 55]
},
{
itemStyle:{
color: '#1ab1e3',
borderColor: '#1ab1e3',
},
value: [33, 38, 33, 40]
},
{
itemStyle:{
color: '#ffc323',
borderColor: '#ffc323',
},
value: [40, 40, 32, 42]
},
]
}]
};
if (option && typeof option === "object") {
candleStick.setOption(option, true);
}
$(window).on('resize', function(){
candleStick.resize();
});
});
// Basic Scatter Chart
$(function() {
"use strict";
var basicScatter = getChart("echart-basic_scatter");
var app = {};
var option = {};
option = {
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'5%',
},
xAxis: {
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
yAxis: {
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
series: [{
symbolSize: 15,
color: '#1ab1e3',
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter'
}]
};
if (option && typeof option === "object") {
basicScatter.setOption(option, true);
}
$(window).on('resize', function(){
basicScatter.resize();
});
});
// Doughnut Chart
$(function() {
"use strict";
var doughnutChart = getChart("echart-doughnut");
var app = {};
var option = {};
option = {
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'5%',
},
legend: {
orient: 'vertical',
x: 'left',
data:['Data1','Data2','Data3','Data4','Data5']
},
series: [
{
name:'Access source',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'Data1', itemStyle: {color: '#ffc323',}},
{value:310, name:'Data2', itemStyle: {color: '#ff758e',}},
{value:234, name:'Data3', itemStyle: {color: '#49c5b6',}},
{value:135, name:'Data4', itemStyle: {color: '#60bafd',}},
{value:1548, name:'Data5', itemStyle: {color: '#a27ce6',}}
]
}
]
};
if (option && typeof option === "object") {
doughnutChart.setOption(option, true);
}
$(window).on('resize', function(){
doughnutChart.resize();
});
});
// Large scale area chart
$(function() {
"use strict";
var largescaleArea = getChart("echart-large_scale_area");
var app = {};
var option = {};
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 300];
for (var i = 1; i < 20000; i++) {
var now = new Date(base += oneDay);
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'20%',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date,
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
dataZoom: [{
type: 'inside',
start: 0,
end: 10
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name:'Simulation data',
type:'line',
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
color: '#f8f9fa',
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
},
data: data
}
]
};
if (option && typeof option === "object") {
largescaleArea.setOption(option, true);
}
$(window).on('resize', function(){
largescaleArea.resize();
});
});
function getChart(id){
var dom = document.getElementById(id);
return echarts.init(dom);
}