ECharts Funnel Chart: How to Show Data Funnel Changes-JS Tutorial-php.cn

ECharts Funnel Chart: How to Show Data Funnel Changes

WBOY

Release： 2023-12-18 14:13:42

Original

946 people have browsed it

ECharts Funnel Chart: How to Show Data Funnel Changes

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 }
];

Copy after login

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'));

Copy after login

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
        }
    ]
};

Copy after login

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);

Copy after login

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>

Copy after login

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!