echarts漏斗图

发布时间：2023-05-17

echarts漏斗图详解

随着数据可视化的需求越来越高，echarts漏斗图作为数据可视化中的一种重要方式，被广泛应用于各种场景。本文将从多个方面对echarts漏斗图进行详细的阐述。

一、echarts漏斗图不变形

在实际应用中，我们经常会遇到展示数据的值不相等的情况。这就需要使用到echarts漏斗图的缩放功能来使漏斗图比例不变形。实现这个功能需要使用echarts中的dataZoom组件，即对漏斗图组件进行联动可视化。

option = {
    // 设置dataZoom组件
    dataZoom: {
        // 水平滚动条显示位置
        orient: 'horizontal',
        // 滚动条宽度
        width: 200,
        // 缩放范围的起始百分比
        start: 0,
        // 缩放范围的结束百分比
        end: 100
    },
    series: {
        // 漏斗图组件
        type: 'funnel',
        ...
    }
};

二、echarts漏斗图改为金字塔

有时候漏斗图无法满足我们的展示需求，需要将漏斗图改为金字塔形式进行展示，即从下往上进行展示。

option = {
    series: {
        // 金字塔组件
        type: 'funnel',
        // 数据排序方式
        sort: 'ascending',
        ...
    }
};

三、echarts漏斗图知识点

使用echarts漏斗图需要掌握一些基础的知识点，如：

  1. 数据格式：漏斗图的数据格式通常为数组类型，格式为[{value:10, name:'展示值1'},{value:8, name:'展示值2'},{value:6, name:'展示值3'},...]。
  2. 数据单位：会根据数据也量调整漏斗图组件的显示单位，单位为%、$、K、M、B等。可以通过设置formatter属性进行模板化显示。
option = {
     series: {
         type: 'funnel',
         data:[
             {value:100, name:'展示值1'},
             {value:80, name:'展示值2'},
             {value:60, name:'展示值3'},
         ],
         // 通过设置label的formatter函数设置模板化显示
         label: {
             formatter: '{a}{b}: {c}M'
         }
     }
};
  1. 数据样式：可以通过设置itemStyle属性设置漏斗图的样式、颜色、边框等。同时，可以设置emphasis属性对鼠标悬停的状态进行设置，如鼠标悬停时的高亮样式。
option = {
    series: {
        type: 'funnel',
        data:[
            {value:100, name:'展示值1'},
            {value:80, name:'展示值2'},
            {value:60, name:'展示值3'}
        ],
        // 通过设置itemStyle属性进行样式设置
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
            ...
        },
        // 通过设置emphasis属性进行高亮显示
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }
};

四、echarts漏斗图怎么做

做一个简单的echarts漏斗图可以参考以下步骤：

  1. 引入echarts插件库
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
  1. 创建容器，设置div标签的id和样式
<div id="chart" style="width: 600px;height:400px"></div>
  1. 创建echarts实例并进行数据配置
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;
option = {
    series: {
        type: 'funnel',
        data:[
            {value:100, name:'展示值1'},
            {value:80, name:'展示值2'},
            {value:60, name:'展示值3'}
        ],
        ...
    }
};
myChart.setOption(option);

五、echarts漏斗图圆角

可以使用echarts中的itemStyle属性的borderRadius属性来设置漏斗图的圆角，使漏斗图更美观可爱。

option = {
    series: {
        type: 'funnel',
        data:[
            {value:100, name:'展示值1'},
            {value:80, name:'展示值2'},
            {value:60, name:'展示值3'}
        ],
        // 通过设置itemStyle属性中borderRadius属性设置圆角
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
            borderRadius: 10,
            ...
        },
    }
};

六、echarts图表创建

在使用echarts创建漏斗图之前需要创建相应的echarts图表。

// 创建echarts图表
var myChart = echarts.init(document.getElementById('chart'), 'light');

七、echarts漏斗图圆脸

可以使用echarts中的funnelAlign属性来设置漏斗图为圆脸形式。

var option = {
    series: {
        // 设置圆脸形式的漏斗图
        funnelAlign: 'center',
        ...
    }
};

八、echarts漏斗图设置高度

可以使用echarts中的grid属性来设置echarts容器的高度，从而使漏斗图高度得以控制。

option = {
    grid: {
        // 设置echarts容器高度
        height: 400
    },
    ...
};

九、echarts漏斗图怎么设置三角形

可以使用echarts中的sort和labelLine属性实现三角形形式的漏斗图。

option = {
    series: {
        type: 'funnel',
        // 排序方式
        sort: 'ascending',
        labelLine: {
            show: false
        },
        ...
    }
};

十、echarts漏斗图表不改变形状

可以使用dataZoom组件解决echarts漏斗图展示不变形的问题。

option = {
    dataZoom: {
        // 设置dataZoom组件
        orient: 'horizontal',
        width: 200,
        start: 0,
        end: 100
    },
    series: {
        type: 'funnel',
        ...
    }
};
推荐文章