先看效果
整体思路就是用graphic这个属性去画线 表格里的值用的定位写的
option = {
tooltip:{
trigger:'axis',
axisPointer:{
type:'shadow'
}
},
itemStyle:{
borderRadius:10,
borderColor:'#FFF',
borderWidth:1
},
legend:[
{
left:10,
bottom:5,
itemWidth:12,
origin:'vertical',
textStyle:{
color:'black',
fontSize:14
}
}
],
grid:{
top:0,
left:'3%',
right:'4%',
bottom:'19%',
containLabel:true
},
xAxis:{
max:'100',
type:'value',
axisLabel:{
formatter:'{value}'+'%'
}
},
yAxis:{
type:'category',
data:datax,
},
series:[
{
name:'name',
type:'bar',
stack:'total',
itemStyle:{
color:'#7ec3fc',
},
label:{
show:true,
position:'right',
formatter:function(val){
return val.value+'%'
}
},
tooltip:{
valueFormatter:function(value){
return value+'%'
}
},
data:dataVal
}
],
graphic:[
{
type:'line',
bottom:60,//线条距离底部的距离
right:0,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:882,//线条长度
y2:0
}
},
{
type:'line',
bottom:30,//线条距离底部的距离
right:0,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:990,//线条长度
y2:0
}
},
{
type:'line',
bottom:30,//线条距离底部的距离
right:0,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:990,//线条长度
y2:0
}
},
{
type:'line',
bottom:0,//线条距离底部的距离
right:0,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:990,//线条长度
y2:0
}
},
{
type:'line',
bottom:0,//线条距离底部的距离
right:0,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:0,//线条长度
y2:30
}
}, {
type:'line',
bottom:0,//线条距离底部的距离
right:109,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:0,//线条长度
y2:60
},
},
{
type:'line',
bottom:0,//线条距离底部的距离
right:250,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:0,//线条长度
y2:60
}
}, {
type:'line',
bottom:0,//线条距离底部的距离
right:400,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:0,//线条长度
y2:60
}
}, {
type:'line',
bottom:0,//线条距离底部的距离
right:550,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:0,//线条长度
y2:60
}
}, {
type:'line',
bottom:0,//线条距离底部的距离
right:700,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:0,//线条长度
y2:60
}
}, {
type:'line',
bottom:0,//线条距离底部的距离
right:850,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:0,//线条长度
y2:60
}
}, {
type:'line',
bottom:0,//线条距离底部的距离
right:990,//控制线路右边的距离
style:{
stroke:'rgb(100,112,121)',
},
shape:{
x1:0,
y1:0,
x2:0,//线条长度
y2:60
}
},
]
};