Js + echarts Funnel Chart

var drawfunnelchart=function (Chartid,titletext, Dataarr,namearr,gaparr,minvalue) {
var option = {
Title: {
Text:titletext,
Subtext: "
},
ToolTip: {
Trigger: ' Item ',
Formatter: "{A} <br/>{b}: {C}"
},
Legend: {
Data:namearr
},
Calculable:true,
Color: [' #3C8DBC ', ' #B1D1E4 '],
Series: [
{
Name: ' Funnel Chart ',//Multiple objects overlay, generate one icon for multiple labels
Type: ' Funnel ',
Left: ' 20% ',
Top:60,
X2:80,
Bottom:60,
Width: ' 60% ',
Min:minvalue,
/* max:maxvalue,*/
MinSize: ' 20% ',
MaxSize: "100%",
Sort: ' None ',
Funnelalign: ' Center ',
Gap:2,
Label: {
Normal: {
Show:true,
Position: ' Center ',
Formatter:function (data) {
Return Data.value
},
Rich: {
A: {
Color: ' #999 ',
Lineheight:18,
Align: ' center '
},
HR: {
BorderColor: ' #aaa ',
Width: ' 100% ',
borderwidth:0.5,
height:0
},
B: {
Color: ' #000 ',
Fontsize:12,
Lineheight:33
},
Per: {
Color: ' #000 ',
/*backgroundcolor: ' #fff ', */
padding: [2, 4],
Borderradius:2
}
}
},
Emphasis: {
TextStyle: {
Fontsize:12
}
}
},
Labelline: {
Normal: {
Length:10,
LineStyle: {
Width:1,
Type: ' Solid '
}
}
},
ItemStyle: {
Normal: {
BorderColor: ' #fff ',
Borderwidth:1
}
},
Data:dataarr
},
{
Name: ' Funnel Chart ',
Type: ' Funnel ',
Left: ' 20% ',
Top:60,
X2:80,
Bottom:60,
Width: ' 60% ',
Height: {totalheight}-y-y2,
Min:minvalue,
/* max:maxvalue,*/
MinSize: "20%",
MaxSize: "100%",
Sort: ' None ',//unordered, according to the order of the given data
Funnelalign: ' Center ',
Gap:2,
Label: {
Normal: {
Show:true,
Position: ' Left ',
Formatter:function (data) {//Multiple object overlays, generating an icon for multiple labels

if (Data.dataindex <= gaparr.length-1) {
Return ' {per| conversion rate: ' + Gaparr[data.dataindex] + '} ';
//}
},
Rich: {
Per: {
Color: ' #000 ',/* ' #3CABE7 ', */
BackgroundColor: ' #fff ',
padding: [2, 4],
Borderradius:2
}
}
},
Emphasis: {
TextStyle: {
Fontsize:12
}
}
},
Labelline: {
Normal: {
Length:10,
LineStyle: {
Width:1,
Type: ' Solid '
}
}
},
ItemStyle: {
Normal: {
BorderColor: ' #fff ',
Borderwidth:1
}
},
Data:dataarr
},
{
Name: ' Funnel Chart ',
Type: ' Funnel ',
Left: ' 20% ',
Top:60,
X2:80,
Bottom:60,
Width: ' 60% ',
Height: {totalheight}-y-y2,
Min:minvalue,
/*max:maxvalue,*/
MinSize: "20%",
MaxSize: "100%",
Sort: ' None ',
Funnelalign: ' Center ',
Gap:2,
Label: {
Normal: {
Show:true,
Position: ' Right ',
Formatter:function (data) {//Multiple object overlays, generating an icon for multiple labels

Return ' {b| ' + data.name + '} '
},
Rich: {
B: {
Color: ' #000 ',
Fontsize:12,
Lineheight:33
},

}
},
Emphasis: {
TextStyle: {
Fontsize:12
}
}
},
Labelline: {
Normal: {
Length:10,
LineStyle: {
Width:1,
Type: ' Solid '
}
}
},
ItemStyle: {
Normal: {
BorderColor: ' #fff ',
Borderwidth:1
}
},
Data:dataarr
},
]
};

var mychart=echarts.init (document.getElementById (Chartid));
mychart.setoption (option);
Window.addeventlistener (' resize ', mychart.resize)
};

Js + echarts Funnel Chart