效果图
分析
官方文档中有写可通过splitLine来对 “坐标轴在 grid 区域中的分隔线” 进行配置,但当配置完成后会发现只有表图区域内的Y周分割线变成了虚线。X轴还是实线,再次查阅文档发现并没有可以对轴线类型进行配置的地方
这时候我们秩序将X轴隐藏掉即可
实现代码
option: {
tooltip: {
trigger: 'axis',
confine: true,
},
grid: {
left: '2%',
right: '5%',
bottom: '0%',
top: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false, // 坐标轴两边留白策略
axisLine: { // 坐标轴轴线
show: false,
},
axisTick: { // 坐标轴刻度
show: false
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
show: false
},
axisLabel: { // 坐标轴刻度标签
show: false
},
data: []
}
],
yAxis: [
{
type: 'value',
splitLine: { // 坐标轴在 grid 区域中的分隔线
lineStyle: { // 分隔线
type: 'dashed', // 线的类型
color: '#33638f' // 分隔线颜色
}
},
axisLabel: {
show: true,
color: '#ffffff'
},
}
]
},