ECharts漏斗图-Funnel，附视频讲解与代码下载

图表制作解说

于 2024-10-07 05:00:00 发布

阅读量215

点赞数 7

分类专栏： echarts漏斗图文章标签：漏斗图 echarts 统计分析数据可视化大屏可视化前端 javascript

本文链接：https://blog.csdn.net/zhangjiujiu/article/details/142661106

版权

echarts漏斗图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

引言：

在数据可视化领域，漏斗图是一种非常有效的工具，用于展示从宽到窄的逐步减少过程，如销售转化率、用户流失率等。本文将详细介绍如何使用ECharts库实现一个漏斗图，包括图表效果预览、视频讲解及代码下载，让你轻松掌握这一技能。

一、图表效果预览

二、视频讲解链接

为了更直观地了解图表的实现过程，我录制了一段详细的视频讲解，并上传到了B站。视频中将逐步介绍echarts使用版本、数据准备、图表配置以及交互功能添加等关键步骤。

代码视频讲解： ECharts漏斗图-Funnel_哔哩哔哩_bilibili

三、代码下载链接

为了方便大家学习和使用，我已经将完整的代码上传到了CSDN上。你可以通过以下链接下载代码，并且直接运行显示效果。

源码下载链接：https://download.csdn.net/download/zhangjiujiu/89823675

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #chart-panel {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 1000px;
            height: 750px;
        }
    </style>
    <script src="../../lib/5.5.0/echarts.min.js"></script>
</head>

<body>
    <div id="chart-panel"></div>
    <script type="text/javascript">
        //初始化图表对象。
        var myChart = echarts.init(document.getElementById('chart-panel'));
        //图表配置。
        let option = {
            title: {
                text: 'Funnel',
                left: 'left',
                top: 'bottom'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}%'
            },
            toolbox: {
                orient: 'vertical',
                top: 'center',
                feature: {
                    dataView: { readOnly: false },
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
            },
            series: [
                {
                    name: 'Funnel',
                    type: 'funnel',
                    width: '40%',
                    height: '45%',
                    left: '5%',
                    top: '50%',
                    data: [
                        { value: 60, name: 'Visit' },
                        { value: 30, name: 'Inquiry' },
                        { value: 10, name: 'Order' },
                        { value: 80, name: 'Click' },
                        { value: 100, name: 'Show' }
                    ]
                },
                {
                    name: 'Pyramid',
                    type: 'funnel',
                    width: '40%',
                    height: '45%',
                    left: '5%',
                    top: '5%',
                    sort: 'ascending',
                    data: [
                        { value: 60, name: 'Visit' },
                        { value: 30, name: 'Inquiry' },
                        { value: 10, name: 'Order' },
                        { value: 80, name: 'Click' },
                        { value: 100, name: 'Show' }
                    ]
                },
                {
                    name: 'Funnel',
                    type: 'funnel',
                    width: '40%',
                    height: '45%',
                    left: '55%',
                    top: '5%',
                    label: {
                        position: 'left'
                    },
                    data: [
                        { value: 60, name: 'Visit' },
                        { value: 30, name: 'Inquiry' },
                        { value: 10, name: 'Order' },
                        { value: 80, name: 'Click' },
                        { value: 100, name: 'Show' }
                    ]
                },
                {
                    name: 'Pyramid',
                    type: 'funnel',
                    width: '40%',
                    height: '45%',
                    left: '55%',
                    top: '50%',
                    sort: 'ascending',
                    label: {
                        position: 'left'
                    },
                    data: [
                        { value: 60, name: 'Visit' },
                        { value: 30, name: 'Inquiry' },
                        { value: 10, name: 'Order' },
                        { value: 80, name: 'Click' },
                        { value: 100, name: 'Show' }
                    ]
                }
            ]
        };
        //通过图表对象的setOption方法和图表配置进行关联。
        myChart.setOption(option);
    </script>
</body>

</html>