toom1996/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
root
2025-06-18 10:31:43 +08:00
commit d9f820b55d
981 changed files with 449311 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
public/demos/echarts/script/column1.js Executable file
View File

@ -0,0 +1,137 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var column1 = echarts.init(document.getElementById('column1'),null, {
width: 600,
height: 400
});
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' ,
color: '#fff',
fontSize: '26'
}
},
legend: {
top:'5%',
right:'10%',
data: ['猕猴桃', '香蕉'],
fontSize:12,
color:'#808080',
icon:'rect'
},
grid: {
top:60,
left:50,
bottom:60,
right:60
},
xAxis: [{
type: 'category',
axisTick:{
show:false
},
axisLine:{
show:false
},
axisLabel:{
color:'#4D4D4D',
fontSize:14,
margin:21,
fontWeight:'bold'
},
data: ['第一周', '第二周', '第三周', '第四周'],
}],
yAxis: [{
name:'单位：万',
nameTextStyle:{
color:'#808080',
fontSize:12,
padding:[0, 0, 0, -5]
},
max: function(value) {
if(value.max<5){
return 5
}else{
return value.max
}
},
type: 'value',
axisLine:{
show:false
},
axisLabel:{
color:'#808080',
fontSize:12,
margin:5
},
splitLine:{
show:false
},
axisTick:{
show:false
}
}],
series: [
{
name: '猕猴桃',
type: 'bar',
label:{
show:true,
position:'top',
fontSize:14,
color:'#3DC3F0',
fontWeight:'bold'
},
barMaxWidth:60,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#3DC3F0' // 0% 处的颜色
}, {
offset: 1, color: '#CCF2FF' // 100% 处的颜色
}]
},
data: [60, 110, 180, 100]
},
{
name: '香蕉',
type: 'bar',
label:{
show:true,
position:'top',
fontSize:14,
color:'#3D8BF0',
fontWeight:'bold'
},
barMaxWidth:60,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#3D8BF0' // 0% 处的颜色
}, {
offset: 1, color: '#CCE2FF' // 100% 处的颜色
}]
},
data: [90, 130, 170, 130]
}
]
};
column1.setOption(option);
window.onresize = function() {
column1.resize();
}
})

73
public/demos/echarts/script/column2.js Executable file
View File

@ -0,0 +1,73 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var column2 = echarts.init(document.getElementById('column2'),null, {
width: 600,
height: 400
});
var data = [1000, 600, 500, 300];
option = {
backgroundColor: '#ffffff',
title: {
text: 'ETC交易成功率',
left: 'center',
top: 2,
fontSize: 20
},
color: ['#fed46b','#2194ff', ],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
legend: {
left: 'center',
bottom: '2%',
data: ['去年', '今年', ]
},
xAxis: [{
type: 'category',
data: ['09-22', '09-22', '09-22', '09-22', '09-22', '09-22', '09-22'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
barMaxWidth: '30',
label:{
show:true,
position:'top',
formatter:function(params){
return params.value+'%'
}
},
series: [
{
name: '去年',
type: 'bar',
data: [90, 52, 90, 80, 90, 70, 90]
},
{
name: '今年',
type: 'bar',
data: [10, 52, 90, 70, 90, 70, 90]
},
]
};
column2.setOption(option);
window.onresize = function() {
column2.resize();
}
})

120
public/demos/echarts/script/column3.js Executable file
View File

@ -0,0 +1,120 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var column3 = echarts.init(document.getElementById('column3'),null, {
width: 600,
height: 400
});
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
option = {
backgroundColor: '#fff',
tooltip: {
trigger: "axis",
padding: [8, 10],
backgroundColor: 'rgba(255,255,255,0.5)',
axisPointer: {
type: "shadow",
color: "#fff"
}
},
legend: {
data: ['新开会员', '激活会员', '关闭会员'],
align: 'left',
right: 0,
color: "#333",
fontSize: 14,
fontWeight: 200,
itemWidth: 14,
itemHeight: 14,
itemGap: 35
},
grid: {
left: '0',
right: '0',
bottom: '8%',
top: '15%',
containLabel: true
},
label: {
show: true,
position: 'top',
color: '#333',
fontSize: 14,
fontWeight: 700
},
xAxis: [{
type: 'category',
offset: 10,
data: ['团队1', '团队2', '团队3', '团队4'],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color: "#333",
fontSize: 16,
fontWeight: 200
},
}],
yAxis: [{
type: 'value',
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
}],
series: [{
name: '新开会员',
type: 'bar',
data: [20, 34, 18, 14, 16],
barWidth: 22, //柱子宽度
barGap: 1, //柱子之间间距
itemStyle: {
color: '#0071c8',
opacity: 1,
}
}, {
name: '激活会员',
type: 'bar',
data: [10, 24, 5, 24, 16],
barWidth: 22,
barGap: 1,
itemStyle: {
color: '#fdc508',
opacity: 1,
}
}, {
name: '关闭会员',
type: 'bar',
data: [7, 24, 18, 20, 6],
barWidth: 22,
barGap: 1,
itemStyle: {
color: '#dfeafc',
opacity: 1,
}
}]
};
column3.setOption(option);
window.onresize = function() {
column3.resize();
}
})

