前言
产品需求。
实现方案
延长坐标轴刻度线，作为表格的竖线。配置多个xAxis，通过position定位到底部，设置offset使横坐标轴向下偏移，来作为表格的横线。
效果图
如下。
实现代码
option = {
grid: {
bottom: 81 // 调整图表容器距离底部的距离，给表格腾空间
},
legend: { // 图例调整位置，对应表格的相应行
data: ['item1', 'item2', 'item3'],
bottom: 0,
left: 0,
orient: 'vertical',
itemGap: 5
},
xAxis: [
{
data: ['x1', 'x2', 'x3', 'x4', 'x5'],
axisLabel: {
interval: 0
},
axisTick: {
length: 80 // 延长坐标轴刻度的长度，用作表格竖线
}
},
{
data: [1,1,1,1,1],
position: 'bottom', // 将坐标轴定位到底部
offset: 20, // 设置位置偏移
axisTick: {
show: false,
}
},
{
data: [2,2,2,2,2],
position: 'bottom',
offset: 40,
axisTick: {
show: false,
}
},
{
data: [3,3,3,3,3],
position: 'bottom',
offset: 60,
axisTick: {
show: false,
}
},
{// 最后加一个无data的项，作为表格最底部的线
position: 'bottom',
offset: 80,
axisTick: {
show: false,
}
}
],
yAxis: {},
series: [
{
name: 'item1',
type: 'bar',
data: [1,1,1,1,1]
},
{
name: 'item2',
type: 'bar',
data: [2,2,2,2,2]
},
{
name: 'item3',
type: 'bar',
data: [3,3,3,3,3]
}
]
};
