Echarts漏斗图形的,怎么保障当数据是0的时候,漏斗图形一直存在。
2023-02-18 16:31:18 时间
在使用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;
},
相关文章
- 零售行业R公司对接亚马逊Amazon Device EDI项目案例
- FPS 游戏:快速寻找基址的方法
- 7min到40s:SpringBoot启动优化实践
- 客快物流大数据项目(九十九):Clickhouse中update/delete的使用
- 手把手教你使用CNN进行交通标志识别(已开源)
- 软件测试|selenium三种等待方式
- FPS游戏:实现人物定点瞬移
- 人力资源行业数据特点解析
- PE格式:实现PE文件特征码识别
- PE格式:实现VA与FOA之间的转换
- PE格式:导入表与IAT内存修正
- PE格式:手工实现IAT导入表注入劫持
- HR必会的薪酬数据建模分析逻辑
- 软件测试|selenium xpath定位
- PE格式:手工实现各种脱壳后的修复
- 关于人力资源数据化转型落地的一些思考
- 如何最低成本获取行业薪酬数据
- 人力资源数据分析 就应该这么学
- 人力资源各模数据关联建模,实现全维度的数据分析
- HR年底必看 - 如何获取行业相关人效数据指标