84
public/demos/echarts/script/column4.js Executable file
View File

@ -0,0 +1,84 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var column4 = echarts.init(document.getElementById('column4'),null, {
width: 600,
height: 400
});
option = {
backgroundColor:'#fff',
title:{
text:"描边柱状图",
top:10,
left:15,
color:"#35598d",
fontSize:16,
fontWeight:'normal'
},
tooltip: {
trigger: 'axis',
formatter:'{b}：{c}',
},
grid: {
left: '5%',
right: '6%',
bottom: '3%',
top: '20%',
containLabel: true
},
xAxis :{
type : 'category',
data : ['策略1','策略2','策略3','策略4','策略5','策略6','策略7','策略8','策略9'],
axisLabel:{ //坐标轴字体颜色
color: '#9eaaba'
},
axisLine:{
lineStyle:{
color:"#e5e5e5"
}
},
axisTick:{ //y轴刻度线
show:false
},
splitLine:{ //网格
show: false,
}
},
yAxis :{
type : 'value',
axisLabel:{ //坐标轴字体颜色
color: '#9eaaba'
},
axisLine:{
show:false,
},
axisTick:{ //y轴刻度线
show:false
},
splitLine:{ //网格
show: true,
lineStyle:{
color:'#dadde4',
type:"dashed" //坐标网线类型
}
}
},
series:{
name:'',
type:'bar',
barWidth : '40%', //柱子宽度
itemStyle:{ //柱子颜色
borderWidth: 2,
borderColor: 'rgb(79, 116, 223)',
color:'rgba(79, 116, 223, .3)',
},
data:[320, 332, 301, 334, 390, 330, 320, 230, 156]
}
};
column4.setOption(option);
window.onresize = function() {
column4.resize();
}
})

236
public/demos/echarts/script/line1.js Executable file
View File

