Js + echarts 漏斗图

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:‘漏斗图‘,　　　　　　//多个对象叠加，生成一个图标多个label
 ???????????????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:‘漏斗图‘,
 ???????????????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: ‘left‘,
 ???????????????????????formatter: function(data){　　//多个对象叠加，生成一个图标多个label

 ???????????????????????????//if(data.dataIndex <= gapArr.length-1){
 ???????????????????????????????return ‘{per|转化率：‘ + 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:‘漏斗图‘,
 ???????????????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){//多个对象叠加，生成一个图标多个label

 ???????????????????????????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 漏斗图

原文地址：https://www.cnblogs.com/KellyChen/p/9520967.html