statics file change
This commit is contained in:
141
assets/script/column1.js
Executable file
141
assets/script/column1.js
Executable file
@@ -0,0 +1,141 @@
|
||||
layui.use(['echarts'], function () {
|
||||
let echarts = layui.echarts;
|
||||
var column1 = echarts.init(document.getElementById('column1'), null, {
|
||||
width: 500,
|
||||
height: 400
|
||||
});
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
color: '#fff',
|
||||
fontSize: '26'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '0%',
|
||||
right: '1%',
|
||||
data: ['收入金额', '支出金额'],
|
||||
fontSize: 12,
|
||||
color: '#808080',
|
||||
icon: 'rect'
|
||||
},
|
||||
grid: {
|
||||
// show: true,
|
||||
top: 60,
|
||||
left: 50,
|
||||
bottom: 50,
|
||||
right: 50,
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
// axisLabel: {
|
||||
// color: '#4D4D4D',
|
||||
// fontSize: 14,
|
||||
// margin: 20,
|
||||
// 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,
|
||||
with: 1,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#808080',
|
||||
fontSize: 12,
|
||||
margin: 5
|
||||
},
|
||||
splitLine: {
|
||||
show: true
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
{
|
||||
name: '收入金额',
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 14,
|
||||
color: '#3DC3F0',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
barMaxWidth: 30,
|
||||
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]
|
||||
},
|
||||
{
|
||||
name: '支出金额',
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 14,
|
||||
color: '#3D8BF0',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
barMaxWidth: 30,
|
||||
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, 780]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
column1.setOption(option);
|
||||
|
||||
window.onresize = function () {
|
||||
column1.resize();
|
||||
}
|
||||
|
||||
})
|
||||
120
assets/script/column3.js
Executable file
120
assets/script/column3.js
Executable file
@@ -0,0 +1,120 @@
|
||||
layui.use(['echarts'], function () {
|
||||
let echarts = layui.echarts;
|
||||
var column3 = echarts.init(document.getElementById('column3'), null, {
|
||||
width: 500,
|
||||
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
assets/script/column4.js
Executable file
84
assets/script/column4.js
Executable 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
assets/script/line1.js
Executable file
236
assets/script/line1.js
Executable 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
assets/script/line2.js
Executable file
148
assets/script/line2.js
Executable 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
assets/script/line3.js
Executable file
102
assets/script/line3.js
Executable 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
assets/script/line4.js
Executable file
167
assets/script/line4.js
Executable 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();
|
||||
}
|
||||
|
||||
})
|
||||
72
assets/script/project_expense.js
Executable file
72
assets/script/project_expense.js
Executable file
@@ -0,0 +1,72 @@
|
||||
layui.use(['echarts'], function () {
|
||||
let echarts = layui.echarts;
|
||||
var column2 = echarts.init(document.getElementById('project_expense'));
|
||||
|
||||
option = {
|
||||
// backgroundColor: '#ffffff',
|
||||
title: {
|
||||
text: '支出分布',
|
||||
left: 'center',
|
||||
top: 2,
|
||||
fontSize: 15,
|
||||
textStyle: {
|
||||
color: '#666666',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
color: ['#fed46b', '#2194ff',],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
// legend: {
|
||||
// left: 'center',
|
||||
// top: 'bottom',
|
||||
// data: ['场地费', '车辆费', '顾问费', '劳务费用', '火车费', '其他']
|
||||
// },
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['场地费', '车辆费', '顾问费', '劳务费用', '火车费', '其他'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
name: '单位：元',
|
||||
type: 'value'
|
||||
}],
|
||||
barMaxWidth: '30',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
// formatter: function (params) {
|
||||
// return params.value + '%'
|
||||
// }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: [10, 52, 90, 70, 90, 70],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f89588'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
column2.setOption(option);
|
||||
|
||||
window.onresize = function () {
|
||||
column2.resize();
|
||||
}
|
||||
|
||||
})
|
||||
71
assets/script/project_income.js
Executable file
71
assets/script/project_income.js
Executable file
@@ -0,0 +1,71 @@
|
||||
layui.use(['echarts'], function () {
|
||||
let echarts = layui.echarts;
|
||||
var column1 = echarts.init(document.getElementById('project_income'));
|
||||
option = {
|
||||
title: {
|
||||
text: '收入分布',
|
||||
orient: 'vertical',
|
||||
//top: 2,
|
||||
fontSize: 15,
|
||||
textStyle: {
|
||||
color: '#666666',
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
// subtext: 'Fake Data',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
top: 'bottom',
|
||||
data: ['劳务费用', '顾问费', '场地费', '车辆费', '其他']
|
||||
},
|
||||
color: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86', '#9987ce', '#63b2ee', '#76da91'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: 1048, name: '劳务费用' },
|
||||
{ value: 735, name: '顾问费' },
|
||||
{ value: 580, name: '场地费' },
|
||||
{ value: 484, name: '车辆费' },
|
||||
{ value: 300, name: '其他' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666666',
|
||||
},
|
||||
normal: {
|
||||
// formatter: '{b}:{c}: ({d}%)',
|
||||
formatter: '{c} ({d}%)',
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
color: '#666666',
|
||||
}
|
||||
},
|
||||
// formatter: function (params) {
|
||||
// var total = params.data.value;
|
||||
// return params.value + ' (' + total + '%)'
|
||||
// }
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
column1.setOption(option);
|
||||
window.onresize = function () {
|
||||
column1.resize();
|
||||
}
|
||||
})
|
||||
79
assets/script/project_income_expense.js
Executable file
79
assets/script/project_income_expense.js
Executable file
@@ -0,0 +1,79 @@
|
||||
layui.use(['echarts'], function () {
|
||||
let echarts = layui.echarts;
|
||||
var column2 = echarts.init(document.getElementById('project_income_expense'));
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: '项目收支情况',
|
||||
left: 'center',
|
||||
top: 2,
|
||||
fontSize: 15,
|
||||
textStyle: {
|
||||
color: '#666666',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
color: ['#fed46b', '#2194ff',],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
top: 'bottom',
|
||||
data: ['支出金额', '收入金额']
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['阿里云', '上海帆软', '简道云', '腾讯云', '华为云', '金山云', '腾讯云'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
name: '单位：元',
|
||||
type: 'value'
|
||||
}],
|
||||
barMaxWidth: '30',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '支出金额',
|
||||
type: 'bar',
|
||||
data: [10, 52, 90, 70, 90, 70, 90],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f89588'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '收入金额',
|
||||
type: 'bar',
|
||||
data: [90, 52, 90, 80, 90, 70, 90],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#76da91'
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
column2.setOption(option);
|
||||
|
||||
window.onresize = function () {
|
||||
column2.resize();
|
||||
}
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user