html实现funnel图

Channing Lewis

于 2024-08-12 21:44:16 发布

阅读量475

点赞数 11

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/lycwhu/article/details/141125010

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

要在HTML中实现漏斗图（Funnel Chart），你可以使用以下几种方法之一：

1. 使用JavaScript库（例如Chart.js, ECharts）

这是最简单和推荐的方式，因为这些库提供了内置的漏斗图功能，并且可以高度自定义。

使用ECharts实现漏斗图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>漏斗图示例</title>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 准备一个dom容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '漏斗图示例'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}%'
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            legend: {
                data: ['展现', '点击', '访问', '咨询', '订单']
            },
            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'
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    data: [
                        {value: 60, name: '访问'},
                        {value: 40, name: '咨询'},
                        {value: 20, name: '订单'},
                        {value: 80, name: '点击'},
                        {value: 100, name: '展现'}
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

2. 使用纯CSS + HTML实现基本的漏斗图

如果你不想依赖外部库，可以使用纯HTML和CSS来实现一个简单的漏斗图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS漏斗图</title>
    <style>
        .funnel-container {
            width: 200px;
            margin: 0 auto;
            text-align: center;
        }
        .funnel-step {
            border-style: solid;
            border-width: 0 50px 100px 50px;
            border-color: transparent transparent #4CAF50 transparent;
            margin: 10px auto;
            width: 100px;
            height: 0;
        }
        .funnel-step:nth-child(1) {
            border-width: 0 40px 80px 40px;
        }
        .funnel-step:nth-child(2) {
            border-width: 0 30px 60px 30px;
        }
        .funnel-step:nth-child(3) {
            border-width: 0 20px 40px 20px;
        }
        .funnel-step:nth-child(4) {
            border-width: 0 10px 20px 10px;
        }
    </style>
</head>
<body>
    <div class="funnel-container">
        <div class="funnel-step" style="border-color: transparent transparent #FF5722 transparent;">Step 1</div>
        <div class="funnel-step" style="border-color: transparent transparent #FF9800 transparent;">Step 2</div>
        <div class="funnel-step" style="border-color: transparent transparent #FFC107 transparent;">Step 3</div>
        <div class="funnel-step" style="border-color: transparent transparent #FFEB3B transparent;">Step 4</div>
    </div>
</body>
</html>

3. 使用SVG实现漏斗图

你还可以使用SVG（矢量图形）直接绘制漏斗图。

这些方法中，使用JavaScript库（如ECharts）是最强大且灵活的，可以处理复杂的数据和交互。如果只是简单的静态漏斗图，CSS方法也可以满足需求。

Channing Lewis

关注

11
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html实现funnel图

这些方法中，使用JavaScript库（如ECharts）是最强大且灵活的，可以处理复杂的数据和交互。如果只是简单的静态漏斗图，CSS方法也可以满足需求。这是最简单和推荐的方式，因为这些库提供了内置的漏斗图功能，并且可以高度自定义。如果你不想依赖外部库，可以使用纯HTML和CSS来实现一个简单的漏斗图。你还可以使用SVG（矢量图形）直接绘制漏斗图。// 使用刚指定的配置项和数据显示图表。// 初始化echarts实例。// 指定图表的配置项和数据。
复制链接

扫一扫

专栏目录