echarts实现漏斗转化率图表效果

1.在用echarts实现图表的旅途中遇到这样一个需求,用柱图展示漏斗转化效果,下图展示:

别的不多说了,就说解决方式吧,用的series中的markpoint来实现。

option.series[0].markPoint.data.push({
name: "test",
value: 123,
xAxis: i,
y: 20
});
偏移量啥的就可以自己设置箭头的位置。

 

转载于:https://www.cnblogs.com/caihe/p/5945223.html

ECharts漏斗图可以很好地展示转化率。你可以使用ECharts提供的toolbox中的dataView功能,将漏斗图转化为数据表格,从而计算转化率。或者你可以直接在代码中计算转化率,并将其显示在漏斗图上方的标签中。以下是一个漏斗图计算转化率的示例代码: ``` option = { title: { text: '漏斗图示例', subtext: '数据来自网络' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c}%" }, toolbox: { show: true, feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, legend: { data: ['展现','点击','访问','咨询','订单'] }, series: [ { name:'漏斗图', type:'funnel', left: '10%', width: '80%', label: { normal: { formatter: '{b}' }, emphasis: { position:'inside', formatter: '{b}: {c}%' } }, labelLine: { normal: { show: false } }, itemStyle: { normal: { opacity: 0.7 } }, data: [ {value: 60, name: '访问'}, {value: 40, name: '咨询'}, {value: 20, name: '订单'}, {value: 80, name: '点击'}, {value: 100, name: '展现'} ] } ] }; // 计算转化率 var data = option.series[0].data; var conversionRate = []; for (var i = 0; i < data.length - 1; i++) { conversionRate.push((data[i+1].value/data[i].value * 100).toFixed(2) + '%'); } conversionRate.push('-'); option.series[0].label.emphasis.formatter = '{b}: {c}%, 转化率:' + conversionRate.join(' -> '); // 在页面中显示漏斗图 var myChart = echarts.init(document.getElementById('myChart')); myChart.setOption(option); ``` 在这个示例中,我们通过计算相邻数据的转化率,将其显示在漏斗图上方的标签中。具体来说,我们首先获取数据数组,然后循环计算相邻数据的转化率,并将转化率保存在一个新的数组中。最后,我们将转化率数组的内容加入标签中,以展示转化率的变化过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值