需求如图:
方法一:创建一个div,利用绝对定位定位到需要的位置
创建一个容器,将漏斗图和一个新div放到里面,然后将容器定位设置成`relative`,div的定位设为`absolute`。连接线用`hr`,重写样式。连接线宽度是一样的,所以标签能对齐。
这个方法的缺点是间距不太准确。
.chartContainer {
position: relative;
.label {
position: absolute;
top: 60px;
right: 160px;
div {
padding: 18px 0;
.hori-line {
display: inline-block;
width: 200px; // 指定固定宽度
border-top: solid #e0e0e0 1px;
vertical-align: middle;
margin-right: 2px;
}
}
}
}
方法二:利用两个漏斗图,让其中一个不显示label
option = {
series: [
{
name:'漏斗图',
type:'funnel',
left: 0,
top: 60,
bottom: 60,
width: '60%',
min: 0,
max: 100,
minSize: '0%',
maxSize: 0, // 设为 0,表示最大宽度为0,这样此层只会显示label
//并且由于宽度为0,漏斗图是居中显示的,所以label线条的起始位置都是中间
sort: 'descending',
z: 1,// 控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
gap: 2,
label: {
show: true,
position: 'right'
},
labelLine: {
length: 400, // label拉线的长度根据自己的场景进行设置即可
lineStyle: {
width: 1,
type: 'solid'
}
},
data: []
},
{
name:'漏斗图label',
type:'funnel',
left: 0,
top: 60,
bottom: 60,
width: '60%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: false,
},
data: []
}
]
};
两个漏斗图的data值是一样的。