Echarts漏斗图形的,怎么保障当数据是0的时候,漏斗图形一直存在。
2023-06-13 09:15:57 时间
在使用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;
},
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- Python电影评论数据分析系统_echarts数据可视化
- React魔法堂:echarts-for-react源码略读
- Vue整合HighCharts和ECharts实现数据可视化
- echarts饼图中间文字,固定,改成自己想要的值
- echarts数据可视化如何实现_数据可视化页面
- echart旭日图数据转换_echarts横坐标时间轴
- 在vue3 中使用echarts
- 一、基础折线图详解《手把手教你 ECharts 数据可视化详解》
- 二、基础平滑、面积折线图与折线堆叠、面积堆叠《手把手教你 ECharts 数据可视化详解》
- 数据可视化:基于 Echarts + SpringBoot 的动态实时大屏银行监管系统【源码】
- 前端ECharts框架绘制各种图形
- ECharts数据集( dataset )的行或列映射为系列(series)
- ECharts使用dataset管理数据
- ECharts柱状图绘制
- 【Echarts】极坐标系下的柱状图实现圆角环状进度条