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)};

转载于:https://www.cnblogs.com/KellyChen/p/9520967.html