Home > Article > Web Front-end > ECharts Funnel Chart: How to Show Data Funnel Changes

ECharts Funnel Chart: How to Show Data Funnel Changes

WBOYOriginal: 2023-12-18 14:13:42943browse

ECharts Funnel Chart: How to display data funnel changes, specific code examples are required

Introduction
The funnel chart is a commonly used data visualization method. Can be used to display process changes or stage analysis of data. ECharts is an open source JavaScript data visualization library that can be used to create a variety of interactive charts. This article will introduce how to use ECharts to display funnel changes in data and provide specific code examples.
ECharts Funnel Chart Basic Concept
Funnel chart is a special chart type used to represent the funnel shape of data. Typically, the bottom width of a funnel chart represents starting data, the top width represents final data, and the width of each stage in between represents intermediate data. Funnel charts can accurately display the process changes of data, allowing the audience to intuitively understand the growth or decrease of data.
Steps for using ECharts funnel chart
Using ECharts to create a funnel chart can generally be divided into the following steps:

3.1 Prepare data
First, you need to prepare the required Displayed data. The data of each stage should contain two attributes, namely the name of the stage and the value of the stage. For example, we can have the following data:

var data = [
    { name: '访问', value: 100 },
    { name: '浏览', value: 80 },
    { name: '点击', value: 60 },
    { name: '转化', value: 40 },
    { name: '下单', value: 20 },
    { name: '支付', value: 10 }
];

3.2 Create a chart instance
Next, you need to create an ECharts chart instance. A basic funnel chart instance can be created with the following code:

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

Here 'chart' is the id of an HTML element used to accommodate ECharts charts.

3.3 Configuring the funnel chart
ECharts provides a wealth of configuration options that can be used to customize the style of the funnel chart. The following is a basic funnel chart configuration example:

var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    series: [
        {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 20
                }
            },
            data: data
        }
    ]
};

In the above configuration, we can set the content and format of the tooltip, set the position and size of the funnel chart, set the sorting method of data and the display method of labels, etc.

3.4 Render the chart
Finally, apply the configuration to the chart instance and use the setOption method to render:

myChart.setOption(option);

Full code example
The following is a complete code example for using ECharts to create a funnel chart:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 漏斗图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        var data = [
            { name: '访问', value: 100 },
            { name: '浏览', value: 80 },
            { name: '点击', value: 60 },
            { name: '转化', value: 40 },
            { name: '下单', value: 20 },
            { name: '支付', value: 10 }
        ];
        
        var myChart = echarts.init(document.getElementById('chart'));
        
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '漏斗图',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20
                        }
                    },
                    data: data
                }
            ]
        };
        
        myChart.setOption(option);
    </script>
</body>
</html>

Through the above code, you can display a funnel chart in the browser and interact with the data through the interactive functions provided by ECharts for further analysis and exploration.

Summary
This article introduces the basic concepts and usage steps of ECharts funnel chart, and provides specific code examples. I hope this article can help readers and give them a deeper understanding of how to use ECharts to display funnel changes in data. Of course, ECharts has many other powerful functions that readers can further learn and explore.

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

JavaScript echarts html

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use polar coordinate system to display data in EChartsNext article：How to use polar coordinate system to display data in ECharts

See more

ECharts Funnel Chart: How to Show Data Funnel Changes

Related articles