142 lines
3.8 KiB
JavaScript
Executable File
142 lines
3.8 KiB
JavaScript
Executable File
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();
|
|
}
|
|
|
|
})
|