把以下代碼複製粘貼到:https://gallery.echartsjs.com/editor.html 可以預覽看到效果圖。
option = {
color: ['#298DFF', ' #33CA66', '#61a0a8'],
backgroundColor: '#FFFFFF',
barWidth: 10,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
left: '0%',
icon: 'circle',
textStyle: { //圖例文字的樣式
color: '#8C8C8C',
fontSize: 12
},
data: ['圖例1', '圖例2']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false // 去除網格線
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#BFBFBF', // 座標線的顏色
width: '1'
}
},
axisLabel: {
textStyle: {
color: '#595959' //座標值的顏色
},
formatter: function (params) {
var newParamsName = ''
var paramsNameNumber = params.length //總字數
var provideNumber = 5 //一行顯示幾個字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = ''
var start = p * provideNumber
var end = start + provideNumber
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber)
} else {
tempStr = params.substring(start, end) + '\n'
}
newParamsName += tempStr
}
} else {
newParamsName = params
}
return newParamsName
}
},
boundaryGap: [0, 0.01],
data: ['事業部1', '事業部2', '事業部3', '事業部4', '事業部5']
},
yAxis: {
type: 'value',
splitLine: {
// show: false // 去除網格線
lineStyle:{
color: '#E8E8E8',
type: 'dashed' //設置間隔線爲虛線
}
},
axisTick: {
show: false //小橫線
},
splitArea: {
// show: true // 保留網格區域
},
axisLine: {
show: false, // 去除縱向邊框線
lineStyle: {
type: 'solid',
color: '#BFBFBF', // 座標線的顏色
width: '1'
}
},
axisLabel: {
textStyle: {
color: '#595959' //座標值的顏色
}
}
},
series: [
{
name: '圖例1',
type: 'bar',
label: {
show: false,
position: 'right', // 位置
color: '#298DFF',
fontSize: 12,
fontWeight: 'normal', // 加粗
distance: 5, // 距離
offset: [0, 1] // 偏移距離[橫向,縱向]
}, // 柱子上方的數值
data: [175, 170, 330, 70, 250]
},
{
name: '圖例2',
type: 'bar',
label: {
show: false,
position: 'right', // 位置
color: '#33CA66',
fontSize: 12,
fontWeight: 'normal', // 加粗
distance: 5, // 距離
offset: [0, 2] // 偏移距離[橫向,縱向]
}, // 柱子右方的數值
data: [140, 240, 270, 120, 220]
}
]
}