echarts 漏斗图转化率

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

在这个示例中，我们通过计算相邻数据的转化率，将其显示在漏斗图上方的标签中。具体来说，我们首先获取数据数组，然后循环计算相邻数据的转化率，并将转化率保存在一个新的数组中。最后，我们将转化率数组的内容加入标签中，以展示转化率的变化过程。