Echarts 神技：打造超炫漏斗图全攻略

在数据分析和可视化中，漏斗图是一种非常有用的工具，可以直观地展示数据在不同阶段的转化情况。本文将介绍如何使用 Echarts 实现一个漏斗图。

一、准备工作

1. 确保你已经引入了 Echarts 库，可以通过以下方式引入也可以通过npm引入：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

二、代码分析

以下是实现漏斗图的代码：

option = {
    title: {
        text: '漏斗图示例',
        subtext: 'echarts漏斗图系列',
        x:'center',
        textStyle: {
            color: '#fff'
        }
    },
    backgroundColor: '#141845',
    color: ['#efbb1a', '#d77169', '#c14f60', '#953f61', '#72355f', ],
    series : [
        {
            name:'漏斗图',
            type:'funnel',
            x: '10%',
            y: 60,
            //x2: 80,
            y2: 60,
            width: '80%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort : 'descending', // 'ascending', 'descending'
            gap :0,
            data:[
                {value:60, name:'访问'},
                {value:40, name:'咨询'},
                {value:20, name:'订单'},
                {value:80, name:'点击'},
                {value:100, name:'展现'}
            ].sort(function (a, b) { return a.value - b.value}),
            roseType: true,
            label: {
                normal: {
                    formatter: function (params) {
                        return params.name + ' ' + params.value + '%';
                    },
                    position: 'center'
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    shadowBlur: 30,
                    shadowOffsetX: 0,
                    shadowOffsetY: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

1、 标题设置

title: {
    text: '漏斗图示例',
    subtext: 'echarts漏斗图系列',
    x:'center',
    textStyle: {
        color: '#fff'
    }
}

• • 通过title属性设置了漏斗图的标题为“漏斗图示例”，副标题为“echarts漏斗图系列”，并将标题的位置设置为居中，文字颜色设置为白色。

 

2、背景颜色设置

backgroundColor: '#141845',

• • 使用backgroundColor属性将背景颜色设置为#522257

 

3、颜色设置

color: ['#efbb1a', '#d77169', '#c14f60', '#953f61', '#72355f', ],

• • 通过color数组设置了漏斗图各个部分的颜色。

 

4、系列设置

series : [
    {
        name:'漏斗图',
        type:'funnel',
        x: '10%',
        y: 60,
        //x2: 80,
        y2: 60,
        width: '80%',
        // height: {totalHeight} - y - y2,
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort : 'descending', // 'ascending', 'descending'
        gap :0,
        data:[
            {value:60, name:'访问'},
            {value:40, name:'咨询'},
            {value:20, name:'订单'},
            {value:80, name:'点击'},
            {value:100, name:'展现'}
        ].sort(function (a, b) { return a.value - b.value}),
        roseType: true,
        label: {
            normal: {
                formatter: function (params) {
                    return params.name + ' ' + params.value + '%';
                },
                position: 'center'
            }
        },
        itemStyle: {
            normal: {
                borderWidth: 0,
                shadowBlur: 30,
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }
]

• • name属性设置了系列的名称为“漏斗图”。

• • type属性设置为'funnel'，表示绘制漏斗图。

• • x和y属性设置了漏斗图的起始位置。

• • width属性设置了漏斗图的宽度。

• • min和max属性设置了数据的最小值和最大值范围。

• • sort属性设置了数据的排序方式为降序。

• • gap属性设置了漏斗图各个部分之间的间距。

• • data数组中包含了漏斗图的数据，每个对象包含value和name属性，分别表示数据值和名称。

• • roseType属性设置为true，表示绘制玫瑰图样式的漏斗图。

• • label属性设置了数据标签的显示格式和位置。

• • itemStyle属性设置了漏斗图各个部分的样式，包括边框宽度、阴影等。

 

三、使用 Echarts 绘制漏斗图

1、在 HTML 页面中创建一个容器用于显示漏斗图：

<div id="chart-container"></div>

2、使用以下 JavaScript 代码将漏斗图绘制到容器中：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart-container'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

四、总结

通过以上步骤，我们成功地使用 Echarts 实现了一个漏斗图。可以根据实际需求调整数据和样式设置，以满足不同的可视化需求。Echarts 提供了丰富的配置选项，可以让我们轻松地创建各种类型的图表，为数据分析和展示提供了强大的支持。

希望这篇博客对你在使用 Echarts 实现漏斗图时有所帮助。