效果图
配置
javascript
{
grid: {
left: '8%', // 默认通常是 '5%' 或更多，改小它
top: '20%',
bottom: '10%', // 如果有标题，这里需要留空间；没标题可以设为 '3%'
containLabel: true // 【关键】设为 false，允许标签超出网格区域（需配合手动 margin）
},
xAxis: {
type: 'value',
min: -1,
max:350,
axisLine: {
show: false ,
lineStyle: { // 改变轴线的颜色
color: '#02396E',
width: 1,
type: 'solid'
}
},
splitLine: {
show: false, // 确保显示网格线
lineStyle: {
color: '#02396E ', // 【核心】设置所有网格线的颜色
width: 1, // 可选：设置线宽
type: 'solid' // 可选：'solid', 'dashed', 'dotted'
}
},
axisLabel: {
color: '#FFFFFF',
formatter: function (value) {
return ''; // 其他刻度不显示文字
}
}
},
yAxis: {
type: 'category',
axisLine: {
lineStyle: { // 改变轴线的颜色
color: '#FFFFFF',
width: 1,
type: 'solid'
}
},
axisLabel: {
color: '#FFFFFF',
},
data: ['Printer A', 'Printer B', 'Printer C', 'Printer D'],
},
series: [
{
data: [150, 212,300,150],
type: 'custom',
renderItem: function (params, api) {
// api.value(0) 数值
// api.value(1) 类别
// 当前数值的坐标
const valueCoord = api.coord([api.value(0), api.value(1)]);
// 数值为0时的坐标
const initialCoord = api.coord([0, api.value(1)]);
// 柱状图的长度 = 当前数值的x坐标 - 数值为0时的x坐标
const barLength = valueCoord[0] - initialCoord[0];
const gap = 2; // 格子间的间距
const height = 8; // 格子的高度
const width = 4; // 格子的宽度
// 格子的长度 = 格子的宽度 + 一个间距
// 格子的数量 ≈ 柱状图的长度 / 单个格子的长度
const barNum = Math.round(barLength / (width + gap));
const itemStyle = api.style();
//轨道层
const textLength = 60;
const maxBarLength = api.getWidth() - initialCoord[0] - textLength;
const track = {
type: 'rect',
shape: {
x: initialCoord[0],
y: valueCoord[1] - (height + 16) / 2, // 垂直居中
width: maxBarLength,
height: height + 16 // 比条纹高 4px，确保露出边缘
},
style: {
fill: 'rgba(100, 100, 100, 0.2)', // 调深一点颜色和透明度，确保可见
}
};
const rects = Array.from({ length: barNum }, (_, index) => {
// 第 index 个格子的x坐标 = 数值为0时的坐标 + 前面所有格子的长度和
const rectX = initialCoord[0] + (width + gap) * index;
// 2. 计算位置比例 (0 到 1)
var ratio = rectX / api.getWidth();
// 3. 使用颜色混合代替 lift
// 当 ratio=0 时，取 darkColor；当 ratio=1 时，取 lightColor
// 这样渐变过程完全保留色相，不会出现发白的情况
var finalColor = getGradientColorWithOpacity('#000000', '#66E1DF', ratio);
return {
type: 'rect',
enterFrom: {
// scaleX: 0,
// scaleY: 1,
style: { opacity: 0 },
},
shape: {
// x,y 是格子左上角的坐标
y: valueCoord[1] - height / 2.5,
x: rectX,
width,
height,
},
style: {
fill: finalColor,
shadowColor: '#66E1DF',
shadowBlur: 1, // 光晕大小
shadowOffsetX: 0,
shadowOffsetY: 0,
stroke: 'rgba(255, 255, 255, 0.1)',
lineWidth: 1,
// 稍微降低整体不透明度，制造朦胧感
opacity: 0.8,
},
};
});
// 预留 60px，在柱状图右边显示数值
const bgbarNum = Math.round(
(api.getWidth() - initialCoord[0] - textLength) / (width + gap)
);
const bgRects = Array.from({ length: bgbarNum }, (_, index) => {
return {
type: 'rect',
shape: {
y: valueCoord[1] - height / 2,
x: initialCoord[0] + (width + gap) * index,
width,
height,
},
style: {
fill: 'rgba(204, 204, 204,0.3)',
},
};
});
return {
type: 'group',
x: 0,
y: 0,
children: [track,...bgRects, ...rects],
};
},
}
]
}