A Funnel graph or pyramid is a bar graph with an inverted or positive triangle, which is suitable for analyzing standard business processes with a long period and many links. Funnel chart is also one of the commonly used BI charts. Comparing business data of all links through funnel chart or pyramid can not only find and explain problems intuitively, but also analyze problems in all links of sales through funnel chart. In order to view e-commerce site data more intuitively, you need to draw basic funnel plot, basic pyramid, multiple funnel plot and multiple pyramid in ECharts to display.

Funnel plot, also known as inverted triangle plot, presents data in several stages, and the data in each stage is a part of the whole. From one stage to the next, the proportion of data decreases from top to bottom, totaling 100% for all stages. Like pie charts, funnel charts do not present specific data. Additionally, funnel plots do not require the use of any data axes. In e-commerce website, a complete online shopping steps can be roughly divided into: browse the website to buy goods → add shopping cart → shopping cart settlement → check order information → submit order → select payment method → complete payment.

The data of each shopping step on an e-commerce website is shown in the table.

Show the overall conversion rate of each step in the whole online shopping by using the data of each shopping step on e-commerce websites, as shown in the figure. From the figure, we can intuitively see the transformation of the whole process from the initial “browsing the website to purchase goods” to the final “completing payment”. In addition, you can see not only the final conversion rate of the user from “browsing the site to buy something” to “completing the payment”, but also the conversion rate of each step, which visually shows and illustrates the problem.

The legend source code is as follows:

<html> <head> <meta charset="utf-8"> <! <script SRC ="js/echarts.js"></script> </head> <body> <! <div id="main" style="width: 800px; height: 600px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {// Specify the chart configuration item and data color: [' lightblue ', 'rgba (0150,0,0.5)', 'rgba (255200,0,0.5)', 'rgba (155200,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)], / / configuration header components title: {left: 270, top: 0, textStyle: {color: 'green'}, text: 'funnel'}, backgroundColor: Tooltip: {trigger: 'item', formatter: "{a} <br/>{b} : {c}%"}, // Configure toolbox components Toolbox: {left: 555, top: 0, feature: {dataView: {readOnly: false}, restore: {}, saveAsImage: Legend: {left: 40, top: 30, data: [' Browse to purchase ', 'Add to cart ',' Cart Settlement ', 'Check order information ',' Submit Order ', 'Select payment method ',' complete payment ']}, // Configure legend component calculable: true, series: [// configuration data series {name: 'funnel', type: 'funnel', left: '3%', sort: 'descending', // pyramid :'descending' top: 60, bottom: 60, width: '80%', min: 0, Max: 100, minSize: '0%', // set the minimum width of each piece maxSize: '100%', // set the maximum width of each piece, once remove the gap: 2, / / set the spacing between each piece of label: {show: true, position: 'inside'}, / / set the label display outside inside | labelLine: {length: LineStyle: {width: 1, lineStyle: {width: 1, lineStyle: {width: 1, lineStyle: {width: 1, lineStyle: {width: 1, lineStyle: {width: 1, lineStyle: {width: 1, lineStyle: {width: 1, lineStyle: {width: 1, lineStyle: {width: 1, lineStyle: {width: 1, lineStyle: {}, itemStyle: {normal: Label: {show: true, fontSize: 15, color: 'blue', position: 'inside',}, borderColor: '# FFF ', // set the border color for each block. BorderWidth: 0, // set the borderWidth for each block. ShadowBlur: 50, // set the entire outer shadow thickness for shadowOffsetX: 0, // Set the y axis shadow of each block to 50, // set the x axis shadow of each block to shadowColor: 'rgba(0,255,0,0.4)'// set the shadow color}}, // set the mouse to hover highlight style element: {label: {fontFamily: "regular ", color: 'green', fontSize: 28}}, data: [// Set the data displayed in the funnel graph {value: 100, name: 'Browse to buy'}, {value: 60, name: 'add to cart'}, {value: 42, name: 'Shopping cart checkout'}, {value: 25, name: 'Check order information'}, {value: 9, name: 'submit order'}, {value: 4, name: 'select payment method'}, {value: 2.5, name: 'Complete payment'},]}]}; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code

When you change the value of sort in the series of the diagram configuration item from ‘descending’ to ‘Ascending’, the funnel diagram becomes a pyramid, as shown in the figure

The standard funnel, or pyramid, described earlier is relatively simple. A single funnel plot reflects too single data to be compared, and sometimes it will lose the significance of analysis. The data before and after user purchase process optimization are used to compare the changes in the proportion before and after, as shown in the figure. The figure shows two funnel plots and two pyramids. When observing the upper and lower funnel plots and pyramids, it is obvious that there are certain differences between the two sets of data.

Legend source code is as follows:

<html> <head> <meta charset = "utf-8"> <! <script SRC = "js/echarts.js"></script> </head> <body> <! <div id = "main" style = "width: 800px; height: 600px"></div> <script type = "text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {// Specify the chart configuration items and data // use the predefined color color: [" red ", 'green', 'blue', '# 8 cc7b5', '# 32 cd32', '# 7 cfc00', '# 19 caad', 'grey'], title: {text: 'many funnel chart and many pyramids, 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: {received: 'vertical', left: 'left', left: 22, top: 12, data: [' show ', 'click', 'access', 'consulting', 'orders']}, calculable: True, the series: [{name: 'funnel figure, type:' good ', width: '40%', height: '45%', left: '5%' top: '50%' data: [{value: 60, name: 'access'}, {value: 30, name: 'consult'}, {value: 10, name: 'order'}, {value: 80, name: 'click'}, {value: 100, name: 'show'}}, {name: "pyramid" type: 'good', width: '40%', height: '45%', left: '5%' top: '5%' sort: 'ascending' data: [{value: 45, name: 'access'}, {value: 15, name: 'consult'}, {value: 5, name: 'order'}, {value: 65, name: 'click'}, {value: 100, name: 'show'}}, {name: 'funnel figure, type:' good ', width: '40%', height: '45%', left: '55%' top: '5%' label: {normal: {position: 'left'}}, data: [{value: 60, name: 'access'}, {value: 30, name: 'consulting'}, {value: 10, name: 'orders'}, {value: 80, name:' click '}, {value: 100, name: 'show'}}, {name: "pyramid" type: 'good', width: '40%', height: '45%', left: '55%', top: '50%', sort: 'ascending', label: { normal: { position: 'left' } }, data: [ { value: 45, name: 'Access'}, {value: 15, name: 'consult'}, {value: 5, name: 'order'}, {value: 65, name: 'click'}, {value: 100, name: }]}}; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code

As can be seen from the standard funnel diagram and multi-funnel diagram introduced above, funnel diagram is suitable for process analysis with relatively standard business process, long cycle and many links. Funnel plot does not represent the proportion of each category, but shows a logical process of data changes. If the data is a non-logical proportion comparison, then a pie chart is more appropriate. In the funnel plot, you can choose to use contrasting colors or gradients of the same color based on the data, from darkest to lightest, according to the size of the funnel. However, when too many layers and colors are added, funnel plots can be difficult to read.