Js + echarts 漏斗图
Posted kellychen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 漏斗图的主要内容，如果未能解决你的问题，请参考以下文章