Echarts---绘制漏斗图或金字塔

5,291 阅读3分钟

漏斗图(Funnel)或金字塔是一个倒(正)三角形的条形图,适用于业务流程比较规范、周期较长、环节较多的流程分析。 漏斗图也是常用的BI类图表之一,通过漏斗图或金字塔对各环节业务数据进行比较,不仅能够直观地发现和说明问题,而且可以通过漏斗图分析销售各环节中哪些环节出了问题。 为了更直观地查看电商网站数据,需要在ECharts中绘制 基本漏斗图、 基本金字塔、多漏斗图和多金字塔进行展示。

漏斗图又称倒三角图,漏斗图将数据呈现为几个阶段,每个阶段的数据都是整体的一部分;从一个阶段到另一个阶段,数据占比自上而下下降 ,所有阶段数据的占比总计100% 。与饼图一样,漏斗图呈现的也不是具体的数据。 此外,漏斗图还不需要使用任何数据轴。 在电商网站中,一个完整的网上购物步骤大致可分为:浏览网站选购商品→添加购物车→购物车结算→核对订单信息→提交订单→选择支付方式→完成支付。

某电商网站各购物步骤数据,如表所示。

image.png

利用电商网站各购物步骤数据展示整个网上购物中各步骤的整体转化率,如图所示。 由图可以直观地看出从最初“浏览网站选购商品”到最终“完成支付”这整个流程中的转化状况。此外,不仅能看出用户从“浏览网站选购商品”到“完成支付”的最终转化率,还可看出每个步骤的转化率,能够直观地展示和说明问题所在。

image.png

图例的源代码如下:

<html>

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>

</head>

