| (window.webpackJsonp=window.webpackJsonp||[]).push([[42],{336:function(e,t,n){"use strict";n.r(t),t.default='# Funnel Chart\n\nFunnel chart (inverted triangle chart) present data into several stages, every stage is part of the whole. The overall percentage of all stages is 100%. Similar to the bar chart, the funnel chart shows no specific data but the proportion related to the whole. Therefore, a funnel chart doesn\'t have an axis.\n\nThe funnel chart usually used to provide the simplified data which is used to analyze the change or difference in every link of the process. It is also useful to find out the problem and bottleneck during the business.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xrJIQEN5NM">\n</iframe>\n\n\n## Suggestion for Using Funnel Chart\n\n1. Represented by an e-commerce website, the funnel chart can easily show the entire process from the website to placing order. It not only shows the final conversion rate but also the conversion rate of each step, which leads to the problem directly. You can improve the design for some specific steps.\n\nAs shown below, the first three steps("show", "click", "visit") have only a little drain. The significant decrease happened from "visit" to "consult". As the result, the manager can mainly analyze what caused the reduction of consulting. For instance, it might because that the entrance for consult might not obvious enough.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHJIPHN9Nf">\n</iframe>\n\n2. Using two stacked funnel chart to compare between the prediction and outcome makes the deviation analyze easier.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xrydEwN94f">\n</iframe>\n\n3. Try to use two funnels in one chart to discuss the transforming circumstances. As the following chart shows, project B has a higher churn rate comparing with project A.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xrJfrjEc4z&v=1">\n</iframe>\n\n4. The funnel chart is more useful for displaying a logic flow which is different from the pie chart. If the data have no logical relevance, you should choose the pie chart.\n\n5. Depending on the type of data, use gradually changed colors or contract colors. Arrange them from dark to light according to the size of the funnel chart. Please don\'t add too many layers or colors to increase reading difficulty. \n'}}]); |