Echarts漏斗图形的，怎么保障当数据是0的时候，漏斗图形一直存在。

凯哥Java

发布于 2022-12-16 17:09:07

8730

发布于 2022-12-16 17:09:07

文章被收录于专栏：凯哥Java

在使用echarts的漏斗图行的时候，我们会发现，当数据为0的时候，或者数据中有0的时候，漏斗会变形。显示的很难看，那么怎么保障即便是数据为0了，依然显示漏斗形状？先看效果：

这里使用的时候：https://echarts.apache.org/examples/zh/editor.html?c=funnel-customize

源码：

var realdata =  [
    {value: 0, name: '入职人数'},
    {value: 0, name: '离职人数'},
    {value: 0, name: '转正人数'},
    {value: 0, name: 'offer发送数量'},
    {value: 20, name: 'offer接受数量'},
    {value: 0, name: 'offer拒绝数量'},
    {value: 10, name: 'offer放弃入职数量'}
];
var length = realdata.length;
var cdata = [];
var tdata = [];
realdata.forEach((obj, index) => {
    cdata.push({
        name: obj.name,
        value: 20 * (length - index)
    });
    tdata.push({
        name: obj.name,
        value: 10 * (length - index)
    });
});
option = {
    title: {
        text: '漏斗图',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data:["入职人数","离职人数","转正人数","offer发送数量","offer接受数量","offer拒绝数量","offer放弃入职数量"]
    },
    series: [{
                    name: '预期',
                    type: 'funnel',
                    width: '90%',
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    left: '5%',
                    gap: 20,//这个是设置每层之间间距的
                    label: {
                        show: true,
                        normal: {
                            position: 'inside',
                            verticalAlign: 'top',
                            formatter: function(params) {
                                let rateStr = '';
                                if (realdata[params.dataIndex].rateName) {
                                    rateStr = `${realdata[params.dataIndex].rateName}：${realdata[params.dataIndex].rate == null ? '--' : realdata[params.dataIndex].rate}%`;
                                }
                                return `${params.name}：${realdata[params.dataIndex].value == null ? '--' : realdata[params.dataIndex].value}`
                            },
                            textStyle: {
                                color: '#666'
                            }
                        }
                    },
                    itemStyle: {},
                    data: cdata
                }
    ]
};

代码可以之间复制到demo中，运行查看效果的。

其实这里使用双漏斗的，然后在series集合中去掉了实际值的。就可以了。

注意：其中：

  formatter: function(params) {
                                return `${params.name}：${realdata[params.dataIndex].value == null ? '--' : realdata[params.dataIndex].value}`
                            },

这种是es6的写法。

换成js的写法：

formatter: function(params) {
    var result;
    if(realdata[params.dataIndex].value == null) {
        result = params.name + '--';
    } else {
        result = params.name + realdata[params.dataIndex].value;
    }
    return result;
},

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-03-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

echarts