JS

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

在使用echarts的漏斗图行的时候,我们会发现,当数据为0的时候,或者数据中有0的时候,漏斗会变形。显示的很难看,那么怎么保障即便是数据为0了,依然显示漏斗形状?先看效果:这里使用的时候:https://echarts.apache.org/examples/zh/editor.html?c=funnel-customize源码:var realdata = &nb

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

b8169f355669707c408bba07f15f7424.png

这里使用的时候: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: {
       

原创不易,完成人机校验,阅读全文

相关推荐