试了labelLine的length属性,不能使用百分比,只能使用数字,效果有些差强人意,只能满足在有限的情况,而markLine就不同了,如下所示:
var weatherIcons = {
'Sunny': ROOT_PATH + 'data/asset/img/weather/sunny_128.png',
'Cloudy': ROOT_PATH + 'data/asset/img/weather/cloudy_128.png',
'Showers': ROOT_PATH + 'data/asset/img/weather/showers_128.png'
};
var colors = ['rgba(142,12,1,1)','rgba(21,255,12,1)','rgba(166,21,221,1)','rgba(12,166,251,1)','rgba(21,281,162,1)'];
option = {
title: {
text: '天气情况统计',
subtext: '虚构数据',
left: 'center'
},
tooltip : {
trigger: 'item',
show: false
},
legend: {
// orient: 'vertical',
// top: 'middle',
// bottom: 10,
left: 'center',
data: ['西凉', '益州','兖州','荆州','幽州']
},
series : [
{
name:'漏斗图',
type:'funnel',
zlevel: 1,
left: '5%',
right: '5%',
top: '10%',
// x2: 80,
bottom: '10%',
width: '80%',
// height: {totalHeight} - y - y2,
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'ascending',
funnelAlign: 'center',
gap: 0,
markLine: {
symbol: 'none',
zlevel: 0,
data: [
[{x:'50%',y:'18%'},{x:'90%',y:'18%',value:20,
lineStyle:{color:colors[0],type: 'dotted'},
emphasis: {
label: {
fontSize: 20,
position: 'left',
},
lineStyle: {
type: 'dotted'
},
},
}],
[{x:'50%',y:'34%'},{x:'90%',y:'34%',value:40,lineStyle:{color:colors[1]}}],
[{x:'50%',y:'50%'},{x:'90%',y:'50%',value:60,lineStyle:{color:colors[2]}}],
[{x:'50%',y:'66%'},{x:'90%',y:'66%',value:80,lineStyle:{color:colors[3]}}],
[{x:'50%',y:'82%'},{x:'90%',y:'82%',value:100,lineStyle:{color:colors[4]}}],
]
},
label: {
show: true,
position: 'left',
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: 'pink',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Sunny
}
},
Cloudy: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
Showers: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Showers
}
},
weatherHead: {
color: '#333',
height: 24,
align: 'left'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
value: {
width: 20,
padding: [0, 20, 0, 30],
align: 'left'
},
valueHead: {
color: '#333',
width: 20,
padding: [0, 20, 0, 30],
align: 'center'
},
rate: {
width: 40,
align: 'right',
padding: [0, 10, 0, 0]
},
rateHead: {
color: '#333',
width: 40,
align: 'center',
padding: [0, 10, 0, 0]
}
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 0,
},
emphasis: {
label: {
fontSize: 20,
position: 'left',
},
lineStyle: {
type: 'dotted'
},
},
data:[
{
value:20,
name: '幽州',
label: {
normal: {
formatter: [
'{title|{b}}{abg|}',
' {weatherHead|友军}{valueHead|天军}{rateHead|占比}',
'{hr|}',
' {Sunny|}{value|202}{rate|55.3%}',
' {Cloudy|}{value|142}{rate|38.9%}',
' {Showers|}{value|21}{rate|5.8%}'
].join('\n'),
backgroundColor: '#eee',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
distance: 10000
}
},
labelLine: {
length: 100,
lineStyle: {
width: 1,
type: 'dotted',
},
},
emphasis :{
label: {
show: true,
},
labelLine: {
length: 100,
lineStyle: {
width: 1,
type: 'dashed',
},
},
},
itemStyle :{
color: colors[0]
}
},
{
value:40, name: '荆州',
itemStyle :{
color: colors[1]
}
},
{value:60, name: '兖州',
itemStyle :{
color: colors[2]
}
},
{value:80, name: '益州',
itemStyle :{
color: colors[3]
}
},
{
value:100, name: '西凉',
itemStyle :{
color: colors[4]
}
}
],
},
]
};
不过最好让UI将漏斗图每一层切图,我们就只负责文字布局就行了