ECharts Funnel Chart: How to Display Data Conversion Rate

ECharts Funnel Chart: How to display data conversion rate, specific code examples are required

Introduction:
In the field of data visualization, the funnel chart is a very commonly used Chart type, which can visually display the data conversion process and conversion rate. As a powerful data visualization tool, ECharts also provides a funnel chart drawing function. This article will combine specific code examples to introduce in detail the drawing method of ECharts funnel chart and how to display the conversion rate of data.

1. The basic structure of the funnel chart
   The funnel chart presents different stages from top to bottom, and each stage corresponds to a certain amount of data. These stages gradually shrink, forming the shape of a funnel. In ECharts, funnel charts can be specified through the type attribute in series.
2. Drawing a basic funnel chart
   First, we need to introduce the ECharts library file and initialize a chart instance. The following is a code example for drawing a basic funnel chart:

<!--引入ECharts的库文件-->
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>

<!--在HTML中创建一个DOM容器，用于存放图表-->
<div id="funnelChart" style="width: 600px; height: 400px;"></div>

<script>
  //实例化一个图表实例
  let myChart = echarts.init(document.getElementById('funnelChart'));

  //配置图表的基本信息
  let option = {
      title: {
          text: '漏斗图示例',
      },
      series: [{
          type: 'funnel',
          data: [
              {value: 60, name: '浏览量'},
              {value: 40, name: '点击量'},
              {value: 20, name: '购买量'},
              {value: 10, name: '转化率'}
          ]
      }]
  };

  //使用配置项显示图表
  myChart.setOption(option);
</script>

3. Display data conversion rate
   In order to display the conversion rate of data, we can add a label to each stage of the funnel chart label, and customize the display content of the label through the formatter attribute. The following is a code example showing the data conversion rate:

let option = {
    title: {
        text: '漏斗图示例',
    },
    series: [{
        type: 'funnel',
        data: [
            {value: 60, name: '浏览量'},
            {value: 40, name: '点击量'},
            {value: 20, name: '购买量'},
            {value: 10, name: '转化率'}
        ],
        label: {
            formatter: '{b}：{c}%'
        }
    }]
};

By setting the formatter attribute of label to '{b}:{c}%', we can change the name of the data (name) and the value ( value) along with a percent sign (%) are shown in the label of each stage. For example, 'Purchase Amount: 20%'.

Summary:
In ECharts, we can draw a funnel chart through simple configuration and display the conversion rate of the data. By setting the formatter attribute of the label label, we can customize the display content of the label. I hope that through the introduction of this article, readers can understand the basic drawing method of ECharts funnel chart and use it flexibly in practical applications.

The above is the detailed content of ECharts Funnel Chart: How to Display Data Conversion Rate. For more information, please follow other related articles on the PHP Chinese website!