@ -0,0 +1,236 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var line2 = echarts.init(document.getElementById('line2'),null, {
width: 600,
height: 400
});
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
option = {
backgroundColor: '#fff',
title: {
text: '全国6月销售统计',
fontSize: 12,
fontWeight: 400,
left: 'center',
top: '5%'
},
legend: {
icon: 'circle',
top: '5%',
right: '5%',
itemWidth: 6,
itemGap: 20,
color: '#556677'
},
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
show: true,
backgroundColor: '#fff',
color: '#556677',
borderColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(0,0,0,0)',
shadowOffsetY: 0
},
lineStyle: {
width: 0
}
},
backgroundColor: '#fff',
color: '#5c6c7c',
padding: [10, 10],
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
},
grid: {
top: '15%'
},
xAxis: [{
type: 'category',
data: ['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾'],
axisLine: {
lineStyle: {
color: '#DCE2E8'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
color: '#556677',
// 默认x轴字体大小
fontSize: 12,
// margin:文字到x轴的距离
margin: 15
},
axisPointer: {
label: {
// padding: [11, 5, 7],
padding: [0, 0, 10, 0],
// 这里的margin和axisLabel的margin要一致!
margin: 15,
// 移入时的字体大小
fontSize: 12,
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#fff' // 0% 处的颜色
}, {
// offset: 0.9,
offset: 0.86,
color: '#fff' // 0% 处的颜色
}, {
offset: 0.86,
color: '#33c0cd' // 0% 处的颜色
}, {
offset: 1,
color: '#33c0cd' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
boundaryGap: false
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#DCE2E8'
}
},
axisLabel: {
color: '#556677',
},
splitLine: {
show: false
}
}, {
type: 'value',
position: 'right',
axisTick: {
show: false
},
axisLabel: {
color: '#556677',
formatter: '{value}'
},
axisLine: {
show: true,
lineStyle: {
color: '#DCE2E8'
}
},
splitLine: {
show: false
}
}],
series: [{
name: 'Adidas',
type: 'line',
data: [10, 10, 30, 12, 15, 3, 7],
symbolSize: 1,
symbol: 'circle',
smooth: true,
yAxisIndex: 0,
showSymbol: true,
lineStyle: {
width: 5,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#9effff'
},
{
offset: 1,
color: '#9E87FF'
}
]),
shadowColor: 'rgba(158,135,255, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
color: colorList[0],
borderColor: colorList[0]
}
}, {
name: 'Nike',
type: 'line',
data: [5, 12, 11, 14, 25, 16, 10],
symbolSize: 1,
symbol: 'circle',
smooth: true,
yAxisIndex: 0,
showSymbol: true,
lineStyle: {
width: 5,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
offset: 0,
color: '#73DD39'
},
{
offset: 1,
color: '#73DDFF'
}
]),
shadowColor: 'rgba(115,221,255, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
color: colorList[1],
borderColor: colorList[1]
}
},
{
name: '老北京布鞋',
type: 'line',
data: [150, 120, 170, 140, 500, 160, 110],
symbolSize: 1,
yAxisIndex: 1,
symbol: 'circle',
smooth: true,
showSymbol: true,
lineStyle: {
width: 5,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#fe9a'
},
{
offset: 1,
color: '#fe9a8b'
}
]),
shadowColor: 'rgba(254,154,139, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
color: colorList[2],
borderColor: colorList[2]
}
}
]
};
line2.setOption(option);
window.onresize = function() {
line2.resize();
}
})

148
public/demos/echarts/script/line2.js Executable file
View File

@ -0,0 +1,148 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var line1 = echarts.init(document.getElementById('line1'),null, {
width: 600,
height: 400
});
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
option = {
backgroundColor: '#fff',
tooltip: {
show: false
},
grid: {
top: '10%',
bottom: '6%',
left: '6%',
right: '6%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 10,
fontSize: 14,
color: 'rgba(#999)'
},
splitLine: {
show: true,
lineStyle: {
color: '#939ab6',
opacity: .15
}
},
data: ['10:00', '10:10', '10:10', '10:30', '10:40', '10:50']
},],
yAxis: [{
type: 'value',
offset: 15,
max: 100,
min: 0,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
margin: 10,
fontSize: 14,
color: '#999'
},
splitLine: {
show: false
}
}],
series: [{
name: '2',
type: 'line',
z: 3,
showSymbol: false,
smoothMonotone: 'x',
lineStyle: {
width: 3,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(59,102,246)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(118,237,252)' // 100% 处的颜色
}]
},
shadowBlur: 4,
shadowColor: 'rgba(69,126,247,.2)',
shadowOffsetY: 4
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(227,233,250,.9)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(248,251,252,.3)' // 100% 处的颜色
}]
}
},
smooth: true,
data: [20, 56, 17, 40, 68, 42]
},{
name: '1',
type: 'line',
showSymbol: false,
smoothMonotone: 'x',
lineStyle: {
width: 3,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,84,108)'
}, {
offset: 1,
color: 'rgba(252,140,118)'
}], false),
shadowBlur: 4,
shadowColor: 'rgba(253,121,128,.2)',
shadowOffsetY: 4
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,84,108,.15)'
}, {
offset: 1,
color: 'rgba(252,140,118,0)'
}], false),
},
smooth: true,
data: [20, 71, 8, 50, 57, 32]
}
]
};
line1.setOption(option);
window.onresize = function() {
line1.resize();
}
})

