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
}]
};