echart 版本: 5.4.0
类目轴-> type: category
值轴 -> type: value
1、如果让两个bar重合
series.barGap: ‘-100%’ -> 必须放在最后一个上
series.zlevel: 2 -> 上面的一个设置
2、类目轴得刻度,标签和bar在一条线上
yAxis.boundaryGap = true && yAxis.axisTick.alignWithLabel = true && 类目轴
3、Bar上得值在bar很短得时候做兼容,这里做的是隐藏
完整配置:
const options = {
legend: {
itemWidth: 23,
itemHeight: 14,
padding: 35,
itemGap: 60,
textStyle: {
color: '#fff',
fontSize: 16,
padding: 10
},
selectedMode: false
},
grid: {
left: "3%",
right: "3%",
bottom: "3%",
containLabel: true,
},
xAxis: {
show: true,
type: 'value',
min: 0,
max: 100,
splitNumber: 10, // value轴上刻度分割
splitLine: { // 背景分割竖线
show: true,
lineStyle: {
color: 'rgba(142, 227, 255, .3)'
},
},
axisLine: {
show: true,
symbol: ['none', 'arrow'], // x轴末端箭头,'arrow'->两端都有
symbolSize: [10, 10], // 箭头大小
lineStyle: {
width: 1,
color: 'rgba(142, 227, 255, 1)', // x坐标线
},
},
axisLabel: {
show: true,
margin: 20,
formatter: '{value}%',
textStyle: {
fontSize: 12,
color: 'rgba(166, 205, 255, 1)', // x坐标文字
},
},
axisTick: { // 设置x轴刻度
show: true,
},
axisPointer: { // 鼠标经过时得
show: true,
type: 'shadow',
label: {
color: '#fff'
},
shadowStyle: {}, // type === 'shadow'
lineStyle: {}, // type === 'line'
}
},
yAxis: {
type: 'category',
boundaryGap: true, // category轴的柱子是否在刻度上 false->是
data: dataList.map((item) => `${item.areaName}`), // 在category中有效
splitLine: { // 背景分割横线
show: true,
lineStyle: {
color: 'rgba(142, 227, 255, .3)',
},
},
axisLabel: { // 刻度文字
margin: 10, // 文字与轴得间距
textStyle: {
fontSize: 12,
color: 'rgba(166, 205, 255, 1)'
},
},
axisLine: { // y坐标线
show: true,
lineStyle: {
color: 'rgba(142, 227, 255, 1)'
},
},
axisTick: { // y轴刻度
show: true,
alignWithLabel: true, // 刻度和标签对其 boundaryGap=true & category
length: 5,
lineStyle: {}
},
axisPointer: { // 鼠标经过时得
show: true,
type: 'shadow',
label: {
color: '#fff'
},
shadowStyle: {}, // type === 'shadow'
lineStyle: {}, // type === 'line'
}
},
series: [
{
type: 'bar',
name: '占用',
barWidth,
zlevel: 2,
data: dataList.map(function (item) {
return {
...item,
value: item.fullRate,
}
}),
label: {
show: true,
position: 'inside',
align: 'center',
verticalAlign: 'middle',
lineHeight: 16,
formatter: function (params) {
const { data: { value } } = params
const rate = value < 10 ? '' : `${params.data.value}%`
return rate
},
color: '#fff',
fontSize: 12,
},
itemStyle: { // 设置柱形
borderRadius: 10,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#02e1a1'
}, {
offset: 0.8, color: '#05a778'
}],
global: false
}
},
},
{
type: 'bar',
name: '空闲',
barWidth: barWidth,
barGap: '-100%',
data: dataList.map(function (item) {
return {
...item,
value: 100,
};
}),
label: {
show: true,
position: ['94%', '60%'],
align: 'center',
verticalAlign: 'middle',
lineHeight: 16,
formatter: function (params) {
const { data: { freeRate } } = params
const rate = freeRate < 11 ? '' : `${params.data.freeRate}%`
return rate
},
color: '#fff',
fontSize: 12,
},
itemStyle: {
borderRadius: 10,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#01bfff'
}, {
offset: 0.2, color: '#74cbff'
}],
global: false
}
}
},
],
};