102
public/demos/echarts/script/line3.js Executable file
View File

@ -0,0 +1,102 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var line3 = echarts.init(document.getElementById('line3'),null, {
width: 600,
height: 400
});
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
option = {
backgroundColor: '#fff',
title: {
text: "告警数",
left: "18px",
top: "0",
color: "#999",
fontSize: 12,
fontWeight: '400'
},
color: ['#73A0FA', '#73DEB3', '#FFB761'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
},
lineStyle: {
type: 'dashed'
}
}
},
grid: {
left: '25',
right: '25',
bottom: '24',
top: '75',
containLabel: true
},
legend: {
data: ['上周', '本周'],
orient: 'horizontal',
icon: "rect",
show: true,
left: 20,
top: 25,
},
xAxis: {
type: 'category',
data: ['爱立信端局', '中兴端局', '爱立信HSS', '中兴HSS', '华为HSS', '华为智能网', '中兴VIMS'],
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
yAxis: {
type: 'value',
axisLabel: {
color: '#999',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
color: '#F3F4F4'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
series: [{
name: '上周',
type: 'line',
smooth: true,
data: [1800, 1000, 2000, 1000, 500, 100, 1200]
},
{
name: '本周',
type: 'line',
smooth: true,
data: [1700, 999, 1100, 899, 199, 99, 1000]
}
]
};
line3.setOption(option);
window.onresize = function() {
line3.resize();
}
})

167
public/demos/echarts/script/line4.js Executable file
View File

@ -0,0 +1,167 @@
layui.use(['echarts'], function() {
let echarts = layui.echarts;
var line4 = echarts.init(document.getElementById('line4'),null, {
width: 600,
height: 400
});
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
option = {
title: {
text: '用电量'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['2018', '2019']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,//坐标轴两边留白
data: ['12201', '12202', '12203','12204','12301','12302','12303','12304','12401', '12402', '12403','12404'],
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
// margin:15,
color: '#1B253A',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
formatter:function(params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 4; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName
},
//rotate:50,
},
axisTick:{//坐标轴刻度相关设置。
show: false,
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'#E5E9ED',
// opacity:0.2
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: true,
lineStyle: {
color: '#E5E9ED',
// opacity:0.1
}
}
},
yAxis: [
{
type: 'value',
splitNumber: 5,
axisLabel: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12
},
axisLine:{
show: false
},
axisTick:{
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#E5E9ED',
// opacity:0.1
}
}
}
],
series: [
{
name: '2018',
type: 'line',
itemStyle: {
color:'#3A84FF',
lineStyle: {
color: "#3A84FF",
width:1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(58,132,255,0)'
}, {
offset: 1,
color: 'rgba(58,132,255,0.35)'
}]),
}
},
data: [ 1, 2, 3, 3, 5, 6, 5, 3, 6, 5, 5, 4]
},
{
name: '2019',
type: 'line',
itemStyle: {
color:'rgba(255,80,124,1)',
lineStyle: {
color: "rgba(255,80,124,1)",
width:1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(255,80,124,0)'
}, {
offset: 1,
color: 'rgba(255,80,124,0.35)'
}]),
}
},
data: [9, 5,7,8,6,7,8,7,7,6,8,6]
}
]
};
line4.setOption(option);
window.onresize = function() {
line4.resize();
}
})