<body>
    <!---为ECharts准备一个具备大小(宽高)的DOM--->
    <div id="main" style="width: 800px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的DOM,初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {  //指定图表的配置项和数据
            color: ['lightblue', 'rgba(0,150,0,0.5)', 'rgba(255,200,0,0.5)',
                'rgba(155,200,50,0.5)', 'rgba(44,44,0,0.5)', 'rgba(33,33,30,0.5)',
                'rgba(255,66,0,0.5)', 'rgba(155,23,31,0.5)', 'rgba(23,44,55,0.5)'],
            //配置标题组件
            title: { left: 270, top: 0, textStyle: { color: 'green' }, text: '漏斗图' },
            backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
            tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c}%" },  //配置提示框组件
            toolbox: {
                left: 555, top: 0,
                feature: {
                    dataView: { readOnly: false },
                    restore: {}, saveAsImage: {}
                }
            },  //配置工具箱组件
            legend: {
                left: 40, top: 30, data: ['浏览选购', '添加到购物车', '购物车结算',
                    '核对订单信息', '提交订单', '选择支付方式', '完成支付']
            },  //配置图例组件
            calculable: true,
            series: [  //配置数据系列
                {
                    name: '漏斗图', type: 'funnel', left: '3%',
                    sort: 'descending',  //金字塔:'ascending'; 漏斗图:'descending'
                    top: 60, bottom: 60, width: '80%',
                    min: 0, max: 100,
                    minSize: '0%',  //设置每一块的最小宽度
                    maxSize: '100%',  //设置每一块的最大,一次去除掉尖角
                    gap: 2,  //设置每一块之间的间隔
                    label: { show: true, position: 'inside' },  //设置标签显示在里面|外面
                    labelLine: {
                        length: 10,  //设置每一块的名字前面的线的长度
                        lineStyle: {
                            width: 1,  //设置每一块的名字前面的线的宽度
                            type: 'solid'//设置每一块的名字前面的线的类型
                        }
                    },
                    itemStyle: {
                        normal: {  //设置图形在正常状态下的样式 
                            label: { show: true, fontSize: 15, color: 'blue', position: 'inside', },
                            borderColor: '#fff',  //设置每一块的边框颜色
                            borderWidth: 0,  //设置每一块边框的宽度
                            shadowBlur: 50,  //设置整个外面的阴影厚度
                            shadowOffsetX: 0,  //设置每一块的y轴的阴影
                            shadowOffsetY: 50,  //设置每一块的x轴的阴影
                            shadowColor: 'rgba(0,255,0,0.4)'//设置阴影颜色
                        }
                    },
                    //设置鼠标hover时高亮样式
                    emphasis: { label: { fontFamily: "楷体", color: 'green', fontSize: 28 } },
                    data: [  //设置在漏斗图中展示的数据 
                        { value: 100, name: '浏览选购' }, { value: 60, name: '添加到购物车' },
                        { value: 42, name: '购物车结算' }, { value: 25, name: '核对订单信息' },
                        { value: 9, name: '提交订单' }, { value: 4, name: '选择支付方式' },
                        { value: 2.5, name: '完成支付' },]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>

把图表配置项中的series中的sort的取值由‘descending’改为‘ascending’时,就由漏斗图变为金字塔,如图所示

image.png

前面介绍的标准漏斗图或金字塔,相对比较简单。单一的漏斗图反映的数据过于单一,无法进行比较,有时就会失去分析的意义。利用用户购买流程优化前后的数据比较前后占比的变化,如图所示。 由图可知,实际上显示了两个漏斗图和两个金字塔。在观察上下的漏斗图 和金字塔时,可以明显地看出两组数据有着一定的差异。

图例源代码如下:

<html>

<head>
    <meta charset = "utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src = "js/echarts.js"></script>

</head>

<body>
    <!---为ECharts准备一个具备大小(宽高)的DOM--->
    <div id = "main" style = "width: 800px; height: 600px"></div>
    <script type = "text/javascript">
        //基于准备好的DOM,初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {  //指定图表的配置项和数据
            //使用预定义的颜色
            color: ["red", 'green', 'blue', '#8CC7B5', '#32CD32', '#7CFC00', '#19CAAD', 'grey'],
            title: {
                text: '多漏斗图和多金字塔', left: 280, top: 'top'
            },
            tooltip: { trigger: 'item', formatter: "{a} <br/>{b}:{c}%" },
            toolbox: {
                left: 750, top: 12,
                orient: 'vertical', top: 'center',
                feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} }
            },
            legend: {
                orient: 'vertical', left: 'left',
                left: 22, top: 12,
                data: ['展现', '点击', '访问', '咨询', '订单']
            },
            calculable: true,
            series: [
                {
                    name: '漏斗图', type: 'funnel', width: '40%', height: '45%', left: '5%', top: '50%',
                    data: [
                        { value: 60, name: '访问' }, { value: 30, name: '咨询' }, { value: 10, name: '订单' },
                        { value: 80, name: '点击' }, { value: 100, name: '展现' }
                    ]
                },
                {
                    name: '金字塔', type: 'funnel', width: '40%', height: '45%', left: '5%', top: '5%',
                    sort: 'ascending',
                    data: [
                        { value: 45, name: '访问' }, { value: 15, name: '咨询' }, { value: 5, name: '订单' },
                        { value: 65, name: '点击' }, { value: 100, name: '展现' }]
                },
                {
                    name: '漏斗图', type: 'funnel', width: '40%', height: '45%', left: '55%', top: '5%',
                    label: { normal: { position: 'left' } },
                    data: [
                        { value: 60, name: '访问' }, { value: 30, name: '咨询' },
                        { value: 10, name: '订单' }, { value: 80, name: '点击' },
                        { value: 100, name: '展现' }]
                },
                {
                    name: '金字塔', type: 'funnel', width: '40%', height: '45%',
                    left: '55%', top: '50%', sort: 'ascending',
                    label: { normal: { position: 'left' } },
                    data: [
                        { value: 45, name: '访问' }, { value: 15, name: '咨询' },
                        { value: 5, name: '订单' }, { value: 65, name: '点击' },
                        { value: 100, name: '展现' }]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>

由前面介绍的标准漏斗图和多漏斗图可知,漏斗图适用于业务流程比较规范、周期较长、环节较多的流程分析。 漏斗图并不是表示各个分类的占比情况,而是展示数据变化的一个逻辑流程。 如果数据是无逻辑顺序的占比比较,那么使用饼图更合适。 在漏斗图中,可以根据数据选择使用对比色或同一种颜色的色调渐变,从最暗到最浅来依照漏斗的尺寸排列。但是,当添加过多的图层和颜色时,会造成漏斗图难以阅读。