option中data的值要根据业务场景修改
option = {
//设置鼠标靠近显示label
tooltip: {},
textStyle: {
color: '#1BB3E3'
},
xAxis: {
type: 'category',
// x座标轴
axisLine: {
show: true,
// 设置座标轴颜色
lineStyle: {
color: '#3C7DB9'
}
},
// 座标轴刻度相关设置。
axisTick: {
show: false
},
boundaryGap: true,
// 刻度标签与轴线之间的距离。
axisLabel: {
margin: 20
},
data: yearDataList.xaxis,
},
yAxis: {
type: 'value',
// 座标轴轴线相关设置。
axisLine: {
show: false
},
// 座标轴刻度相关设置。
axisTick: {
show: false
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#193F69']
}
}
},
series: [{
//data值要根据业务场景修改
data: yearDataList.yaxis,
type: 'bar',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#15D1EE' // 0% 处的颜色
}, {
offset: 1, color: '#0E85F6' // 100% 处的颜色#0E85F6
}],
global: false // 缺省为 false
},
// 设置柱子宽度
barWidth: '20%',
itemStyle: {
// (顺时针左上,右上,右下,左下)柱子样式
barBorderRadius: [50, 50, 0, 0]
},
showSymbol: true
}]
};