效果
initChart1() {
// 漏斗图
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
name:'一类服务',
type:'funnel',
left: '7%',
top: 20,
bottom: 50,
width: '40%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'ascending',
gap: 1,
itemStyle: {
borderWidth: 0
},
data: [
{ value: 20,
name: '2005单',
itemStyle:{color:'#a430ff'},
label:{position:'right',color:'black',padding:[3,0,30,4],
formatter: function(data) { //给每条数据添加文字
let a = '2005单';
let b = '亲情通话';
return '{a|' + a + '}'+'{b|' + b + '}';
},
rich: {
a: {
color: '#fff',
fontSize:16,
},
b: {
color: '#5b9bbb',
fontSize:14,
}
},
},labelLine:{
show:true,
length:100,
lineStyle:{
color:'#5e97b5',
shadowColor:'#5e97b5',
shadowOffsetX:100
}
}
},
{ value: 40,
name: '1003单',
itemStyle:{color:'#eff425'},
label:{position:'right',color:'black',padding:[3,0,30,4],
formatter: function(data) {
let a = '2005单';
let b = '亲情通话';
return '{a|' + a + '}'+'{b|' + b + '}';
},
rich: {
a: {
color: '#fff',
fontSize:16,
},
b: {
color: '#5b9bbb',
fontSize:14,
}
},
},
labelLine:{
show:true,
length:100,
lineStyle:{
color:'#5e97b5',
shadowColor:'#5e97b5',
shadowOffsetX:100
}
}
},
{ value: 60,
name: '568单',
itemStyle:{color:'#4cfdf7'},
label:{position:'right',color:'black',padding:[3,0,30,4],
formatter: function(data) {
let a = '2005单';
let b = '亲情通话';
return '{a|' + a + '}'+'{b|' + b + '}';
},
rich: {
a: {
color: '#fff',
fontSize:16,
},
b: {
color: '#5b9bbb',
fontSize:14,
}
},
},
labelLine:{
show:true,
length:100,
lineStyle:{
color:'#5e97b5',
shadowColor:'#5e97b5',
shadowOffsetX:100
}
}
},
{ value: 80,
name: '268单',
itemStyle:{color:'#2a72eb'},
label:{position:'right',color:'black',padding:[3,0,30,4],
formatter: function(data) {
let a = '2005单';
let b = '亲情通话';
return '{a|' + a + '}'+'{b|' + b + '}';
},
rich: {
a: {
color: '#fff',
fontSize:16,
},
b: {
color: '#5b9bbb',
fontSize:14,
}
},
},
labelLine:{
show:true,
length:100,
lineStyle:{
color:'#5e97b5',
shadowColor:'#5e97b5',
shadowOffsetX:100
}
}
},
]
}
]
};
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(
document.getElementById("main1"),
"walden"
);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
