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