正常情况下,盒须图是有5条线的,但是实际产品场景是需要6条线,看了下echarts官网,没看到可配置的地方,只能自己骚操作了,效果图如下:
重点:用两条x轴,第6条线挂在第二条x轴上,且第二条x轴不展示。
option = {
...,
xAxis: [{
type: 'category',
data: ['Class1', 'Class2', 'Class3']
}, {
type: 'category',
show: false
}],
series: [
{
name: 'boxplot1',
type: 'boxplot',
data: [
[210, 230, 250, 390, 434],
[70, 80, 120, 150, 200],
[200, 210, 280, 300, 360]
],
xAxisIndex: 0,
emphasis: false, // 重点
z: 1
},
{
name: 'boxplot2',
type: 'boxplot',
data: [270, 140, 290],
xAxisIndex: 1,
emphasis: false,
z: 2 // 重点
}
]
};
注:
1)hover高亮的效果得去掉,要不然会出现hover时,只展示5条线的情况;
2)得给第6条线的层级调高,要不然hover的时候,第6条线直接无了。