Detailed configuration process of Echarts funnel chart

---

Introduction to funnel chart

Echarts Funnel Chart is a commonly used data visualization chart type, used to display the flow and transformation of data at different stages. The funnel chart uses trapezoidal graphics of different sizes to represent the amount of data at each stage, thereby forming a gradually decreasing funnel shape to help users intuitively understand data loss and conversion rates.

The characteristics of Echarts funnel chart are as follows:

1. Stage flow display: Funnel charts are suitable for displaying data flow at different stages, such as sales process, conversion rate analysis, client behavior analysis, etc. Through the ladder graphics at different stages, the quantity changes and loss of data at different stages can be clearly displayed.

2. Conversion rate visualization: Funnel charts can display the conversion rate of data, that is, the proportional relationship between various stages. Through the width and height of the trapezoid, the conversion rate and churn ratio between different stages can be visually displayed, helping users understand the flow of data and conversion effects.

3. Data sorting and filtering: Echarts funnel chart supports sorting and filtering of data, and stages can be sorted according to different indicators to better understand the flow of data. At the same time, the funnel chart can also filter data through interactive operations, such as clicking on a stage to display detailed information about that stage.

4. Data labels and tips: Funnel charts can display data labels on the graph, such as stage names, quantities, or percentages. At the same time, when the mouse is hovering over the graph, detailed information of the data can also be displayed to facilitate users to view and analyze the data.

5. Diverse styles and configurations: Echarts funnel chart provides a wealth of styles and configuration options, and users can customize the appearance and functionality of the funnel chart according to their needs. For example, you can adjust the color, shape, border style, etc. of the chart, as well as add animation effects and interactive operations.

6. Strong compatibility: Echarts funnel chart is compatible with mainstream browsers, and provides a responsive layout function that can adapt to different screen sizes.

7. Good scalability: Echarts provides a wealth of extension plug-ins and themes, and users can customize the functions and appearance of charts according to their needs. At the same time, Echarts also supports integration with other front-end frameworks (such as Vue, React) to facilitate developers to better use and expand.

In short, Echarts funnel chart is a powerful data visualization tool with flexible configuration and good visualization effect, which can effectively display the flow and transformation of data at different stages. Through the funnel chart, users can more intuitively understand the data loss and conversion rate, so as to make more accurate data analysis and decisions.

Configuration steps

The detailed configuration process of Echarts funnel chart is as follows:

1. Introduce the Echarts library: Introduce the JavaScript file of the Echarts library into the HTML file.

<script src="echarts.min.js"></script>

2. Creates a DOM container with specified width and height for displaying the funnel chart.

<div id="chart" style="width: 600px; height: 400px;"></div>

3. Initialize the echarts instance and bind it to the specified DOM container.

var chart = echarts.init(document.getElementById('chart'));

4. Configure relevant parameters of the funnel chart:

var option = {
    
    
  title: {
    
    
    text: '漏斗图示例',   // 图表标题
    x: 'center'   // 标题位置
  },
  series: [{
    
    
    type: 'funnel',   // 图表类型为漏斗图
    data: [
      {
    
     name: '阶段1', value: 100 },   // 阶段数据，指定阶段的名称和数值
      {
    
     name: '阶段2', value: 80 },
      {
    
     name: '阶段3', value: 60 },
      {
    
     name: '阶段4', value: 40 },
      {
    
     name: '阶段5', value: 20 }
    ]
  }]
};

5. Apply the configuration to the funnel chart and display it.

chart.setOption(option);

The above is a simple funnel chart configuration process. More configurations can be performed according to needs, such as setting the color of the chart, adjusting the style of the chart, adding interactive operations, etc. For detailed configuration options, please refer to Echarts official documentation.

Simple example

Here's an example showing a simple funnel chart:

<!DOCTYPE html>
<html>
<head>
  <title>Echarts漏斗图示例</title>
  <script src="echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
  <script>
    var chart = echarts.init(document.getElementById('chart'));
    var option = {
      
      
      title: {
      
      
        text: '漏斗图示例',
        x: 'center'
      },
      series: [{
      
      
        type: 'funnel',
        data: [
          {
      
       name: '阶段1', value: 100 },
          {
      
       name: '阶段2', value: 80 },
          {
      
       name: '阶段3', value: 60 },
          {
      
       name: '阶段4', value: 40 },
          {
      
       name: '阶段5', value: 20 }
        ]
      }]
    };
    chart.setOption(option);
  </script>
</body>
</html>

The above code will display a funnel chart with a width of 600px and a height of 400px on the page. The chart title is "Funnel Chart Example", which shows the data volume in five stages. Each stage has a corresponding value. The effect is as shown below. Show.

You can modify the data and configuration options to create funnel charts with different styles and functions according to your own needs.