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